loader image
Képek optimalizálása a weboldalra
Képek optimalizálása a weboldalra

Képek optimalizálása a weboldalra: az ideális képméret és fájltípusok - 1. rész

Nem meglepő az a tény, hogy a legtöbb látogató türelmesebbnek gondolja magát, mint amilyen valójában, így sajnos manapság az egyik legkritikusabb tényező az online kereskedők számára a weboldal gyorsasága. A nagy méretű, nem megfelelően optimalizált képek rengeteg kárt okozhatnak a felhasználói élményben, ezáltal pillanatok alatt elkergetve a potenciális vevőt. Ezt bizonyítja az Unbounce kutatása is : hogyha egy webshop lassabban tölt be a vártnál, a látogatók 45%-a kisebb eséllyel fog vásárolni. Ezt pedig nyilvánvalóan nem szeretnénk.

JPEG, GIF, PNG, WebP... Avagy mikor mit

Képek optimalizálása a weboldalra

Mindig bizonyosodj meg róla, hogy a céljaidhoz illeszkedő fájltípust használod. A legnépszerűbbek a JPEG, PNG, valamint GIF fájltípusok, hiszen ezek a legalkalmasabbak arra, hogy egy weboldalon használjuk őket.

  • PNG: kiváló minőségű képek, viszont általában nagyobb fájlméretűek. Főként grafikák, infográfok vagy logók esetén alkalmazzuk, mert biztosítja az áttetsző hátteret. Ha nincs is áttetsző hátterünk, akkor is érdemes az éles kontúrokkal rendelkező grafikát PNG formátumba menteni, mert szebb minőségben tudjuk kimenteni a kontúrokat, mint a JPEG képeket. Mutatunk egy példát:
PNG minőség

PNG mentésként: 34.4 kb

JPG minőség

JPG mentésként: 35.67 kb

  • JPEG: minden színt képes kezelni, effektíve kis fájlméretben. A minőség és a fájlméret a minőségi szint 1 és 100% közötti beállításával hozható egyensúlyba. Leggyakrabban saját fotók esetén használjuk.
  • GIF: általában animációknál, mémeknél alkalmazzuk (ritkán statikus képekhez), csak 256 színt támogat. Veszteségmentes tömörítést biztosít.
Meme gif
  • WebP: a WebP formátumot annak jegyében fejlesztette a Google, hogy rövidítse a betöltési időket. A WebP lehetővé teszi, hogy sokkal kisebb fájlméretek mellett kiváló minőségű képeket jelenítsünk meg webhelyünkön. De sajnos van egy nagy hátránya is: nem minden böngésző támogatja a megjelenítését, mint például az Internet Explorer vagy régebbi Safari böngészők.
Képek optimalizálása a weboldalra

A méret a lényeg?

Jelen esetben minden bizonnyal. Viszont, ha nem szeretnénk, hogy a szükségesnél jobban a minőség kárára váljon az optimalizálás, elengedhetetlen, hogy magas minőségű, lehetőleg saját vizuális tartalmakat használjunk. Ha nincs lehetőségünk egyelőre professzionális fotók készítésére, akkor bízzunk meg egy szakmailag hozzáértő fotóst a képek elkészítésével, vagy pedig használjunk megbízható forrásból származó stock fotókat. A Pixabay, az Unsplash, a PicJumbo vagy a SplitShire mind-mind olyan weboldalak, amelyek kiváló alternatívát kínálnak akár díjmentesen is.

A képfájlok mérete különösen fontos a főoldal esetén: itt általában lényegével több tartalom jelenik meg, mint az aloldalainkon. Azonban míg bizonyos fájlok mérete könnyedén csökkenthető minőségromlás nélkül, addig a képeknél ez nem igaz. De mi is az ideális méret?

Fájlméret: Az optimális fájlméret általában 2-300 KB körül mozog, azonban természetesen nem minden az említett „méret”, hiszen ha a minőség annyira rossz, hogy élvezhetetlen lesz a felhasználó számára a tartalom, vagy bizalmatlanságot kelt benne, akkor valamit nem jól csináltunk. Törekedjünk tehát arra, hogy a nagyobb képek vagy teljes képernyős háttérképek se haladják meg az 1 MB-os méretet.

Képméret: Az online térben a magasságot és a szélességet pixelekben mérjük, így egy tipikus kép egy weboldalon vagy egy blogon általában 795 × 300 pixeles. De természetesen rengeteg, ettől eltérő alternatíva is létezik. Például egy teljes képernyős háttér esetén a 1920 pixel széles kép az elterjedt megoldás.

Webes képek felbontása: a kép minősége vagy sűrűsége pont per hüvelykben mérve (dpi). A legtöbb monitor általában 72 dpi vagy 92 dpi, ezért az ennél magasabb felbontás a képek esetén is szükségtelen. Jobban mondva szükségtelenül megnagyobbítja a képet, amit természetesen nem szeretnénk. A legtöbb tervezőprogram rendelkezik „Webre mentés” funkcióval, így érdemes ezt alkalmazni a webes képek optimalizálásához. Azonban ha nem rendelkezünk ilyen szoftverrel, akkor ingyenesen például a tinypng.com vagy a jpegmini.com weboldalon is tömöríteni tudjuk a fotóinkat.

Na de hol találom meg ezeket az adatokat egy már létező kép esetén? A fájlméretet, valamint a képméretet közvetlenül a számítógépeden találod meg. Kattints jobb gombbal a képfájlra, és válaszd ki a „Tulajdonságok”, majd pedig az „Általános” vagy “Részletek” fület (Macen ezt az „Infó megjelenítése” gomb alatt találod).

Kövesd Marketinges Erikát a Facebookon!

Képek optimalizálása a weboldalra

Konzisztens dizájn

Ugye te sem szeretnéd, ha úgy nézne ki a weboldaladat, mint egy mindenféle színekkel és anyagokkal összefoltozott nadrág? Bár a konzisztens dizájnt már számtalanszor említettük az Instagrammal kapcsolatos blogcikkjeinkben, fontosnak tartjuk itt is kiemelni. Az egységes stílus és méretek nem csak harmóniát sugároznak, de könnyebbé teszik a mi munkánkat is. Sokkal egyszerűbb lesz követni ugyanis egy mintát, egy következetes dizájnt, mint folyton új elrendezéseket kialakítani.

A képek optimalizálásának további, lényeges momentumairól következő bejegyzésünkben  olvashatsz.

Legutóbbi blogbejegyzéseink:

Általános ajánlatkérés
Miben segíthetek?
Kapcsolatfelvételi adatok
Üzenetküldés
környezetbarát iroda
állatbarát iroda

Copyright © 2023 – Minden jog fenntartva – rev.2.29

Közösségi média oldalkezelést szeretnék
Hirdetéskezelést szeretnék