Keresés
Header Háttér

Webshark Blog

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

2017-08-220 komment

Hogyan használd a képeket a weboldaladon?

A képek a weboldalon többet jelentenek egyszerű dekorációnál, helykitöltő elemnél, mert képesek a felhasználói élmény befolyásolására.

Képekkel olykor sokkal könnyebben közölhetünk valamit, mint szavakkal. Egy egyszerű kép is többet tud mondani, mint egy bekezdésnyi szöveg. A képeknél nem számítanak a nyelvi korlátok. Ráadásul az emberek sokkal gyorsabban dolgozzák a képi információkat. A képekkel könnyedén felkeltheted a látogatók figyelmét a weboldaladon, és segítségükkel megkülönböztetheted a termékeidet. Nem mindegy azonban, hogy milyen képeket használsz és hogyan.

Nem minden weboldalnak van szüksége kép-központú designra

Nyilván komoly értéke van annak, ha a felhasználók figyelmét fel tudod kelteni néhány esztétikus képpel, ugyanakkor ez azzal jár, hogy más elemeket nehezebb lesz megtalálni és használni az oldalon. Ha túl nagy figyelem irányul a képekre, akkor az eltérítheti a felhasználót a tartalmad befogadásától. Ilyenkor csak a képre figyel, és nem veszi észre a call to actiont, mely a weboldal lényegét jelenti.

Habár egy kép-központú design adott esetben indokolt is lehet, a legtöbb weboldalnál inkább egy kiegyensúlyozott megközelítést érdemes követni. A képeknek, melyeket a felhasználói felületen alkalmazol, a terméket vagy szolgáltatásokat kell támogatnia. De semmiképpen sem szabad túlragyognia és elhomályosítania fontos tartalmakat vagy funkciókat.

Legyen célja és megfelelő mondanivalója a képeknek!

Sok weboldalon csak azért szerepelnek képek, hogy kitöltsék a helyet, és rosszabb esetben még össze is zavarják a látogatókat. A képek azért vannak, hogy vagy egy történetet mesélj el velük, vagy leegyszerűsítsd a mondanivalód. Úgyhogy ne erőltesd bele a képeket a tartalmaidba

Minden képben van egy történet, amit elmesél a látogatóknak. Csakúgy, mint az írott szövegnél, jó ha tudod már az indulás előtt, hogy mit akarsz elmondani vele. A képekkel inspirálhatod és elkötelezheted a közönségedet, de nem minden kép javítja a felhasználói élményt.

A usability tesztek azt mutatják, hogy a pusztán dekorációs céllal felhasznált képek ritkán adnak értéket a designhoz. Inkább csak rontják, mint javítják a felhasználói élményt. Az emberek általában átsiklanak rajtuk, vagy rosszabb esetben frusztrálja őket a látvány.

A legveszélyesebb dolog minden design esetében, amikor a képek rossz üzenetet közvetítenek. Ezért mindig meg kell győződnöd arról, hogy a képek illeszkednek az írott tartalomhoz. Olyan képeket kell választanod a weboldaladra, melyek szoros kapcsolatban állnak a termékeddel és illeszkednek a kontextusba is.

A képek nem teremthetnek vizuális zajt!

A képek esetén nem igaz az az elv, hogy a több jobb. Már ha a weboldaladnak nem kifejezetten az a célja, hogy képeket mutass be rajta. A képeid valószínűleg azt a célt szolgálják, hogy a termékeid, szolgáltatásaid megismertesd a látogatókkal. Ehhez viszont elegendő néhány kép, nem kell túl sok. Azok viszont olyanok legyenek, hogy valóban megragadják a látogatók figyelmét.

Mindig, amikor egy képet teszel a weboldaladra, tedd fel magadnak a kérdést, hogy az adott kép illik-e a weboldalad esztétikájához. Tehát például, ha a weboldalad elegáns, kifinomult, nagy whitespace-eket használsz, akkor a képid is legyenek nagyok, melyek a teljes kijelzőt elfoglalják.

Figyelj a reszponzivitásra!

Győződj meg arról, hogy a képek, amiket a weboldaladon használsz, minden kijelzőméreten jól jelennek meg. Teszteld őket különféle felbontásoknál, képarányoknál és eszközön!

  • A képek soha nem tűnhetnek pixelesnek!
  • Soha ne növeld őket 100%-nál nagyobbra!
  • Mindig az eredeti arányokkal jelenítsd meg őket!

Reszponzív weboldalaknál gyakori probléma a megfelelő képméret kiválasztása, mely a legjobban illeszkedik minden eszköz kijelzőjéhez. Egyetlen kép néha nem elegendő ahhoz, hogy minden képernyőfelbontást és eszközt kiszolgáljon.

