Melyik HTML-címke segít különböző képek betöltésében különböző képernyőfelbontásokhoz?

HTML-ben különböző képek betöltésére a képernyő felbontásától függően a <picture> címkét használjuk. Ennek belsejében több <source>-t adhatunk meg a media attribútummal, amely meghatározza a kép kiválasztásának feltételeit, valamint az <img> címkét tartalék képpel.

Példa:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Példa kép">
</picture>

Ebben a példában a böngésző a large.jpg-t választja, ha a képernyő szélessége 800px vagy több, medium.jpg-t 400px és 799px között, és small.jpg-t kisebb képernyőkhöz.

Egyszerű esetekben az <img> címkén belül az srcset attribútumot is használhatjuk, különböző képeket és azok méreteit megadva.