Reszponzív webdesign, Front-end, Segédletek

Reszponzív design: Reszponzív kép készítési metódusok


A reszponzív weblapkészítés talán legproblémásabb része a reszponzív képek kezelése. Ha gyors, up to date és a Google által is kedvelt reszponzív weblapot szeretnél, akkor bizony szenvedned kell a képek méretezésével, sőt egy képből akár 3-5 vagy több méretű verziót is le kell gyártanod.

Reszponzív design: Reszponzív kép készítési metódusok
Reszponzív webdesign
Front-end
Segédletek
Author: Szabolcs Bakos

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.


Bakos Szabolcs, UI/UX Designer

Kövess Facebookon a friss bejegyzésekért

Bakos Szabolcsnak hívnak, szabadúszó UI/UX Designer vagyok, több mint 17 év webdesign tapasztalattal a hátam mögött, cégek és vállalatok számára tervezek weblapokat.



Vedd fel velem a kapcsolatot!

Amennyiben kérdésed van, legyen az egyszerű információkérés, együttműködés, vagy üzleti megkeresés, örömmel állok a rendelkezésedre.

UI/UX Design
Facebook Twitter Google+ Linkedin
Web Design