Egy weboldal felépítéséhez nélkülözhetetlen elemek a színek, a megfelelő betűtípusok, tartalmak, valamint a képek. A képek ugyanúgy, ahogyan a színek is képesek hangulatot, érzelmet közvetíteni (erről itt olvashatsz bővebben), megragadni a látogatók figyelmét és a felhasználói élményt befolyásolni. Ezért fontos, hogy ne csak dekorációs, helykitöltő elemként gondoljunk rájuk.
Azonban van néhány alapszabály, amit érdemes figyelembe venned a legjobb hatás érdekében, ha képeket szeretnél használni a weboldalon.
Miért kellenek képek?
A képek (grafikák, illusztrációk, mintázatok szintén) segítenek prezentálni, megjeleníteni a mondanivalónkat, ezáltal nemcsak érthetőbb, de figyelemfelkeltőbb is lesz a tartalmunk. A képek fontos szerepet játszanak a designban. Használatukkal kiemelhetők tartalmak, annak érdekében, hogy a látogatók elolvassanak bizonyos részeket, cikkeket. Vizuális élményt ad és motiválhat a döntések meghozatalában.
Sokszor halljuk, hogy „Egy kép többet mond ezer szónál” – és ez a weboldalak esetében hatványozottan igaz. Ahhoz azonban, hogy ezt a hatást elérjük fontos, hogy jó minőségű képeket használjunk és a céljainknak megfelelően válasszuk ki azokat.
Hogyan válassz képeket a weboldalra?
Az egyik legfontosabb szempont egy-egy kép kiválasztásánál, hogy az összhangban legyen a weboldal dizájnjával, illetve minden egyéb, a weboldalon megtalálható elemmel (színek, hangulatok, stílusok stb.).
Ne használj olyan képet, ami eltér attól a stílustól, megjelenéstől, amit már eddig alkalmaztál – ne keltsenek a képek „összevisszaságot” a weboldalon. Fontos, hogy megőrizzük a harmóniát, és megtaláljuk a színek egyensúlyát, hogy a weboldal szép és esztétikus maradjon.
Ahogyan fentebb is olvashattad a képek segítenek megjeleníteni a mondanivalót egy-egy tartalom, cikk esetében. Ezért úgy válassz képet, hogy az a tartalomnak megfelelő legyen – segítse az üzenet közvetítését, ösztönözze a látogatókat bizonyos cselekvésekre. Ne használj a tartalomhoz nem illő képet/képeket!
Válassz olyan képeket, amelyek valósághűek. Biztosan Te is találkoztál már olyan képpel, amit meglátva Te is túlzónak, erőltetettnek, műnek találtál. Például, amikor nagyon vidáman olvassák a dobozon lévő feliratot az emberek, vagy vidáman eszik a salátát/ nézik a monitoron lévő kimutatásokat. Törekedj inkább a természetességre, a „hihetőbb” képek használatára.
Technikai útmutató
Miután megvannak a weboldalra szánt képek (a fentiek alapján), akkor jöjjön néhány tipp és tanács, hogy hogyan töltsd fel őket, hogyan alakítsd őket.
Fontos, hogy kiváló minőségű képeket válassz– kerüld a szemcsés, elmosódott, torz, alacsony felbontású képeket, mert ezek nagy mértékben rontják az élményt, és negatív hatásuk lehet.
Weboldalra elegendő lehet a 72 dpi felbontású képek használata (a kijelzők általában 72dpi felbontású képeket tudnak megjeleníteni), az ennél nagyobbak növelik a méretet. Mérete pedig maximum 1920 px legyen (full HD szélesség).
Figyelj a fájl(ok) méretére, ugyanis a nagyméretű képek jelentősen lassítják a weboldal betöltődését, és ezzel rontják a felhasználói élményt. Ha nagyméretű, teljes képernyős háttérképet szeretnél használni, akkor annak mérete ne legyen nagyobb, mint 1 MB (ha ennél nagyobb, akkor méretezd át.). Minden más kép fájlmérete 150 Kb – 500 Kb (maximum) legyen.
TIPP: A weboldalak lassú betöltődéséért sokszor a képek túlságosan nagy fájlmérete okozza, ezért érdemes a képeket feltöltés előtt optimalizálni. A képeket könnyedén tömöríthetjük minőségromlás nélkül például a TinyPNG segítségével – egyszerűen kezelhető és gyors. Ingyenes verzióban egyszerre 20 képet tudunk feltölteni, maximum 5 MB/kép méretben.
Saját vagy letöltött?
A termékeket, szolgáltatásokat sokszor a képek adják el. Alaposabban is szemügyre vehetik, jobban megismerhetik az adott terméket a látogatók. Ezért a legcélszerűbb, hogy a weboldalon (főleg webáruházak esetében) a termékről , szép, minőségi képek legyenek láthatóak (a telefonnal készített rossz felbontású, elmosódott képeket hanyagoljuk).
Ha nem rendelkezünk saját képekkel, vagy azok nem megfelelőek, akkor készíttethetünk profi fotóssal, vagy letölthetünk/vásárolhatunk is.
Számtalan fotó letöltő oldal létezik fizetős és ingyenes egyaránt. Mindig olvassuk el a szerzői jogokat, mert ezek tartalmazzák a felhasználásra vonatkozó utasításokat (melyik képet mire használhatod, kell-e hivatkozni és ha igen, akkor hogyan stb.).
Íme néhány fotó letöltő oldal, amelyeket használhatsz:
Fizetős oldalak:
Ingyenesen oldalak:
Képek a weboldalon -összefoglalás
Most, hogy már tudod milyen sok előnnyel jár, ha képeket használsz a weboldaladon, nincs más hátra, mint hogy a fenti útmutatót alkalmazva megtaláld a célodnak legmegfelelőbb képeket, optimalizáld (amennyiben szükséges) és feltöltsd azokat. Használd „puskaként” a fenti írást, vagy térj vissza később és olvasd el újra, ha emlékeztetőre lenne szükséged.
Te milyen fotó letöltő oldalakat használsz, ami bevált? Írd meg nyugodtan, hogy másoknak is tippel szolgáljon! ?
Látogass el további tartalmakért ide is.
Ami még kimaradt és hasznos, hogy a webp kiterjesztést már szinte minden böngésző támogatja. Webp-vel kb. 24-35%-kal kisebb fájlokat lehet készíteni és minőségre is szebbek lehetnek, illetve ugyanúgy támogatja az átlátszóságot.
Kedves Márk!
Üdvözöllek az olvasók között! 🙂
Köszönöm az észrevételt és a kiegészítést! Valóban a WebP kiterjesztésű képfájlok kisebb méretet tesznek lehetővé – azonban ennek egyik hátránya, hogy nem minden böngésző támogatta/támogatja. Persze ennek listája folyamatosan bővül(t). A cikk írásának pillanatában, ha jól emlékszem pl. a Safari még nem/részben támogatta csak ezt a formátumot.
Érdemes felmérni, hogy a látogatók milyen böngésztőből tekintik meg az oldalt és annak függvényében dönteni 🙂
További szép napot,
Üdv,
Helga