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

 

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 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.

Képátméretezés különböző képernyőn

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.

Rohamosan nő a retina /HD  kijelzők száma, amelyek lényege a tökéletesen tiszta kép, amely még nagyobb felbontást kíván.
 
 
 
képátméretezés Retina kijelzőn
 

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

Antal-Pap Judit

SEO szakember,  keresőoptimalizálás szakértő, web-designer

Saját honlapok:

AntikaotikaAntikaotika-designAntikaotika-SEORetro-Vintage

SEO AJÁNDÉK

30 OLDALAS E-BOOK , 25%-OS KUPON, INGYENES SEO TANFOLYAM - NE MARADJ LE!

SEO AJÁNDÉK

30 OLDALAS E-BOOK , 25%-OS KUPON, INGYENES SEO TANFOLYAM - NE MARADJ LE!