A weboldalak automatikusan kiválasztják és betöltsék a megfelelő méretű képeket a különböző eszközök és kijelzőméretek szerint. A cél az, hogy a felhasználóknak optimális képminőséget és méretet biztosítsunk, csökkentve a betöltési időt és a felesleges adatforgalmat.
Ehhez általában a HTML5 <picture> elemet és a <source> elemeket használják, valamint a srcset és a sizes attribútumokat, amelyek lehetővé teszik a böngésző számára, hogy dinamikusan válassza ki a legmegfelelőbb képet a rendelkezésre álló lehetőségek közül.
srcset
segítségével megadhatjuk egy kép többféle felbontását
<picture> <source>
segítségével akár különböző képeket is betölthetünk dark, illetve light mód esetén. Vagy más tájolású képet használhatunk mobilon és asztali gépen.
Increased Performance
<img
alt="A baby smiling with a yellow headband."
src="baby-lowres.jpg"
srcset="
baby-high-1.jpg 1.5x,
baby-high-2.jpg 2x,
baby-high-3.jpg 3x,
baby-high-4.jpg 4x,
baby-high-5.jpg 100x
"
>
<img
alt="A baby smiling with a yellow headband."
srcset="
baby-s.jpg 300w,
baby-m.jpg 600w,
baby-l.jpg 1200w,
baby-xl.jpg 2000w
"
sizes="70vmin"
>
Design Control
<picture>
<source srcset="" media="">
<source srcset="" media="">
<img src="" alt="">
</picture>