Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2018-12-120 komment

Mire figyelj a weboldaladnál, ha sok képet használsz rajta?

A képek jól használhatók bármely weboldalon: érzelmeket közvetítenek, felkeltik a figyelmet, gyorsabban feldolgozhatók, mint a szöveg. Ugyanakkor, akad pár tényező, melyre érdemes figyelni, ha nagy lendülettel dobálod be a képeket az oldaladra.

A képekkel ugyanis óvatosan kell bánni, mert nem csak előnyeik vannak, hanem rossz használat esetén károkat okozhatnak a weboldalon. De milyen tényezőkre figyelj?

A teljesítmény

Amikor képekben gondolkodunk, akkor általában úgy gondoljuk, hogy javítani fogják a felhasználói élményt. Pedig a felhasználói élménynek a weboldalsebesség is a része. Márpedig egy képnek mérete van, és minden egyes képpel lassul a weboldal. Tehát hiába használsz lenyűgöző képeket, melyek megfogják a felhasználókat, ha azok meg sem várják, hogy betöltődjenek.

A weboldalsebesség fontosságáról írtunk már egy nagyon részletes anyagot, úgyhogy erre nem térünk ki. A lényeg, hogy ha sok képet használsz, akkor optimalizálnod kell a sebességet, amire a linkelt posztban találsz ötleteket. Ezek közül itt csak néhányat emelünk ki:

CSS sprite használata

Sok kép betöltése rendkívül sok időt és erőforrást vesz igénybe. Sokkal gyorsabb egyetlen kép betöltése, és komponenseinek megjelenítése, mivel csökkenti a szerverlekérések számát. CSS sprite-ok használatával a böngésző csak egy képet tölt be.

Lazy loading

A lényeg itt az, hogy egy kép csak akkor jelenjen meg, ha a felhasználó elér hozzá a böngészőben, ahelyett, hogy az oldal megjelenésére kelljen várnia a be nem töltött képek miatt.

Skeleton screen

Ez az a megoldás, amikor a felhasználók számára még azelőtt megjeleníted a weboldalad skeleton verzióját, hogy a képek betöltésre kerülnének. Ilyenkor már látják, hogy mire számíthatnak, ráadásul adott esetben képek nélkül is interakcióba léphetnek az oldallal.

A kép a design része

Habár ez nyilvánvalónak tűnik, a gyakorlatban mégsem az. A képek a webdesign integráns részét képezik, és eképpen kell is figyelembe venni őket. Mivel a designnak célja van, azért a képeknek ugyanennek a célnak az elérését kell támogatniuk.

Habár a képekre nagyban építő weboldalak általában jobban teljesítenek, ahhoz, hogy ez valóban így történjen, figyelembe kell venni néhány használhatósági elvet. Például a vizuális hierarchiának megfelelően kell elrendezni a képeket, így az elsődleges és a másodlagos elemeknek eltérő súlyt adni.

Hangold össze a képet a szöveggel!

Amikor együtt jelenik meg egy oldalon a kép és a szöveg, akkor azok összhangjára figyelni kell. Meg kell találni a megfelelő egyensúlyt a kettő között. Erre például jó megoldás lehet, ha a képet háttérként – egy overlayt ráhelyezve – jeleníted meg a szöveg mögött. De más megoldások is lehetségesek, például, ha a maga kép tartalmazza a szöveget, ami persze SEO-szempontból nem a legjobb megoldás. Vagy egyéb kreatív megoldásokat alkalmazol a megjelenítésre, ahogy például ezen az oldalon (http://sorrytobotheryou.movie/#cast) is tették a designerek.

A megfelelő layout

A felhasználó élményt nagymértékben meghatározza a weboldal elrendezése. Általában a sok képet tartalmazó oldalak rácsszerkezetet használnak, mivel ez egy problémamentes megoldás, ha a megjelenítésükről van szó. A rácsnak persze több típusa is van.

Alkalmazhatod a klasszikus rácsot, amelyben négyzet alakú képek kapnak helyet. Önmagában harmónia és egyensúly érzetét kelti, és olyankor lehet használni, amikor a képeknek nem feladata, hogy vezessék a látogatót.

Rendezetlenebbé is teheted a rácsot, elszakadva a konvencionális megoldástól. Egy ilyen megoldás segítségével már irányíthatod a felhasználó tekintetét, és kiemelhetsz bizonyos tartalmi részeket.

Képek szabad rácsban

A rácsban szerepelhetnek akár eltérő méretű képek is, miközben az egész továbbra is a rendezettség érzetét kelti. Erre akkor lehet szükség, ha úgy akarsz sok képet megjeleníteni, hogy nem ragaszkodsz egy bizonyos oldalarányhoz.

Adj hozzá mozgást!

A mozgás sokat dobhat egy képekkel teletűzdelt weboldal megjelenésén. De csakúgy, mint a szövegeknél: a mozgásnak és a képeknek összhangba kell kerülniük. A mozgás segíthet például abban, hogy egy képre irányítsa a felhasználó figyelmét, amikor az fölé mozgatja az egérmutatót. Erre olyankor valóban szükség lehet, ha sok a kép az oldalon, így egyik sem emelkedik ki.

De a weboldal lefelé görgetésnél is megoldható, hogy ne csak úgy ott legyenek az oldalon a képek, hanem valamilyen mozgással tűnjenek fel, így még inkább felkeltik a figyelmet. Végül pedig, ha valahol kép helyett tudsz videót is használni, akkor tedd azt!

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.