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.

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.

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!