Képek használata a weboldalon

15 december 2015 / By Mavrák Richárd

Fotós, művészi, vektoros és mozgóképek beillesztése weboldalunkra.

 

Hogy válogassuk össze a képeket, amiket felhaszálunk egy weboldal elkészítésénél? Tökéletes képek, tökéletes megjelenés!

A legtöbb weboldalon vannak képek, amivel színesebbé vagy érdekesebbé tehetjük oldalunkat. Legtöbbször a kép kapcsolódik a profilunkhoz, a weboldalunk témájához, de van olyan, hogy csak design elemként használjuk fel a képeket. Fontos, hogy a képek megjelenése mindig illeszkedjen és összhangban legyen az eladni kívánt termékünkkel, szolgáltatásunkkal vagy akár a blogunk témájával is.

A rosszul megválogatott képek átláthatatlanná, néha kaotikussá tehetik az oldalunk megjelenését, mondani valóját és céljait. Ez igaz akkor is, hogy ha túl sok képet próbálunk beépíteni az oldalra, mivel a túl sok kép eltereli a figyelmet a lényegről, vagy akár magáról a termékünkről is. Másrészt a képünk mérete fontos az oldal letöltési sebességénél is, mert minél nagyobb a kép mérete, annál lassabban töltődik be az oldalon.
Ha több platformra szeretnénk optimalizálni oldalunkat (reszponzív weboldal készítése), akkor fontos, hogy megválogassuk a mobilnézetben melyik kép jelenjen meg, mivel 1-2 képnél többet nem célszerű egy sima weboldalon megjeleníteni (webshop esetén ez elkerülhetetlen). Egy felhasználó sem szereti, ha a mobilinternetén több MB-os képeket kellene letöltenie ahhoz, hogy megnézhessen egy weboldalt. Tehát jól át kell gondolni, hogy mennyi és milyen képeket használjunk fel az oldal elkészítésénél.
Minden képnek meg van a jelentősége és tudnunk kell, hogy mikor, milyen készítésű, témájú képet használjuk fel. Egy példa: Ha pl. egy portfólió oldalt készítünk ruhákról, ékszerekről, vagy egy wellness szálloda weboldalát állítjuk össze, akkor a fotósok által elkészített nagyfelbontású képeket kell felhasználható méretűre alakítanunk, míg egy logo vagy image kép célszerű, hogy vektros legyen a nagyítás és kicsinyítés miatt is. Hogy mi a különbség egy vektoros, vagy px-es (raszterizált) kép között, nem magyaráznám, mert egy webdesigner már tisztában van vele, mivel ezeket az alapoknál már meg kell tanulni.

Őszintén szólva, én mint kezdő webdesigner, elsőre nem tudtam, hogy milyen képeket használhatok fel az internetről, egyáltalán ha elkészítek egy oldalt, honnan szerezzek rá megfelelő és témához illő képeket, pedig nagyon is egyszerű a válasz.

A “Használjuk előre elkészített HTML sablonokat?” bejegyzésemben elolvashatod, hogy milyen szerzői jogok vannak, amikre érdemes odafigyelned ha képeket töltesz le.

A legjobb megoldás az, ha van egy fotós ismerősöd, akit bármikor megkérhetsz rá, hogy készítsen el neked egy adott témában, beállítással, élességgel egy képet, tehát pontosan elmondod neki, hogy mire van szükséged. Ilyenkor természetesen az alt=”#” pontban nem csak a kép nevét, hanem a forrását is illik megjelenítened. Ha nincs fotós ismerősöd, akkor fizetős oldalakról is tölthetsz le képeket és használhatod fel jogtisztán a weboldalakhoz, vagy magad készíted el mindegyiket. Az én kedvenc oldalaimat a “Webdesigner oldalak” bejegyzésemben megtalálhatod.

