რომელი HTML ტეგი ეხმარება სხვადასხვა ეკრანის განზომილებისთვის სხვადასხვა სურათების ჩატვირთვას?

HTML-ში გამოიყენება <picture> ტეგი სხვადასხვა სურათების ჩატვირთვისთვის ეკრანის განზომილებაზე დამოკიდებულად. მასში შეიძლება მითითებული იყოს რამდენიმე <source> ატრიბუტით media, რომელიც განსაზღვრავს პირობებს სურათის არჩევისთვის, და <img> ტეგი სათადარიგო სურათით.

მაგალითი:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="სურათის მაგალითი">
</picture>

ამ მაგალითში, ბრაუზერი აირჩევს large.jpg, თუ ეკრანის სიგანე 800px ან მეტი იქნება, medium.jpg -ს 400px-დან 799px-მდე, და small.jpg -ს მცირე ეკრანებისთვის.

ასევე, მარტივ შემთხვევებში, შეიძლება გამოიყენოთ srcset ატრიბუტი <img> ტეგზე, სადაც მითითებულია სხვადასხვა სურათები მათი ზომებით.