Bejegyzésünkben a weboldal fontos vizuális elemeit járjuk körbe. Megnézzük, hogy milyen szempontokra érdemes odafigyelni a honlap fotóinak és illusztrációinak kiválasztása során, hogy azok a célközönséget megszólító dizájn funkción túl webre is alkalmasak legyenek.

A fotók, illusztrációk, grafikák, de akár a hátterek, mintázatok és textúrák mind-mind nagyon lényeges “alapanyagok” a weboldal számára. Ezek az elemek a vállalkozáshoz/márkához szorosan kapcsolódva segítenek szemléltetni, prezentálni, megjeleníteni az adott témát, tartalmat, megerősítik az oldal mondanivalóját, informatív célt is betöltenek, továbbá stílusossá, dizájnossá, hangulatossá teszik a honlapot.

A fő cél mindig az, hogy a vizuális tartalmak képesek legyenek megragadni a weboldalra érkező látogatók figyelmét, üzeneteket közvetítsenek feléjük, hatást gyakoroljanak rájuk, érzelmeket váltsanak ki és motiválják, befolyásolják őket döntéseik meghozatalában.

A weboldalak szerves részét képezik a fotók, az illusztrációk, a grafikák és a mintázatok, olyan elemek, melyeken akár egy márka/vállalkozás sikeressége is múlhat, hiszen igaz a “mondás”: “egy kép többet mond ezer szónál”. Ahogyan honlap színei és betűi esetében is a tudatos és körültekintő választás a siker kulcs, úgy a weboldal számára kidolgozott fotók, illusztrációk esetében is pontosan vezet eredményre. : )

Egy weboldalon számos helyen és módon jutnak szerephez a fotók, illusztrációk. Téma- és honlapfüggő, de általánosságban elmondhatjuk, hogy például az oldalt alkotó blokkok háttereként, szöveges tartalmak közelében illusztrációként, termékek/szolgáltatások bemutatásához, referenciamunkák felsorakoztatásához, személyes történetekhez, blogbejegyzésekhez, cikkekhez használunk fotókat a weboldalon.

Mit érdemes leginkább figyelembe venni a weboldal fotóinak, illusztrációinak kiválasztása során?

# Legyenek célközönségre szabottak!

A weboldalon elhelyezett képek és illusztrációk segítségével üzeneteket közvetíthetünk a célközönségünk és az oldalra érkező látogatók felé. Ha a látogató úgy érzi, hogy “wow”, még a fotók, illusztrációk is neki szólnak, róla/a “problémájáról” szólnak, őt szólítják meg, akkor ezek a vizuális elemek célba találnak és 100%-osan betöltik a nekik rendelt funkciókat – az üzenetünk világos és azonnal értelmezhető a látogató számára, érzelmi hatást gyakorolnak rá, cselekvésre és az adott konverzió (pl. termékek megrendelésére, szolgáltatások igénybevételére) végrehajtására ösztönzik őket.

# Legyenek a márkához/vállalkozáshoz kapcsolódók!

Lényeges szempont, hogy csak olyan fotókat helyezzünk el a honlapon, amelyek megfelelően tükrözik és kifejezik a márkánk/vállalkozásunk tevékenységét. Ne alkalmazzunk olyan képeket, amely nem a márkához/vállalkozás témájához, tevékenységéhez kapcsolódnak.

# Legyenek valósághűek!

Nagyon fontos, hogy a weboldalon elhelyezett fotók valósághűek legyenek, ne az elcsépelt, “beállított” fotókkal dolgozzunk, hiszen a stock fotók sok esetben eltérnek a valóságtól. Az oldalra érkező látogató számára pedig akkor lesz igazán hiteles a márkánk, a vállalkozásunk és a weboldalunk, ha valóban profi, saját, ránk és egyben a célközönségünkre szabott fotókkal dolgozunk.

# Legyen mondanivalójuk, kapcsolódjanak a weboldal témájához!

Ne csak azért helyezzünk el képeket a honlapon, hogy kitöltsék a “felesleges” helyeket, hiszen ebben az esetben ezek a tartalmak könnyen összezavarhatják, félrevezethetik az érdeklődőket. A fotók legfőbb célja, hogy a vállalkozást/márkát képviselve szemléltessék, prezentálják az adott témát, megerősítsék az információk, a szöveges tartalmak mondanivalóját, elmeséljenek egy történetet, valamint, hogy stílusossá, dizájnossá tegyék a weboldalt.

# Legyenek “visszafogottak”!

Fontos, hogy az oldalra érkező látogatók figyelmét felkeltsük a fotókkal, azonban ezek a tartalmak ne menjenek a többi tartalom rovására. Ha a látogatók figyelme csak a képekre irányul, nagy eséllyel nem veszi észre a weboldal többi tartalmát – például az akciógombokat, ösztönző elemeket, leírásokat és egyéb hasznos tartalmakat.

Ahogyan már az előzőekben is kitértünk rá, a honlapokon sok esetben az oldalakat alkotó blokkok, sávok, “dobozok” háttereként találkozunk a fotókkal, melyekre gyakran kerülnek feliratok, gombok. Minden esetben úgy használjuk együttesen ezeket a tartalmakat, úgy feliratozzuk a fotókat, hogy a kép részei megfelelően kirajzolódhassanak, a szöveg pedig jól olvasható maradjon.

