Egy nagy felbontású, közvetlenül a telefonról feltöltött fotó könnyen több megabájtos lehet. Ha egy szolgáltatói honlap kezdőoldalán ebből öt-hat is szerepel, a látogató mobilneten várakozni fog, mielőtt egyáltalán megismerné az ajánlatot. Ezért érdemes tudni, hogyan optimalizálj képeket weboldalra úgy, hogy közben a vállalkozásod továbbra is igényes és hiteles maradjon.
A cél nem az, hogy minden fotó apró vagy homályos legyen. A jó képoptimalizálás egyensúlyt teremt a látvány, a betöltési sebesség és a felhasználói élmény között. Egy jól megválasztott, megfelelően előkészített kép támogatja az üzenetedet. Egy túl nagy vagy rosszul vágott fotó viszont lassítja az oldalt, és gyakran többet árt, mint használ.
Miért számít ennyit a képek mérete?
A legtöbb kisebb vállalkozás weboldalán a képek adják az oldal adatforgalmának jelentős részét. Ez érthető: a saját portrék, referenciafotók, helyszínképek és termékfotók bizalmat építenek. Egy könyvelő, kozmetikus, építőipari vállalkozó vagy szállásadó esetében a valódi képek sokkal többet mondhatnak, mint egy általános stockfotó.
Csakhogy a fényképezőgép vagy a mobil nem weboldalra készíti a képeket. Egy mai telefon akár 4000-6000 pixel széles fotót is készít, miközben egy teljes szélességű webes képhez sok esetben 1600-2000 pixel is elegendő. A felesleges méret lassabb betöltést jelent, főleg mobilon. Ez növelheti annak esélyét is, hogy a látogató még azelőtt bezárja az oldalt, hogy kapcsolatba lépne veled.
A keresők szintén figyelembe veszik az oldal sebességét és mobilos használhatóságát. Nem egyetlen kép mérete dönt a helyezésekről, de a sok optimalizálatlan fotó összeadódik. A gyors oldal tehát nem technikai luxus, hanem az érdeklődők megtartásának egyik alapja.
Hogyan optimalizálj képeket weboldalra a gyakorlatban?
A folyamatot érdemes már a képek kiválasztásánál elkezdeni. Ne feltölts minden elkészült fotót csak azért, mert rendelkezésre áll. Válaszd ki azokat, amelyek valóban segítenek megérteni a szolgáltatásodat, megmutatják a munkád minőségét, vagy emberibbé teszik a vállalkozásodat.
Először a megfelelő méretet állítsd be
A weboldalon megjelenő kép szélességénél nagyobb fájlt általában nem érdemes használni. Ha egy fotó egy 700 pixel széles tartalmi blokkban jelenik meg, a 4000 pixel széles eredeti kép indokolatlanul nagy. Ilyenkor egy 1200-1600 pixel széles változat már kellő tartalékot ad élesebb kijelzőkhöz is, miközben jóval kisebb fájlméretű.
A kezdőoldali, teljes szélességű kiemelt képekhez jellemzően 1920 pixel körüli szélesség elég lehet. Ez nem kőbe vésett szabály. Egy részletgazdag referenciafotó vagy egy nagy háttérkép más beállítást kérhet, de a kiindulópont jó: a képet a tényleges megjelenési méretéhez igazítsd, ne az eredeti fájl méretéhez.
A magasságra is figyelj. A nagyon álló, hosszú fotók sok helyet foglalnak mobilon, és széteshet tőlük az oldal ritmusa. Egy szolgáltatói oldalon többnyire jól működnek a tudatosan vágott, egységes képarányú fotók. Nem kell minden képnek teljesen egyformának lennie, de legyen benne rendszer.
Válassz korszerű fájlformátumot
A JPG továbbra is jó választás sok fotóhoz, különösen akkor, ha széles körű kompatibilitásra van szükség. A PNG akkor indokolt, ha valódi átlátszóság kell, például egy logónál vagy grafikai elemnél. Fotókhoz azonban a PNG általában túl nagy fájlt eredményez.
A WebP és az AVIF modernebb formátumok, amelyek hasonló vizuális minőséget sok esetben kisebb méret mellett tudnak adni. Egy jól kezelt weboldalon érdemes ezeket használni a fotóknál. A WebP praktikus, elterjedt megoldás, az AVIF pedig még jobb tömörítést adhat, bár a feldolgozása és a beállítása nem minden rendszerben ugyanolyan egyszerű.
Nem szükséges formátumháborút indítani. A lényeg az, hogy a látogató jó minőségű, de könnyen letölthető képet kapjon. Ha a weboldalad rendszere automatikusan korszerű formátumot szolgál ki, az kényelmes és biztonságos megoldás lehet.
Tömöríts minőségromlás nélkül, vagy alig látható kompromisszummal
A tömörítés a képfájl méretét csökkenti. Ez lehet veszteségmentes, amikor a fájl mérete mérséklődik, de a kép tartalma lényegében nem változik, vagy veszteséges, amikor némi részlet elvész a kisebb méret érdekében.
Webes fotóknál a mérsékelt veszteséges tömörítés általában teljesen elfogadható. Egy 80-85 körüli minőségi beállítás sok esetben szemmel látható romlás nélkül csökkenti jelentősen a fájlméretet. Ne vakon ragaszkodj egyetlen számhoz: nézd meg a végeredményt mobilon és nagyobb kijelzőn is. Arcoknál, finom textúráknál vagy szöveget tartalmazó képeknél hamarabb feltűnhet a túl erős tömörítés.
A cél nem az, hogy egy kép mindenáron a lehető legkisebb legyen. Ha a minőség látványosan romlik, a spórolás nem éri meg. A látogató nem fájlméretet lát, hanem a vállalkozásodról alkot benyomást.
Ne hagyd figyelmen kívül a vágást és a fókuszt
Egy jó képoptimalizálás nem kizárólag technikai feladat. Ha a fontos részlet a kép szélén van, mobilnézetben könnyen levágódhat. Például egy rólad készült portrén az arc legyen a biztosan látható területen, ne a kép legtávolabbi sarkában.
A kivágás segíthet a fájlméreten is. Ha egy fotón a környezet nagy része nem mond semmit, a felesleges terület eltávolításával erősebb és kisebb képet kapsz. Egy referenciaoldalon különösen hasznos, ha minden fotó egyértelműen a munkát, az eredményt vagy a folyamat lényeges pillanatát mutatja.
Az alt szöveg nem fájlnév
A képhez tartozó alternatív szöveg, röviden alt szöveg, akkor jelenhet meg, ha a kép nem tölthető be, és a képernyőolvasót használók számára is ez ad leírást. A keresőknek is segít megérteni, mi látható a képen.
Ne kulcsszavakból álló mondatot írj, és ne ismételd minden képnél ugyanazt. A „IMG_4829.jpg” semmit nem mond, de a „Kézzel készített torta esküvői virágdísszel” már hasznos leírás. Ha a kép pusztán dekoráció, nem feltétlenül szükséges külön alt szöveg. Ha viszont szolgáltatást, terméket vagy referenciát mutat, érdemes pontosan megfogalmazni, mit lát a látogató.
Mely képeket töltsd be később?
A látogató először a képernyő felső részét látja. Az itt szereplő fő képnek gyorsan meg kell érkeznie, különben az oldal üresnek vagy lassúnak hat. Az oldal lejjebb található galériaképeit, blogillusztrációit és kevésbé fontos vizuális elemeit viszont ráér később betölteni, amikor a látogató odagörget.
Ezt hívják késleltetett betöltésnek. Hasznos, mert a nyitóképernyő gyorsabban használhatóvá válik. Van azonban egy fontos kivétel: a legelső, kiemelt főképet nem érdemes késleltetni. Annak azonnal rendelkezésre kell állnia.
Gyakori hibák, amelyek lassítják az oldalt
A problémák nagy része néhány ismétlődő döntésből ered. Ezeket érdemes feltöltés előtt ellenőrizni:
- Eredeti, több megabájtos telefonos fotó kerül fel átméretezés nélkül.
- Fotók PNG formátumban maradnak, holott nincs szükség átlátszóságra.
- Ugyanaz a nagy méretű kép jelenik meg minden eszközön, mobilon is.
- A főoldalon túl sok, hasonló szerepű kép verseng a figyelemért.
- A képek fájlneve és alt szövege nem segíti a tartalom értelmezését.
Ezek nem mindig látványos hibák egy asztali gépen, gyors internettel. A valós használat azonban gyakran telefonról, gyengébb hálózaton történik. Ilyenkor derül ki, mennyit számít az előkészítés.
Egy egyszerű ellenőrzési sorrend feltöltés előtt
Mielőtt egy képet élesítesz, nézd meg, valóban szükség van-e rá az adott oldalon. Ezután vágd a kívánt képarányra, méretezd a várható megjelenéshez, majd mentsd korszerű, tömörített formátumban. Végül adj neki érthető fájlnevet és alt szöveget, ha a kép tartalmi szerepet tölt be.
Ha nem szeretnél ezzel minden alkalommal külön foglalkozni, már a weboldal kialakításakor érdemes olyan rendszert és folyamatot választani, amely kezeli a reszponzív képméreteket és a késleltetett betöltést. Az Adaiformnál a gyors, mobilbarát működés nem utólagos javítás, hanem a weboldal felépítésének része.
A jó képeknek nem csak szépnek kell lenniük. A feladatuk az, hogy gyorsan bizalmat építsenek, támogassák az üzenetedet, és ne álljanak az érdeklődő és a kapcsolatfelvétel útjába.