Persze manapság már különféle képek közül is választhatsz az oldaladra, mind pl. a sima fotós (művész) képek, vektoros képek, mozgóképek. Mindig attól függ, hogy milyet választunk, hogy mire van szükségünk és mi illene legjobban a weboldalunkhoz.
A mozgóképekről – itt nem a sima gif képeket értem, hanem a .mov kiterjesztésű mozgó képeket – célszerű tudni, hogy nagyon szép és jó megjelenést adnak oldalunknak, de célszerű nagy méretben használni őket, mondjuk egy kezdőképhez a header részben, 100%-os width szélességgel. Fontos, hogy a mozgóképek méretei függenek a felbontásuktól, tehát minél nagyobb méretben akarjuk elhelyezni az oldalunkon, annál nagyobb felbontásban célszerű elkészíteni vagy letölteni a képeket. Sose feledjük, hogy minél nagyobb méretű képet illesztünk be honlapunkra, annál lassabban fog letöltődni egy megjelenítésnél. Ez természetesen a használhatóságát is befolyásolja, mivel egy FullHD-s megjelenésnél a nagy méret hátrány is lehet egyben. Pl. egy mobilnézetnél át kell gondolnunk, hogy megjelenítsük-e a mozgó képünket, vagy ne.

Nagyon érdekessé és dinamikussá tehetik oldalunkat a mozgóképek, ezért bátran használjuk őket, de körültekintően, mert nagyon nagy méretben szerezhetőek be!
Fontos, hogy ha fotós, művészi képeket használunk fel, akkor az ne több MB-os méretekben használjuk, mivel lassítja az oldalunk betöltését, hanem alakítsuk át optimális méretre az összes képet, amit könnyen kezelnek a böngészők és hamar letöltődik bármilyen internet elérésnél. Egyáltalán nem szép, ha egy weboldal tele van üres kockákkal, mert látszik, hogy képnek kellene megjelennie, de azt nem tudja betölteni. Tudom, hogy egy fotós személyes oldalon egy képgaléria tökéletesen éles és nagy felbontású képeket követel meg, de ezt meg lehet oldani úgy is, ha egy kicsit optimalizáljuk a képeinket.
Átalakíthatjuk magunk is a képeket Ps segítségével, vagy simán használjuk a TinyPNG oldalt és meg is van oldva a problémánk, mivel akkor is lehet éles és szép egy kép, ha nem 50MB-os mérettel töltjük fel. Egy 6000px vagy 2500px kép is tökéletesen éles megjelenést biztosít, de akár egy 1200px-es képet is csodás megjelenéssel el lehet helyezni a honlapon.

Minden projekt tervezésnél, amikor már tudjuk, hogy milyen szerkezetű és tartalmú oldalt készítünk, célszerű egy kis kutatást végezni a képek között is, hogy tökéletes és használható képeket tegyünk fel az oldalra, ami illik és harmonizál az oldal céljaival. A célcsoportunk megadja azt is, hogy milyen képeket célszerű használnunk, amivel megérinthetjük a látogatóinkat. Amíg egy wellness oldalon a pihenés és relaxálással kapcsolatos képeket használunk fel, addig egy önkéntes alapítvány oldalán inkább személyes, drámai, de egyben remény keltő képeket illesztünk be.

A vektoros képekről egy másik bejegyzésben fogok majd írni, mert kicsit bővebben szeretnék foglalkozni a felhasználhatóságukkal és készítésükkel.
Mindig tisztázzuk le, hogy mikor milyen jogi feltételek mellett használhatunk egy képet, de ha úgy véljük, hogy egy fotós képe tökéletesen illene az oldalunkra, akkor egyszerűen kérjünk hozzájárulást közvetlenül a fotóstól, hogy elkerüljük a kellemetlen meglepetéseket.

Minden kép egy történet, egy érzés, egy pillanat, egy esemény, amit meg kell értenünk és megismernünk ahhoz, hogy tudjuk milyen üzenettel lehet felhasználni egy elkészített weboldalon.

About The Author

Mavrák Richárd