# Legyen meg az összhang!

A weboldal vizuális elemeinek – színeknek, betűtípusoknak, fotóknak, mintázatoknak, textúráknak – teljes összhangban kell lenniük mind egymással, mind az adott vállalkozás arculatával, az adott weboldal dizájnjával. Ezt leginkább az egységes színvilággal és stílussal, a következetes “összeválogatással” érhetjük el.

Az egységes összkép érdekében a fotókra az adott dizájnhoz, stílushoz passzoló “effektet” húzhatunk, ún. Photoshop akciók segítségével egységesíthetjük őket.

# Legyenek jó minőségűek!

Alapkövetelmény a kiváló minőség. A weboldalon nem helyezhetünk el torz, szemcsés, pixeles képeket és grafikákat, alacsony felbontású fotókat. Ha nem fotós készít profi fotókat a honlapra, akkor online képügynökségektől, fotóletöltő felületekről tudunk jó minőségű, sokféle téma számára megfelelő fotókat letölteni, ingyenes és fizetős verzióban egyaránt.

A fotókon kívül gyakran kerülnek az oldalakra illusztrációk, grafikák, vektoros rajzok – magyarázó, szemléltető funkciót betöltő grafikai elemekként, de gondolhatunk például a beszédes ikonokra és a kreatív illusztratív webdesignra. Ezek a vizuális alapanyagok is mindig legyenek kéznél, a grafikákat is számos lelőhelyről beszerezhetjük.

# Legyenek webre optimalizáltak!

Ha “nagy” fotókat, illusztrációkat helyezünk el az oldalon, az jelentősen lassíthatja a honlap betöltődését és hatékony működését – és ezt bizony a Google sem díjazza. A megfelelő minőség mellett nagy gondot kell arra fordítanunk, hogy a webre/weboldalra szánt fotók optimalizáltak legyenek – ez leginkább a fotó felbontásában és fájlméretében mutatkozik meg. A nagy felbontás mindig nagyobb fájlméretet is eredményez. Online felületekre elegendő a 72 ppi/dpi* felbontás (maximum 120 ppi/dpi), fájlméret tekintetében a kb. 100-150 KB az ideális. Természetesen ezek az értékek nincsenek “kőbe vésve”, de ha egy weboldalon sok fotó kerül alkalmazásra, és mindegyik csak egy kicsit nagyobb, mint kellene, akkor a “sok kicsi sokra megy”- elv itt is érvénybe lép, a honlap betöltődése és működése nehézkessé válhat.

Ma már számos eszköz is a segítségünkre van abban, hogy fotóinkat webre optimalizáljuk – ezek az eszközök a fotók tömörítését végzik el, mely által alkalmasak lesz a weboldalon való használatra.

Online elérhető népszerű eszköz >>> tinypng

WordPress weboldalra fotóoptimalizáló bővítmény >>> Smush

*(pixel per inch; pont per hüvelyk)

# Legyenek megfelelő méretűek!

A weboldal tervezése, építése során jól kirajzolódik az, hogy adott oldalakra, helyekre, adott blokkokba milyen méretű, kiterjedésű fotókra, illusztrációkra lesz szükség. Azon kívül, hogy webre optimalizáljuk a képeket (lsd. előző pont), fontos, hogy a méretük is ideális legyen, azaz mind a szélességük, mind a magasságuk igazodjon a rendelkezésre álló helyhez. Ha nem “standard”, nem megfelelő fotók állnak a rendelkezésünkre, akkor mielőtt feltöltjük őket az oldalra, végezzük el az átméretezésüket, és már csak fix méretben töltsük fel őket a weboldalra.

A fotók átméretezésben grafikai programok (például a Photoshop) és online elérhető szerkesztő felületek is tudnak segíteni.

Tuti tipp:

#ha a fotót egy teljes oldalszélességű blokk/sáv háttereként használnánk a weboldalon >>> 1920 px széles (és ezzel arányos magasságú, pl. 1080 px) legyen – ez a full HD szélesség, nagyobb képernyőre is alkalmas méret

#ha a fotót képnézegető galériában használnánk a weboldalon (kattintásra nagyobb méretben megtekinthető) >>> elegendő az 1080 px szélesség

#ha a fotót, egyéb illusztrációt 300 px-nél kisebb méretben használnánk a weboldalon >>> pontos méretben készítsük el, töltsük fel

# Legyenek megfelelően elnevezve!

A képfájlokat is mindig nevezzük el releváns kulcsszavak, rövid, néhány szavas leírások segítségével. Ez SEO, azaz keresőoptimalizálás szempontból is nagyon hasznos, továbbá ezek az elnevezések a weboldalon alt tagként (alternatív szövegként) funkcionálnak, azaz ha valami miatt nem töltődne be az adott fotó a weboldalon, akkor ez a leírás megjelenik, tehát látható, hogy milyen illusztráció lenne ott, valamint ezeket az alternatív szövegeket használják a vakok és gyengénlátóknak szánt hangalapú böngészők.

Fotózz a honlapon! – avagy hogyan válassz megfelelő fotókat a weboldalad számára?