De hogyan válaszd ki az optimális reszponzív képméretet? Akadnak olyan online eszközök is a neten, melyek segítségével különféle képméreteket tudsz kezelni. Ilyen például a Cloudinary, mely képes arra, hogy reszponzív töréspontokat hozz létre a segítségével. Ez az eszköz egy fejlett algoritmust használ, így könnyen meghatározza a megfelelő töréspontokat minden feltöltött kép esetében. A képeket elemzi, hogy megtalálja ezeket, majd mindegyik felbontásra készít egy képet.

Ha lehet, eredeti képeket használj!

Ha eredeti képet használsz a weboldaladon, akkor javul a felhasználói élmény, és növeled az esélyét annak, hogy a keresésekre jobb helyezést érj el. Az eredeti képekre az emberek jobban felfigyelnek, mint a stockfotókra. Habár stockfotókat is használhatsz jól a weboldaladon, az kétségtelen, hogy SEO szempontból az utóbbi nem optimális választás, és nem ugyanazt a hatást éred el velük. Az emberek tucatnyi vagy akár több száz oldalon is találkozhatnak ugyanazzal a képpel, mint amit Te használsz.

Ne feledkezz meg a felhasználási jogokról!

Amikor képeket keresel a neten, azt mindig vedd figyelembe, hogy azoknak jogtulajdonosaik vannak. Ha csak nem adnak kifejezett engedélyt a képek használatára – illetve jelzik a használat korlátait -, nem használhatod fel a képeiket következmények nélkül.

A weben egyébként számtalan olyan oldalt találsz, ahol szabadon felhasználható képeket kínálnak. Nyilván a választék nem olyan széles, mint ha a teljes webes képi tartalomból válogatnál, de legalább legális.

Többféle vizuális megoldást használj!

Az illusztrációknak és a fotóknak is helye van egy-egy termék weboldalán. Egy fotó ideális eszköz specifikus dolgok vagy történetek bemutatására. Tehát amikor nem valamilyen autót kell mutatnunk, hanem egy adott autót.

Az illusztrációk viszont kiválóak arra, hogy általános dolgokat fejezzenek ki, melyeknél egy fotó esetleg elidegenítően hathat. Ezek tehát akkor segítik a megértést, amikor nincs szükség valaminek az egzakt megjelenítésére.

Legyen egy fókuszpontod!

A képek olyan vizuális kommunikációs eszközt adnak a kezedbe, mellyel közvetítheted az üzeneteidet. Egyértelmű fókusz segítségével könnyen és gyorsan közölheted a gondolataidat, míg homályos fókusszal a kép jelentés nélkülivé válik.

Amikor fókuszról beszélünk, egyszerűen arról van szó, hogy egy bizonyos dologra irányul a figyelem a fotón. Ez a dolog kerül a kép középpontjába, így tisztán érthetővé és befogadhatóvá válik az üzenet. El kell kerülnöd azt a hibát, hogy az embereknek találgatniuk kelljen a kép jelentését!

katicabogar

Mutass valódi embereket!

Az emberekről készült képek nagyon hatékonyak, amikor a felhasználóidat kell elkötelezned. Amikor emberi arcokat vagy egyszerűen embereket látunk, akkor azt érezzük, mintha kapcsolatba lépnénk a céggel. Ugyanakkor nagyon sok cég használ túl sok őszintétlen, hamis fotót, melyekkel bizalmat akarnak építeni. Ilyen tipikusan sok stockfotó, a nem igazán őszintén mosolygó emberekkel, melyek valami furcsa idillt sugallnak.

Érdemes olyan, jó minőségű, emberekről készült képeket használni, melyek illeszkednek a weboldalad karakteréhez. A képeknek hiteles tájékoztatást kell nyújtaniuk a termékedről vagy szolgáltatásodról, a cégedről, az értékeidről. Ha például van egy terméked, akkor olyan fotókat mutass be, melyen az emberek a termékedet használják.

Javítsd velük a webáruházad designját!

A termékeket sokszor a képek adják el. Az emberek nagymértékben támaszkodnak a képekre, amikor ismerkednek egy termékkel, és fontolgatják annak megvásárlását. Ezért a webáruházak legfontosabb elemét a termékekről készült képek jelentik. Minél vonzóbb az emberek számára a terméked megjelenése, annál bátrabban vágnak bele a megvásárlásába. Ami persze neked jobb konverziós arányokat hoz.

