Az HTML reszponzív képek olyan képek, amelyek megfelelően méreteződnek a képernyő méretéhez. Így biztosíthatjuk, hogy a képek megfelelően jelenjenek meg a különböző eszközökön.
Az HTML reszponzív képek létrehozásához az img elemet használjuk. Az img elemhez hozzáadhatjuk a src attribútumot, amely megadja a kép útvonalát, valamint a srcset attribútumot, amely több különböző méretű kép útvonalát adhatja meg. Például:
<img src="image.jpg" srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w" alt="Kép leírása">
Ebben az esetben az img elem megadja a kép útvonalát, valamint három különböző méretű kép útvonalát is. A srcset attribútumban megadott szélességek megadják, hogy milyen képernyőméretnél milyen képet használjunk.
Az HTML reszponzív képek létrehozásakor fontos megjegyezni, hogy a képek ne legyenek túl nagyok, mert ez lassíthatja az oldal betöltési sebességét. Így érdemes olyan képeket használni, amelyeknek a mérete megfelelő az adott képernyőméretnek.
Az HTML reszponzív képek létrehozásához további attribútumokat is használhatunk, például a sizes attribútumot, amely megadja, hogy milyen méretű képet használjunk adott képernyőméretnél. Például:
<img src="image.jpg" srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w" sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px" alt="Kép leírása">
Ebben az esetben az img elem megadja a kép útvonalát, valamint három különböző méretű kép útvonalát is. A sizes attribútumban megadott értékek megadják, hogy milyen képet használjunk adott képernyőméretnél.
Az HTML reszponzív képek létrehozásával biztosíthatjuk, hogy a képek megfelelően jelenjenek meg a különböző eszközökön, és ne legyenek túl nagyok, ami lassíthatja az oldal betöltési sebességét.
Más lehetőségek is léteznek az HTML reszponzív képek létrehozására, például a picture elem használata. A picture elem több source elemet tartalmaz, amelyek különböző méretű képeket adhatnak meg, és egy img elemet, amely a kép útvonalát adja meg. Például:
<picture>
<source srcset="image-small.jpg" media="(max-width: 400px)">
<source srcset="image-medium.jpg" media="(max-width: 800px)">
<source srcset="image-large.jpg">
<img src="image.jpg" alt="Kép leírása">
</picture>
Ebben az esetben a picture elem három különböző méretű képet ad meg, és a img elem a kép útvonalát. A source elemekben megadott értékek megadják, hogy milyen képet használjunk adott képernyőméretnél.