Képátméretezés – képoptimalizálás – SEO tippek 4.
Képátméretezés – képoptimalizálás – SEO tippek 4.
Ha keresőbarát weboldalt szeretnél, akkor a képeket is optimalizálni kell. Az elnevezés és az alt attribútum meghatározás mellett nagyon fontos a megfelelő méretű fotók és egyéb illusztrációk alkalmazása. Ebben az esetben gyakori megoldás lehet a képátméretezés.
Multimédiás tartalmak optimalizálása
A felhasználói élmény szempontjából fontos, hogy képekkel, videókkal és egyéb interaktív multimédiás tartalommal szemléltessük mondanivalónkat a szöveges tartalom mellett .
A keresők a képeket nem képesek feldolgozni, ezért fontos, hogy kellő információt biztosíts a számukra, mivel ezek értelmezése a legokosabb robotoknak is nehézséget okozhatnak.
Van megoldás: alternatív szöveg
Az úgynevezett alt attribútum (alternatív szöveg/alt tag/alt tulajdonság) kitöltésével kiegészítő leírásokat adhatsz a multimédiás fájloknak. Elvileg kötelező megadni minden médiaelemhez alt tagot, de ez sok weboldalon elmarad.
A képek kikapcsolásakor például az alt tulajdonságban elhelyezett szöveg a kép helyettesítő szövegeként szerepel az oldalon.
Az optimális alternatív szöveg:
- lényegre törő
- szerepel benne a kulcsszó, de nem mindig kell erőltetni
- egyedi
- segíti a médiatartalom megértését
- utal az anyag tartalmára
A másik fontos elem, ami alapján a keresők a képek tartalmát azonosítani tudják: a kép elnevezése: a fájlnév egyezzen meg a kulcsszóval, vagy legalábbis tartalmazza azt.
Ugyancsak kiemelt keresőoptimalizálási szempont a képek betöltődésének sebessége. A találati eredményt a képek betöltődési ideje is döntően befolyásolja.
Az ideális fotóméret webre – képátméretezés
Mindenki rohan, senkinek semmire sincs ideje! Ha a felhasználó az oldaladra bukkan, mit akar?
Megoldást azonnal!
Ha a weboldalad a nagy felbontású, több megabyte-ot foglaló képek miatt lassan töltődik be, akkor megnő az esélye annak, hogy a látogatók idő előtt elhagyják a honlapodat, mondván máshol gyorsabban hozzájutnak az általuk keresett információhoz.
A Google is komoly figyelmet fordít a weboldalakon megtalálható képek méretére. Olyannyira, hogy a betöltődési sebesség fontos szempont a találati listán elfoglalt helyezéseink meghatározásában.
Minél nagyobb méretű képet akarsz feltölteni a weboldaladra, akkor a látogatónak annál nagyobb erőforrásra lesz szüksége a kép megtekintéséhez.
A nagy méretű kép viszi a memóriát, a sávszélességet, és egy gyengébb eszköz esetén a felhasználó lelép.
Sajnos ezt a hibát én is elkövettem a webdesigner honlapomnál annak idején. Tökéletes képeket szerettem volna megmutatni, amelyek akkora méretben kerültek fel a weboldalamra, hogy a 2 GB tárhely is kevésnek bizonyult. Ha túl jó a géped és a neted, akkor ez a probléma lehet, hogy fel sem tűnik.
A jelenlegi cikk írásakor még a tömeges képátméretezés nem történt meg, emiatt lassan töltődik a honlap. (A fenti állítás akkor igaz, ha még mindig a barna dizájnt látod.) Itt megnézheted: Antikaotika-design. Bár gyorsítót és képtömörítőt is tettem fel, látszik, hogy amikor a honlap készült, a képoptimalizáláshoz még nem igazán értettem.
Ne ess abba a hibába, amelybe én is beleestem, hogy a saját képeimet nagy méretben töltögettem fel a honlapomra, aztán tárhelyet is kellett bővítenem és bizonyára látogatókat is veszítettem….
A képméret – pixelek és byte-ok
– Honnan tudjam, hogy mekkora az ideális képméret a weben?
Képátméretezés előtt jogos a kérdés.
A képpontméretek/ pixelek azt határozzák meg, hogy egy kép hány képpont széles és hány képpont magas. A felbontás egy bitkép részletgazdagsága, amely képpont/hüvelyk (ppi) mértékegységben adható meg. Minél nagyobb a hüvelyenkénti képpontok száma, annál nagyobb a felbontás.
Egy 620 x 400 képpontos kép különböző méretű és felbontású képernyőkön megjelenítve.
FIGYELEM!
1 képpont4 byte-ot foglal el a memóriából 8 bites színmélységnél.
- 100 x 100px méretű kép 10,000 képpont (vagyis pixel)
- 10,000 pixel x 4 bytes = 40,000 byte
- 40,000 byte / 1024 = 39 KB
A kis matek után látható, hogy egy 100 x 100-as kép 39 KB-ot foglal el. Ez a méret természetesen nem alkalmas arra, hogy a képernyő teljes szélességében megcsodáljuk a fotót, mert a kép túl pixeles lesz.
A lenti táblázatból jól látható, hogy mekkora fájlméretre számíthatunk nagyobb méret esetén.
| Méret | Képpontok | Fájlméret |
|---|---|---|
| 100 x 100 | 10,000 | 39 KB |
| 200 x 200 | 40,000 | 156 KB |
| 300 x 300 | 90,000 | 351 KB |
| 500 x 500 | 250,000 | 977 KB |
| 800 x 800 | 640,000 | 2500 KB |
A képméret meghatározása során azt is vedd figyelembe, hogy mekkorában fog maximálisan megjelenni.
Fejléc, vagy háttér képek esetén ideális a 1920 px szélesség.
Ha ennél kisebb a képed, akkor nagy monitoron nem tölti ki az oldalt, ami csúnya, amatőr hatást eredményez.
Normál monitoron a posztok optimális szélessége továbbra is 600-800 px
Ennyit tud befogni a szemünk egyszerre kényelmesen, így az abban elhelyezett képeket ennél sokkal szélesebbre nem igazán van értelme venni, a felbontás csökkenésével ezek is arányosan csökkennek.
Amint látod, nem is olyan egyszerű meghatározni a megfelelő képméretet. Neked kell eldöntened, hogy melyik a fontosabb: a kis fájlméretet vagy a kiváló képminőség.
Válaszd az elváráshoz leginkább illő méretet és kiterjesztést!
Egyszerű ábrákhoz jó lehet a .gif is, színes, részletgazdag képekhez használj magas minőségű .jpg, vagy .png formát!
Képátméretezés – Hogyan?
A cél tehát az lesz, hogy az adott képet a lehető legkisebb fájlméretűre csökkentsd, hogy ezzel is gyorsítsd az oldaladat. Ráadásul, ezt úgy kell elérni, hogy közben a képminőség szemmel láthatóan ne romoljon. Szerencsére, erre rengeteg online és offline képszerkesztő program áll rendelkezésedre.
Olvasd el a Képszerkesztő programok – SEO tippek 5. című írást!
Antal-Pap Judit
SEO szakember, keresőoptimalizálás szakértő, web-designer
Saját honlapok:
Antikaotika, Antikaotika-design, Antikaotika-SEO, Retro-Vintage
