Mi az a Srcset?
A Srcset egy olyan HTML képattribútum, amely egy listát ad meg a képekből, amelyek közül a böngésző a képernyő mérete és felbontása alapján választhat. Ezt a koncepciót reszponzív képekként ismerjük, amely biztosítja, hogy a különböző megtekintési körülményekhez a legmegfelelőbb képváltozat töltődik be.
Íme egy példa az srcset működésére:
<img srcset="example-image-480w.jpg 480w, example-image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="example-image-800w.jpg" alt="Illusztrációs példa">Ebben a példában az srcset azt mondja a böngészőnek, hogy egy 480 pixel széles képet töltsön be, ha a nézetablak szélessége kisebb, mint 600 pixel. Ha a nézetablak szélessége több mint 600 pixel, a böngésző a nagyobb, 800 pixel széles képet tölti be.
Alternatívaként a méret helyett a pixelsűrűséget is megadhatja feltételként:
<img srcset="példakép-1x.jpg 1x, példakép-2x.jpg 2x" src="példakép-1x.jpg" alt="Egy másik illusztrációs példa">Miért fontos a Srcset a SEO szempontjából?
A Srcset kulcsfontosságú a SEO szempontjából, mivel lehetővé teszi a böngészők számára, hogy az eszköz jellemzői alapján a legmegfelelőbb képméretet töltsék be. Ennek az optimalizálásnak számos előnye van:
- Javított betöltési sebesség: A nagyobb képek nagyobb fájlmérettel rendelkeznek, ami lelassíthatja az oldal betöltési idejét. Az srcset a különböző eszközöknek megfelelő méretű képek betöltésével segít a sávszélesség megtakarításában és az oldal betöltési idejének csökkentésében.
- Jobb felhasználói élmény: A gyorsabb oldalbetöltési idők javítják a felhasználói élményt, ami alacsonyabb visszalépési arányt és nagyobb elkötelezettséget eredményez.
- SEO-előnyök: Az oldal betöltési sebessége közvetlen rangsorolási tényező mind a mobil, mind az asztali keresések esetében. A képek srcset használatával történő optimalizálása pozitívan befolyásolhatja a keresőmotorok rangsorolását.
Legjobb gyakorlatok a reszponzív képekhez
1. Ellenőrizze a PageSpeed Insights ajánlásait
APageSpeed Insights a Google ingyenes eszköze, amely javaslatokat tesz a webhely sebességének optimalizálására. A weboldal URL-címének megadásával konkrét ajánlásokat kaphat a képoptimalizáláshoz, például:
- A képformátum frissítése a jobb tömörítés érdekében.
- A képernyőn kívüli vagy rejtett képek lusta betöltésének megfontolása.
- A képek megfelelő méretezése a betöltési idők javítása érdekében.
2. A képelem használata művészeti irányításhoz
A <picture> elem lehetővé teszi a böngészők számára, hogy az eszköz jellemzői alapján különböző képeket jelenítsenek meg. Ez akkor hasznos, ha teljesen különböző képeket szeretne megjeleníteni, nem pedig csak ugyanannak a képnek különböző méreteit.
Íme egy példa a <picture> elem használatára:
<picture> <source media="(min-width: 600px)" srcset="példakép.jpg, példakép-2x.jpg 2x"> <img src="példakép.jpg" alt="Példaillusztráció"> </picture>Ebben a példában a example-image.jpg vagy a example-image-2x.jpg a 600px vagy annál nagyobb szélességű böngészőkben jelenik meg, az eszköz pixelsűrűségétől függően. A 600px-nél kisebb képernyőszélesség esetén, vagy ha a <picture> elem nem támogatott, a <img> elem jelenik meg helyette. A kompatibilitás biztosítása érdekében mindig tartalmazza a <img> elemet.
3. Megfelelő visszaesés biztosítása
Mindig adjon meg egy tartalék képet az src attribútummal arra az esetre, ha a böngésző nem támogatja a srcset vagy a <picture> elemet. Ez biztosítja, hogy a böngésző képességeitől függetlenül mindig megjelenik egy kép.
4. Használjon leíró Alt szöveget
Mindig adjon meg leíró alt szöveget a képekhez. Ez javítja a hozzáférhetőséget, és kontextust biztosít a keresőmotorok számára, javítva ezzel a SEO-t.
Következtetés
Az srcset használata elengedhetetlen a képek különböző eszközökre való optimalizálásához, ami gyorsabb betöltési időt és jobb felhasználói élményt biztosít. A legjobb gyakorlatok követésével javíthatja webhelye teljesítményét és SEO-ját, hatékonyabbá és elérhetőbbé téve azt a felhasználók számára.
