Képek a weboldalon: miért, milyet, hogyan?

Másnak is megmutatnád? Oszd meg!

Biztosan te is azt szeretnéd, hogy a weboldalad látogatói érdekesnek és vonzónak találják azt, ennek köszönhetően pedig sok időt eltöltsenek rajta. Az érdeklődés fenntartásához azonban nem csak szöveg, képek is kellenek. Vajon elég, ha ezeknek a képeknek az a funkciója, hogy kitöltsék a teret és dekorálják a weboldalt, vagy ennél sokkal többről van szó?

Miért kellenek képek egy weboldalra?

Ha egy új látogató a honlapodra érkezik, valószínűleg először a képeket fogja végigpásztázni. Miért van ez így? Azért, mert az emberek a képeket preferálják a szöveggel szemben, ugyanis a vizuális információ sokkal gyorsabban és könnyebben befogadható, mint az írott szöveg. Az emberi agy a másodperc törtrésze alatt képes feldolgozni a képeket, míg egy hosszabb szöveg elolvasása és megértése már időt és erőfeszítést igényel. Ráadásul a képek nem kötődnek egyetlen nyelvhez sem, a világon bárki számára érthetőek.

Kutatások szerint az emberek nagyobb része inkább arra emlékszik, amit látott és nem arra, amit olvasott. Azaz az írott információt nem csak feldolgozni, hanem megjegyezni is sokkal nehezebb, mint a vizuálisat.

A megfelelő képekkel tehát pillanatok alatt fel tudod kelteni a látogatók érdeklődését és akár komplex üzeneteket, információkat is át tudsz adni anélkül, hogy hosszabb szövegeket kéne elolvasniuk. Ezen felül egy meghatározott érzés, hangulat felkeltéséhez is használhatod őket. Ha valamilyen érzelmet váltasz ki az olvasóból vagy felidézed egy emlékét, nagyobb elköteleződést válthatsz ki.

Milyen képeket használj a weboldaladon?

A jó kép támogatja a szöveges tartalmat

Olyan képeket válassz, amik kapcsolódnak a szöveghez és valamilyen releváns információt mutatnak vagy a kívánt érzést közvetítik a látogató felé. Mindenképpen legyen meg az oka, hogy miért tetted pont oda pont azt a képet és ez az ok ne az legyen, hogy ki kellett tölteni a helyet.

Segítségképp felsorolunk pár kérdést. Ezekre próbálj meg válaszolni minden egyes kép esetében:

• Segít a látogatónak megérteni a mondanivalómat?
• Hogyan kapcsolódik a kép a márkámhoz? Megszólítja a célközönségemet?
• Hogyan reagálnak majd a látogatók erre a képre? Befolyásolja majd a véleményüket?
• Közvetít-e valamilyen üzenetet a kép? Ha igen, milyen üzenetet?
• Érzelmileg vonzó-e a kép?
• Miért pont oda helyeztem?

Jó, ha minél több képen szerepel ember

Azokat a fotókat valamiért jobban szeretjük, amin emberek is vannak. Ettől úgy érezzük, hogy nem egy weboldallal, hanem más emberekkel kerültünk kapcsolatba. Ezért ha ilyet képeket alkalmazol, az hatékony módja annak, hogy jobban bevond a látogatókat.

Más emberek arca különösen vonzó lehet, ráadásul még követjük is azt, ahová ők néznek. Ezt jól ki lehet használni a weboldalaknál. Figyeld csak meg az alábbi két képet!

Ugye, hogy a második esetben te is nagyobb késztetést érzel arra, hogy kitöltsd az űrlapot?

Saját képekkel jobban jársz, mint stock fotókkal

Ha egy mód van rá, készíts vagy készíttess profi fotóssal képeket magadról, kollégáidról, a termékeidről, a munkakörnyezetedről. Ezzel betekintést engedsz a vállalkozásodba és annak működésébe, ezáltal hitelesebbé válsz a látogatók szemében. Figyelj arra, hogy a fényképek nagyon jó minőségűek legyenek. Ha pixeles, életlen, rosszul megvilágított fotókat használsz, a látogatók a terméked / szolgáltatásod is ilyennek fogják gondolni. Ami viszont szép, az biztosan jó is!

Ha erre nincs lehetőséged, használhatsz stock fotókat. A neten rengeteg oldalt lehet találni, ahonnan jogtiszta fényképeket lehet letölteni, akár ingyen is. Ezek a képek általában nagyon jó minőségűek, de mivel bárki használhatja őket, gyakorlatilag bárhol feltűnhetnek és biztosan nem lesz egyedi a weboldalad megjelenése. Arra is próbálj meg ügyelni, hogy a kiválogatottak ugyanolyan hangulatúak és stílusúak legyenek.

