Close Popup
Eng

Hogyan használd a képeket a weboldaladon?

2020.05.25
Hogyan használd a képeket a weboldaladon?

Nem mondunk meglepő dolgot azzal, hogy a vizualitás milyen fontos eleme a mindennapoknak és a weboldalaknak is. A képek a honlapunk megítélésében sokat tudnak segíteni. Ma már nem csak dekorációként szolgálnak, fontos elemei az oldalnak, amik segítenek a felhasználói élmény befolyásolásában.

 

Egy képpel nem kell tartanod a nyelvi korlátoktól, könnyebben elmondhatsz dolgokat és az emberek sokkal gyorsabban feldolgozzák a látott információt. De nem mindegy, hogy milyen képet használsz és hogyan.

Milyen képet használj és hogyan?

A megfelelő fotó kiválasztásakor figyelembe kell venned pár dolgot. Érdemes átgondolni, mit is akarunk pontosan a képpel elérni, és hogyan.

Szempontok, amiket érdemes figyelembe venni első lépésként:

  • A kiválasztott kép megfelelően közvetíti-e az üzenetet, amit kommunikálni akarunk?
  • Illik-e a márkánkhoz/termékünkhöz az adott kép?
  • Mennyire tűnik valóságosnak?

 

A fenti kérdésekből is látszik, hogy érdemes leülni és átgondolni mi is a célunk a képpel, és figyelni arra, hogy illeszkedjen a tervünkhöz, a weboldalhoz és a brandünkhöz. Valamint érdemes figyelni arra is, hogy ne egy túlzottan beállított stock fotó legyen, mert az nagyon visszás érzéseket kelthet a felhasználókban. Senki nem szereti az erőltetett mosolyokat a fotókon.

Mire figyelj a kiválasztáskor és használatkor?

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

Az oldal létrehozásakor figyelembe kell venni, hogy mennyi vizuális tartalomra van szükségünk, és a márkánkhoz mennyire illeszkedne a kép-központú weboldal. A vizuális anyagok mindig nagyon jók, de el is tudják vonni az emberek figyelmét a lényegről. Előfordulhat, hogy egy felhasználó elveszik a sok kép között és más, egyébként lényeges elemet nehéz lesz megtalálnia az oldalon.

Ha csak nem egy olyan brandről van szó, ami design és vizualitás központú, akkor érdemesebb egy kiegyensúlyozottabb megközelítést követni. Érdemes úgy gondolkodni, hogy a képek a szöveges tartalom támogatói. Ennek a logikának a segítségével egy ízléses egyensúlyt lehet teremteni.

Figyeljünk mindig a képek méretére, minőségére és stílusára

Legyen következetes a képhasználatunk. Sokkal jobban fog kinézni a weboldalunk, ha figyelünk arra, hogy a képarányok azonosak, valamint stílusukban, színhasználatukban is megegyeznek. Ez segít abban, hogy egységesebb összhatást nyújtson majd a weboldal egésze.

A másik, amire érdemes figyelni az a minőség. A képeknek, főleg ha termékekről van szó, a lehető legjobb minőségűnek kell lenni, nem csak egy telefonnal fotózott, sötét szobában lőtt fotónak. Egy-egy igénytelen kép riasztóbb lehet bármilyen technikai hibánál az oldalon.

Figyeljünk a reszponzivitásra

Az egyik legfontosabb dolog, amire oda kell figyelnünk ha weboldalról van szó, a reszponzivitás. Nagyon sokan telefonról böngésznek, úgyhogy nem lehet csak a számítógépes felhasználókat előnyben részesíteni. Győződjünk meg arról, hogy a képek, amiket használunk minden kijelzőméreten jól jelennek meg.

Reszponzív oldalaknál gyakori probléma a megfelelő képméret kiválasztása, hiszen minden képernyőn tökéletesen kell mutatnia.

  • Soha ne növeld túl nagyra a képet (lehetőleg ne menj 100% felé)
  • Mindig az eredeti arányokkal jelenítsd meg őket
  • Ne legyenek pixelesek a képek
  • Teszteld őket különböző felbontásokon

 Figyeljünk az oldal teljesítményére is

Sokan elfelejtik, de egy képnek ugyanúgy van file mérete. Ezek a képek minél nagyobbak, és minél több van belőlük, annál inkább hatással lesz a weboldal sebességére, hiszen amikor töltődik a weboldal ezeket a képeket (esetleg videókat) is be kell töltenie. A lassú weboldal pedig minden felhasználó türelmét próbára teszi. Mi első lépésként szeretjük tömöríteni a képeket használat előtt (ehhez egyik kedvencünk a tinypng, de bármilyen program megteszi), majd érdemes optimalizálnod a sebességet is.

Hangold össze a képet a szöveggel

Amikor együtt használunk képet és szövegeket fontos a megfelelő összhangra figyelni. Nem mindegy, hogy hol és mikor használjuk a képeket, hogy mekkorák, hogy a szöveg mögött vannak-e, hogy mozognak-e. A lényeg, hogy legyünk kreatívak, de figyeljünk oda a kettő egyensúlyára.

Használjunk többféle vizuális megoldást

Amikor képekről van szó nem kell rögtön fotókra gondolni. Egy kép lehet illusztráció, egy előre kidolgozott design részlet is. Nem kell mindig fotókra támaszkodni, sokat segíthet, és igazán feldobhatja az oldalt, ha valamilyen kreatív illusztrációt is használunk a weboldalon.

Találd meg az egyensúlyt a minőség és a fájlméret között

A weboldaladhoz jó minőségű, de kis fájlméretű képekre lesz szükséged főleg. Viszont nem szabad, hogy az egyik a másik rovására menjen. Ha túl nagyok a fájlok, lassítják a weboldalt. De ha túlságosan le vannak tömörítve, akkor előfordulhat, hogy romlik a minőség. Figyeljünk arra, hogy a két véglet között megtaláljuk az arany középutat.

Használj képaláírást és alt text-et

Miért fontosak ezek? Legfőképp SEO szempontból. A kép aláírásával tudjuk keresőoptimalizálni őket, valamint a felhasználó szeme is megakad a feliraton, esetleg megnézni alaposabban a képet. Ugyanakkor figyeljünk arra, hogy ott, ahol nincs szükség képaláírásra felesleges erőltetni.

Az alt text-ek pedig a képek szöveges megfelelői, ha a böngésző valamilyen ok miatt nem jeleníti meg a képet. Vagyis tulajdonképpen a kép tartalmát írjuk le vele. Ez SEO szempontból fontos, mivel hasznos információkat adnak a keresőmotornak.

Ne feledkezzünk meg a felhasználási jogokról

Ha nem saját készítésű képeket használunk érdemes figyelni arra, hogy kik a tulajdonosai a képeknek. Nem minden képet használhatunk fel következmények nélkül. Éppen ezért mindig fontos, hogy feltüntessük a képek eredetét, ha azt kérik. Persze a neten rengeteg olyan oldalt találni, amik széles választékban kínálnak felhasználható fotókat – általában előfizetés fejében. Érdemes valahova regisztrálni, így jogtiszta képeket tölthetünk le. Ajánjuk a Pexels-t és az unsplash-t ingyenes, jogtiszta képekért. 

Kérj tőlünk ajánlatot, vedd fel velünk a kapcsolatot vagy keress minket e-mailben: hello@whiteelephant.digital!