Webes képek optimalizálása: méret, vágás, formátum és alternatív szöveg

Tartalmi szerep

A dekoráció, termékfotó és információs ábra eltérő minőséget és szöveges kiegészítést kíván. Határozd meg, milyen információt ad a kép és mire használják.

A kép szerepe határozza meg, mire kell optimalizálni. A termékfotón fontos lehet az anyag részlete, a folyamatábrán a felirat olvashatósága, a dekoratív textúrán pedig nincs önálló információ. Ugyanaz a tömörítési beállítás ezért nem ad minden képnél jó eredményt. A forrásválasztásnál a felhasználási jogot és eredeti minőséget is tisztázni kell. Egy kis közösségi képből nem lesz valódi részletgazdag nagy nyitófotó pusztán méretnöveléssel. A szerkesztőnek tudnia kell, hol és milyen céllal jelenik meg a kép. A vizuális tartalom ne csak hangulatot ismételjen, hanem segítsen megérteni a szolgáltatást, terméket vagy leírt helyzetet. Ebből következik a megfelelő vágás és szükséges fájlminőség. A választott kép valóban támogatja a környező tartalmat.

Megjelenési méret

A nagyon nagy eredeti fájl apró helyen is teljesen letöltődhet. Készíts a tényleges nézetekhez illő változatokat és rugalmas képmegadást.

A megjelenési méretet a konkrét elrendezésből számold. Egy teljes szélességű nyitókép és kis blogkártya más változatot kívánhat. A srcset és sizes megfelelő használata segítheti a böngésző választását, de hibás megadással továbbra is fölöslegesen nagy fájl érkezhet. A nagy pixelsűrűség indokolhat több részletet, de nem korlátlan eredeti méretet. A képváltozatokat lehetőleg következetes szerkesztői és generálási folyamat hozza létre. A hálózati nézetben ellenőrizd a ténylegesen letöltött fájlt, ne csak a médiatár adataiból következtess. A változatok megfelelő cache-elése és kiszolgálása is számít. A méretezés célja ugyanazt a hasznos képi információt a megjelenési helyzethez arányos adatmennyiséggel átadni. A böngésző nem kap indokolatlanul nagy képet.

Formátum és minőség

Más formátum lehet megfelelő fotóhoz és átlátszó vagy vektoros grafikához. A kép jellegéhez válassz formátumot, majd szemrevételezd a tömörítést.

Fotóhoz, egyszerű grafikához és átlátszó képhez eltérő formátum lehet megfelelő. A modern formátumok előnyét az adott képen és támogatott környezetben érdemes vizsgálni, nem általános százalékígéret alapján. A vektoros grafika nagyítható, de annak kódja és összetettsége is lehet fölösleges. A tömörítés után nézd meg az éleket, finom részletet, árnyalatátmenetet és beégetett feliratot. A jó minőség nem feltétlenül a legnagyobb fájlt jelenti, a legkisebb pedig nem automatikusan elfogadható. A forrásfájlt őrizd meg megfelelő helyen, hogy később új változat készülhessen. Az optimalizált webes export legyen külön kezelhető az eredetitől. Ez megkönnyíti a későbbi arculati és technikai változtatást is. A lényeges részlet és az élek minősége megmarad.

Vágás

A mobilos és asztali arány eltérő fókuszt kívánhat. Jelöld ki a képi fókuszpontot és szükség esetén használj külön kompozíciót.

A vágás a tartalmi jelentést is módosíthatja. Egy ember arca, termék használati részlete vagy feliratos ábra fontos része kikerülhet a képkeretből. A fókuszpont segíthet rugalmas megjelenésnél, de néha külön mobilos kompozíció szükséges. A széles asztali képre írt szöveg telefonon gyakran olvashatatlan vagy levágott lesz, ezért a fontos üzenet inkább valódi szövegként jelenjen meg. A blogkártya képarányát a későbbi szerkesztőnek is ismernie kell. A próba tartalmazzon különböző témájú képet, ne csak a tökéletesen középre komponált bemutatófotót. Az arculati következetesség nem igényli minden kép azonos tartalmú vágását; a keret legyen egységes, a jelentés megőrzése pedig tudatos döntés. Nem vágódik le a fontos termékrész vagy magyarázó elem.

Betöltés

A képernyő alatti kép és a nyitó fő kép nem azonos prioritású. A betöltést a láthatósághoz és tartalmi szerephez igazítsd.

A betöltési prioritás a képi szerephez igazodjon. Az első képernyő fontos képe és egy hosszú cikk legalsó illusztrációja eltérő időzítést kíván. A késleltetett betöltés hasznos lehet későbbi képnél, de a fő LCP-elemet indokolatlanul késleltetni rossz döntés. A képmérethez előre foglalt hely mérsékli az ugrást. A galériában ne legyen minden nagy változat feltétlenül azonnal szükséges. Külső szolgáltatásból érkező kép vagy beágyazás további kapcsolatot és hibalehetőséget hozhat. A lassú hálózati teszt megmutatja a kezdeti sorrendet. A tartalom fontos része kép nélkül is legyen érthető, és hibás letöltésnél ne maradjon magyarázat nélküli, összecsukló hely a felületen. A képbetöltés a teljes oldal élményének része. Az első fontos kép nem vár fölöslegesen, a későbbi képek nem terhelik a kezdetet.

Alternatív szöveg

Az alt nem kulcsszólista, hanem a kép szerepéhez igazodó szöveges helyettesítés. Információs képhez lényegi leírást adj, a puszta dekorációt ennek megfelelően kezeld.

Az alternatív szöveg a kép szerepét helyettesíti az adott környezetben. Egy termék különleges részletét bemutató fotónál más információ szükséges, mint ugyanazon kép díszítő felhasználásánál. A pusztán dekoratív kép kezelése eltér az információstól. A képre írt fontos szövegnek hozzáférhető szöveges megfelelő kell, összetett ábránál pedig hosszabb magyarázat is szükséges lehet a környező tartalomban. Az alt nem kulcsszólista és nem minden esetben a fájlnév megismétlése. A funkcionális kép, például hivatkozó logó leírása a művelethez is kapcsolódhat. A szerkesztői útmutató rövid példákkal segít helyesen dönteni. A jó képleírás nem teszi terjengőssé a használatot, hanem a lényegi információt adja át megfelelő módon. A képi információ a megfelelő módon szövegesen is hozzáférhető.

Szemléltető helyzet és gyakorlati munkalap

Szemléltető példa: egy referenciakártyára teljes asztali képernyőmentés kerül. Kicsiben a szövegek olvashatatlanok és a fájl fölöslegesen nagy. A szerkesztő célzott részletet és megfelelő méretű változatot készít, a részletes projektoldalon pedig külön nagy nézetet kínál.

Gyakori kérdések