Fotókon kívül mást is használhatsz

Nem csak fényképeket használhatsz, hanem infografikákat is. Ezek olyan ábrák, amelyek az információt grafikus formában jelenítik meg, minimális szöveggel kiegészítve. Ezek segítségével az információk sokkal könnyebben feldolgozhatók és megérthetők. Ha például adatokat, statisztikákat akarsz bemutatni vagy fogalmakat akarsz elmagyarázni, jó választás lehet ilyen módon bemutatni őket.

Hogyan készítsd elő és töltsd fel a képeket a weboldaladra?

Képek előkészítése

A kiválasztott fotókkal még sok dolgod van, mielőtt feltöltenéd őket. Először is optimalizálni kell őket, hogy ne lassítsák a weboldal betöltődését. Ennek a lépéseit vesszük most sorra:

1. vágás > 2. átméretezés (pixelszám csökkentése) > 3. mentés a megfelelő fájlformátumban > 4. tömörítés (fájlméret csökkentése) > 5. fájl elnevezése

1. Ha a képen olyan részletek is vannak, melyeknek nem szükséges megjelenniük, vagy esetleg zavaróak lennének, célszerű levágni őket.
2. Miután ez kész, át kell méretezni, azaz csökkenteni kell a pixelszámot. A fényképezőgépből vagy a telefonból kinyert fotók akár több ezer px kiterjedésűek is lehetnek, de a weboldalakon nem feltétlenül van szükség ilyen nagy méretre. A megfelelő méret mindig attól függ, hogy hova kerül a kép. Fontos, hogy a folyamat csak egy irányba működik! Nagyobb képből lehet kisebb képet csinálni, de fordítva nem, mert rossz minőségű lesz! (Azaz ha neked egy 1000px széles képre lenne szükséged, de a fotód csak 650px széles, az nem fog működni. Keresned kell egy másik képet.)
3. Ezután le kell mentened a képet, mégpedig a megfelelő fájlformátumban. Fotók esetében ez általában jpeg/jpg, de ha átlátszó részek is vannak a képen, akkor png.
4. A fájlt ezután tömöríteni kell, aminek az a célja, hogy tovább csökkenjen a mérete. Erre többféle online eszköz is elérhető. Mi a TinyPNG-t használjuk.
5. Végül a tömörített fájlt megfelelően el kell nevezni. Ez azt jelenti, hogy a neve legyen beszédes, utaljon arra, ami a képen van. Ha több szóból áll, akkor kötőjelekkel tudod elválasztani az egyes szavakat. Ne használj ékezetes betűket vagy speciális karaktereket.

Az egyes lépések kivitelezéséről részletesen tudsz olvasni egy korábbi cikkünkben.

Feltöltéskor beállítandó egyéb adatok

Az így előkészített képeket már feltöltheted a weboldaladra. Ezután a Médiatárban az egyes képeket megnyitva több adatot is célszerű még megadnod:

• Helyettesítő szöveg: Ide akár több mondatban is leírhatod, hogy mit ábrázol a kép és hogyan kapcsolódik például a bejegyzéshez. Ezt a szöveget csak az látja, akinél a kép valamiért nem töltődik be vagy képernyőolvasó programot használ.
• Cím: Megadása a Médiatárban való későbbi keresést könnyíti meg.
• Felirat: Az alkalmazott sablontól függ, hogy megjelenik-e a kép alatt. Érdemes kitölteni, mert sokan elolvassák.
• Leírás: Szintén az alkalmazott sablontól függ, hogy megjelenik-e a weboldalon. További információkat írhatsz ide a képpel kapcsolatban – például a készítője nevét.

Ezekről a beállítási lehetőségekről is olvashatsz egy korábbi cikkünkben, ha jobban el szeretnél mélyedni bennük.

A jól kiválasztott képekkel a felhasználói élményt javítod

Reméljük, most már te is látod, hogy a képek erőteljes kommunikációs eszközök, ezért érdemes gondosan megválogatni őket. Ha egyszerre szemet gyönyörködtetőek és információs források, azt biztosan értékelni fogja a közönséged is. Az előkészítés és a feltöltés utáni beállítások elvégzése pedig nem ördöngösség, gyakorlással gyorsan bele lehet tanulni.

Ha velünk készítteted weboldalad, az oda szánt képeidet gondosan kiválogatjuk és előkészítjük, te pedig egy részletes útmutatót kapsz, hogy a későbbiekben egyedül is boldogulj.

A borítókép fotói a Gratisography-ról származnak.

Másnak is megmutatnád? Oszd meg!