Miért kell egy képből több méret?
Jogos a kérdés. A sebesség miatt. Nyilván egy monitorra tervezett 2560px szélességű 600kb méretű fejléckép megjelenítése teljesen fölösleges mobilon, ezért célszerű ebből a fejlécképből például mobilra, tabletre optimalizát verziót csinálni, majd pedig a HTML segítségével megjeleníteni felbontástól függően.
A modernebb CMS rendszerek bizonyos része már meg tudja csinálni a reszponzív méretezést automatikusan, de nem minden esetben tökéletesen. Én sem örülök ennek, hogy egy képből van 3-5 méretű verzió, de a helyzet sajnos nem fog változni még egy jó ideig. Vannak egyébként már friss és modern képformátumok amik lehetővé teszik majd, hogy ne kelljen vágdosni (Pl: WebP) és méretezni de egyelőre még nem támogatottak megfelelően. Így egyelőre nem marad más megoldás, mint a képeket különböző méretekben és felbontással, több változatban és példányban is elkészíteni, és felbontástól függően mindig a megfelelőt alkalmazni.
Nézzük hogyan működik a natív HTML5 reszponzív képhasználat. Itt egy egyszerű példa.
HTML
<picture> <source media="(min-width: 992px)" srcset="images/image-large.png"> <source media="(min-width: 768px)" srcset="images/image-medium.png"> <img src="images/image.png" alt="test image"> </picture>A fenti módszer segítségével, egy adott kép helyén felbontástól függően jelenítünk meg más képeket.
A fenti kódban például 768px felbontás felett az image-medium.png jelenik meg, 992px felbontás felett az image-large.png jelenik meg, minden más felbontásban, illetve fallback esetén, viszont az image.png van jelen. Ha van pár perced és érdekel a reszponzív képszerkesztés, fussuk gyorsan át a kód elemeit:
A picture elem
A picture gyakorlatilag egy konténer elem, ami nem rendelkezik extra tulajdonsággal.
A source elem
A source egy kulcsfontosságú elem, aminek a tulajdonságaival lehet a betöltendő képek paramétereit beállítani. A source az alábbi tulajdonságokkal rendelkezhet:
Az srcset tulajdonság
Ezzel a tulajdonsággal adhatod meg a betöltendő kép útvonalát és opcionális esetben a pixelsűrűségét, amire a fájl utáni szorzó utal. (srcset=”image.png, image@2x.png 2x”)
A media tulajdonság
Itt tudod megadni a média lekérdezéseket, vagyis, hogy milyen felbontásoknál aktiválódjon az adott source elem. (min-width: 768px)
A sizes tulajdonság
Itt a viewport szélessége adható meg (sizes=”100vw”) vagy média lekérdezés vesszővel elválasztva (sizes=”(min-width: 20em,) 50vw”)
Az img elem
Az img elem fallback funkciót lát el, ha a böngésző nem támogatja a picture címkét. Az img elem megadása kötelező és itt adhatod meg a már jól ismert tulajdonságokat is mint az alt, id, class és title.
Nyilván megtörténhet egy projektnél, hogy nem szükséges minden képet csutkára optimalizálni, vagy a projekt büdzséje nem engedi meg a képek optimalizálását. Ebben az esetben mindig nézd meg az adott kép legnagyobb felhasznált méretét. A Firebug használatával egyszerűen lemérheted, ha kijelölöd a képedet, vagy a konténert amibe helyezni fogod. Miután meg van az adott kép legnagyobb megjelenített mérete, szorozd meg 2x-el és a Retina kijelzők is pipálva lesznek.
Ha nagyon nagy méretű képekkel dolgozol és retinára is akarsz optimalizálni abban az estben inkább használd a retina.js-t vagy a fenti picture és srcset/sizes megoldást.
A fentiekből is látszik, hogy több fajta lehetőség van a reszponzív képek optimalizálására és általában a fenti módszerek keverése a legjobb megoldás.