A termékképeknek ezért szépnek kell lenniük. Egy jó kép elvégzi a munkát: felkelti a felhasználó figyelmét, és megkülönbözteti a terméked a többitől. Ugyanakkor az ilyen képek elkészítése munkaigényes feladat.

Ami még fontos, hogy az elsődleges képed a hajtás felett jelenjen meg. Ne kelljen az embereknek görgetniük azért, hogy lássanak egy képet a termékről. Lényeges még, hogy a kép nagy legyen, olyan nagy, amekkora csak lehetséges. Ha pedig már elérted a maximális méretet, lehetővé kell tenned, hogy az emberek rázoomolhassanak az őket érdeklő részletekre. Ez különösen fontos például ruházati termékeknél, ahol sokat számítanak a részletek. Természetesen a zoomolt részleteknek is kiváló minőségűnek kell lenniük.

Fejezd ki a képekkel a személyiséged, és válts ki velük érzelmeket!

A képeknek meg kell ragadniuk a termék vagy szolgáltatás lényegét, ugyanakkor meg is kell lepniük és gyönyörködtetniük kell az embereket. A fotók képesek arra, hogy legalább annyira szórakoztassanak, mint amilyen mértékben informálnak.

Ha már van egy kielégítő felhasználói élményed, akkor a jó képekkel érzelmi kapcsolatot alakíthatsz ki a felhasználóiddal. Az érzelmileg erőteljes képek biztosítják azt, hogy az emberek mélyebben is érdeklődjenek majd a weboldalad iránt.

Gondold át, milyen fájltípust használj!

Mindig legyél tisztában azzal, hogy milyen képfájl-típust használsz! Általában a JPEG kínálja a legjobb megoldást, amikor jó minőségű, de kis méretű képekre van szükséged. Utóbbi főleg a weboldalsebesség miatt fontos. A JPEG-képek jellemzően olyan fotók, melyeken sok szín, , árnyalat, árnyék található. A fotókat tudod hatékonyan tömöríteni JPEG-gel, ugyanakkor tény, hogy a tömörítés minőségromlással jár, hiszen az adatok egy része elveszik. Emellett átlátszó hátteret sem használhatsz, mint például a PNG-nél.

A PNG-t általában akkor szerencsés használni, amikor a képeden kevés a szín, az árnyalat. Tipikusan ilyenek a logók, illetve a különböző grafikák, illusztrációk. Ebben az esetben sokkal jobb minőség érhető el PNG-vel, mint JPG-vel, miközben a méret is kisebb lehet.

Tömörítsd a képeidet!

A weboldalaknál a legnagyobb mértékben a képek a felelősek a lassú betöltődésért. Ha gyorsítani kell a weboldaladat, akkor mindig az első legyen, hogy a képek fájlméretét csökkented! A weben találsz olyan online eszközöket, melyek viszonylag veszteségmentes módon képesek tömöríteni a képfájljaidat.

Figyelj arra, hogy a felhasznált kép kiterjedése ne legyen nagyobb, mint az éppen szükséges szélesség, mert ezáltal feleslegesen lassítja az oldalad! Ezért a fájltípuson és a tömörítés mértékén kívül mindig vágd meg a képed a megfelelő szélességre és magasságra.

Használj képaláírást és alt taget!

A képek szöveges információkkal való kiegészítése révén tudod keresőoptimalizálni őket. Ez persze elsősorban az eredeti képeknél fontos, nem a stockfotóknál. Egy képaláírás az embereknek is segíthet a kép jobb megértésében, nagyobb eséllyel olvassák el a képaláírást, mint a kenyérszövegedet. Ugyanakkor persze az is igaz, hogy felesleges erőltetni a képaláírásokat ott, ahol nincs szükség rájuk.

Az alt tagek a képek szöveges megfelelői, ha a böngésző nem jeleníti meg a képet. Az alt tag lényege, hogy leírja a kép tartalmát. SEO-szempontból fontos, mivel hasznos információkat ad a keresőmotoroknak, melyek ezeket az információkat is felhasználják, amikor képeket kell megjeleníteniük az egyes keresésekre.

A képhez kapcsolódó szövegek közé tartozik még a megfelelő fájlnév is, hiszen ez is szöveges információ. SEO szempontból természetesen a kulcsszavakat magukba foglaló képek jelentik az optimális választást. Az eredeti fájlneveket gyakran át kell forgalmaznod oly módon, hogy az a lehető legjobban leírja azt, ami a képen látható. Ez segít a keresőmotoroknak megérteni a képeidet. Ugyanakkor persze fájlnevekről van szó, tehát túl hosszúra ne nyúljanak.

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.