რეაგირებადი სურათები ბრაუზერს აძლევს საშუალებას აირჩიოს საუკეთესო სურათი მოწყობილობისთვის — დაზოგავს გამტარს ტელეფონებზე და გადასცემს მკრთალ სურათებს მაღალი DPI ეკრანებზე.
srcset + sizes — ერთი სურათი, სხვადსხვა რეზოლუციები
html
რეაგირებადი სურათები ბრაუზერს აძლევს საშუალებას აირჩიოს საუკეთესო სურათი მოწყობილობისთვის — დაზოგავს გამტარს ტელეფონებზე და გადასცემს მკრთალ სურათებს მაღალი DPI ეკრანებზე.
srcset ჩამოთვლის კანდიდატ სურათებს მათი შინაგანი სიგრძით (400w = 400px სიგანე).sizes ჩუთხრობს ბრაუზერს, თუ რამდენი სიგანე ექნება სურათს ნაჩვენებ მდგომარეობაში სხვადსხვა შერწყმის წერტილებში (აქ: სრული ხილვის ხაზი 600px-ზე დაბლა, სხვაგვარად რამდენიმე).sizes-ს + მოწყობილობის პიქსელის სიმკვრივეს, რომ აირჩიოს ყველაზე მცირე სურათი, რომელიც მაინც მკრთალი გამოიყურება — ვიდრე რაიმე ჩამოტვირთავს.ტელეფონმა შეიძლება აირჩიოს small.jpg; Retina ლეპტოპმა, რომელიც 50% სიგანეზე აჩვენებს, შეიძლება აირჩიოს large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
ბრაუზერი იყენებს პირველ <source>-ს, რომელიც მხარს უჭერს/ემთხვევა. გამოიყენეთ <picture>, როდესაც გჭირდებათ სხვადსხვა ფორმატი (გადასცეთ AVIF/WebP JPEG უკუსვლით) ან სხვადსხვა ტრიმი თითოეული ეკრანის ზომის მიხედვით (ხელოვნური მიმართულება) — რაც srcset ერთ შეუძლია გააკეთოს.
srcset + sizes.<picture>.მართებული ზომის, თანამედროვე ფორმატის სურათების გადაცემა ვებ-ის ერთ-ერთი უდიდესი პროდუქტიულობის მოსახვევაა — ის დრამატულად ამცირებს მობილური მონაცემების გამოყენებას და აუმჯობესებს უდიდესი შინაარსიანი ფერწევის.
ეს ბუნებრივი ინსტრუმენტები ბრაუზერს აძლევს საშუალებას ავტომატურად გააკეთოს ოპტიმალური არჩევანი, ძველი ბრაუზერებისთვის მოწალე უკუსვლით.