Amikor weboldalak továbbfejlesztésén dolgozom, gyakran belefutok egy általános hibába: ez pedig az, hogy a képek az oldalon nincsenek sehogy sem optimalizálva. Így könnyen lehet, hogy a weboldalunk képei a Google képkeresője számára is láthatatlanok maradnak és még feleslegesen lassítják is a weboldalunkat.
Pedig ha valamit, akkor a a weboldal képeit érdemes már az indulásnál optimalizálva feltölteni, hiszen sok későbbi vesződségtől kímélhetjük meg így magunkat. Nézzük meg először a képek optimalizálásának két legfőbb elemét, így látni fogjuk miért érdemes ezzel foglalkoznunk.
E cikk tartalma:
Milyen szempontok alapján kell optimalizálnunk a képeinket?
1) A weboldalunkon található képek keresőoptimalizálása
Amikor a keresőkre optimalizáljuk a képeinket, azzal két legyet ütünk egy csapásra:
- Megtalálhatók lesznek pl. a Google képkeresőben. Ez azért jó, mert sokan keresnek kimondottan képekre és így a képeinken keresztül eljuthatnak akár a weboldalunkra is (a találatoknál a Google mindig kiírja, mely szájton találta a képet).
- Azok a képek, amelyeknek az elnevezése és a meta-adatai tartalmazzák az adott oldal kulcsszavát valamilyen formában, magát az oldalt is erősítik az adott kulcsszóra.
Azt, hogy ezt hogyan valósíthatjuk meg, arról a cikk vége felé írok bővebben.
2) A weboldalunkon található képek méretbeli optimalizálása
A méretbeli optimalizálás az a folyamat, amely során megtaláljuk azt a képméretet és képformátumot, amelyeknél minimálisra csökkenthetjük a képfájljaink méretét látható minőségromlás nélkül.
Nagyon fontos, hogy itt csupán a látható minőségromlást akarjuk elkerülni. Az emberi szem ugyanis nem vesz észre minden apró részletet. Így olykor, ha elhagyunk egy-két számunkra nem látható információt a képről, annak mérete jelentősen csökkenthető.
A képméretek optimalizálásának előnyei:
- Kevesebb letöltési időt igényel, ezáltal gyorsítva a weboldalunk betöltődését. Egy gyors weboldal jobb felhasználói élményt nyújt és némileg csökkenti az oldalunkat gyorsan elhagyó felhasználók arányát is.
- Kevesebb helyet foglal a szerveren. Bár ez néhány kép esetén még nem probléma, több ezer feltöltött képfájl már bizony komoly tényező lehet.
- Segíti a keresőoptimalizálást is. A Google keresőjében fontos szempont az oldalunk sebessége, így ha az gyorsan betöltődik, jobb helyezésekben reménykedhetünk.
Most pedig ismerkedjünk meg az interneten használható képformátumokkal, hiszen különböző tartalmú képeknél különböző lesz az ideális fájlformátum, amit használnunk érdemes.
A neten használható képformátumokról kicsit bővebben
A számítógépes dizájnban gyakorlatilag 2 nagy csoportra oszthatjuk a képeket, grafikákat: vektoros- és rasztergrafikára.
Vektorgrafika
A vektoros grafikák tárolása úgy történik, hogy a képen található alakzatokat, formákat, vonalakat egy leírónyelv segítségével elemenként rögzítjük.
Ha ezt nagyon konyhanyelven akarnám megfogalmazni, úgy mondanám, hogy olyan utasítások kerülnek bele a képfájlba (persze valamilyen számítógép által érthető nyelven), mint például: „tegyél oda egy négyzetet, amelyik ilyen meg ilyen színű és ekkora méretű”.
Azaz a képen található alakzatok jellemzőit: koordináták, színek, méretek, vonalak vastagsága, stb. tároljuk le – a teljes kép pedig ezen alakzatokból fog összeállni.
A vektoros grafika nagy előnye, hogy tetszőlegesen nagyíthatjuk / kicsinyíthetjük, lényegében minőségromlás nélkül. Leggyakoribb felhasználási területei: betűkészletek, ikonok, logók, emblémák. Olyan grafikák, amelyek jellemzően kevés színt használnak, alakzatokkal jól körülírhatók és várhatóan több méretben kerülnek majd felhasználásra.
Hátránya viszont az, hogy nem igazán alkalmas a sok színű, változatos, nem ismétlődő mintázatok megjelenítésére – amilyenek például a fényképek.
A vektorgrafikák leggyakoribb fájlformátumai a webes világban:
- SVG (Scalable Vector Graphics) – általánosan használható formátum
- AI (Adobe Illustrator) – weboldalak, logók grafikai tervezésénél használjuk
- PDF (Portable Document Format) – dokumentumok megjelenítésére
- Betűkészletek: TTF (TrueType Font), WOFF (Web Open Font Format), OTF (OpenType Font), stb.
Rasztergrafika
A rasztergrafika (vagy bittérképes grafika) képpontról képpontra rögzíti a kép tartalmát. Azaz ha a vektoros példa négyzetét akarjuk raszteresen tárolni, akkor az ezt megjelenítő program nem fogja tudni, hogy amit megjelenít az épp egy négyzet – csupán azt, hogy a következő képpont épp milyen színű.
A rasztergrafika kiválóan alkalmas fényképek megjelenítésére, de akár a vektorgrafikákat is exportálhatjuk raszteresen annak érdekében, hogy minél szélesebb körben felhasználható legyen. Ez utóbbira azért lehet szükség, mert ugyan a vektoros SVG formátumot a böngészők nagy része már támogatja, de kezelése egy weboldal tartalmaként még egyelőre körülményesebb, mint pl. egy PNG fájlnak.
A weben leggyakrabban használt raszteres formátumok:
- JPG / JPEG (Joint Photographics Experts Group) – mint a neve is sugallja, elsősorban fotók tárolására találták ki. Veszteséges tömörítési eljárással tárolja a fényképeinket (elhagyva a szemünk által kevésbé érzékelhető árnyalatokat), ezáltal nagyon hatékonyan le tudja csökkenteni a fénykép fájl méretét. Logókhoz, kevés színű ábrához ne használjuk, mert azoknál itt-ott homályos lehet!
- PNG (Portable Network Graphics) – veszteségmentes tömörítést alkalmazó formátum. Kevés színű, illetve átlátszóságot is tartalmazó ábráknál (pl. logók, emblémák, ikonok, rajzok) remek megoldás. Fényképet is tárolhatunk vele, azonban ez az esetek nagy részében nem ajánlott, mivel sokkal nagyobb lesz a fájlméret, mint a JPG esetében.
- GIF (Graphics Intercharge Format) – régebben az egyik leggyakoribb formátum volt a weboldalakon. Mára sokat veszített a népszerűségéből, de még így is sokfelé használják. A PNG-hez hasonlóan veszteségmentes tömörítést tesz lehetővé, viszont csak maximálisan 256 színt tud megjeleníteni. Nagy előnye viszont, hogy animált képeket is meg tudunk vele jeleníteni. Így ahol csak egy rövid rajzfilmszerű mozgóképre, vagy mozgó bannerre van szükségünk, jó választás lehet.
Tervezz sikeres weboldalt
Elektronikus könyv vállalkozóknak és
weboldal-készítőknek
Tanuld meg, hogyan tervezz olyan weboldalt, amely eljuttatja a látogatódat a honlapod céljáig.
Tippek a képek optimalizálásához
Végül nézzünk meg néhány gyakorlati tippet, hogyan érdemes hozzáfognunk webre szánt képeink optimalizálásának.
Fájlméret / képminőség arányában törekedjünk az optimumra
Ha kevés színt használunk, érdemes pl. PNG formátumot használnunk, ha sokat, akkor pedig JPG-t. A JPG minőségét pedig érdemes némileg csökkentenünk, hogy minél kisebb fájlt kapjunk (persze csak akkor, ha ez nem okoz látható minőségromlást).
A fejlettebb grafikai programokban általában amikor elmentünk egy JPG fájlt, akkor százalékosan ki tudjuk választani, milyen legyen a minősége. Ahol nem fontosak egy képen az apró részletek (pl. eleve kissé elmosódva jelenítjük meg a képet, vagy pedig egy háttérképről van szó), akár lemehetünk 80%-os minőségig is a kisebb fájlméret érdekében.
Optimalizáljuk a kép méretét (dimenzióit) is
Egy olyan weboldalra, amelynek a maximális szélessége 1600 pixel, teljesen felesleges egy 8000×5000 pixeles képet feltölteni. Kicsinyítsük le ebben az esetben még feltöltés előtt egy képszerkesztő programmal 1600 pixel szélesre, úgy, hogy közben megtartjuk az arányait.
Így gyakran az eredeti képméret tizedét, de nem ritkán huszadát is elérhetjük, miközben még szebben is fog kinézni a képünk. A böngészők ugyanis a túl nagy kép kisebbként történő megjelenítésekor gyakran kissé „darabossá” teszik annak a kinézetét.
Mindig törekedjünk arra, hogy akkora képméretet használjunk, amekkorában az valóban megjelenik a weboldalunkon.
Használjunk ALT és TITLE attribútumokat
Ezeket az attribútumokat a kép HTML oldalunkba való beillesztésekor tudjuk megadni. Több okból is hasznosak:
- A vakok és gyengénlátók számára rendelkezésre álló szövegfelolvasó programok azt nem tudják értelmezni, hogy mi van egy képen. Viszont az olyan meta-adatok, mint a TITLE, ALT attribútumok, valamint a fájlnév igenis olvashatók számukra. Így a képünk üzenete több emberhez is eljuthat.
- Ha valamilyen technikai ok miatt a képfájl nem töltődik be, az ALT és a TITLE akkor is látható. Így ilyenkor is lehet a látogatónak fogalma arról, mit tartalmazhat a kép.
- A keresőrobotok számára is akkor értelmezhető a legkönnyebben egy kép, ha ezeket a meta-adatokat rendelkezésre bocsátjuk. Sokan használják a Google képkeresőjét, érdemes hát megadnunk az esélyt, hogy így is rátaláljanak az oldalunkra.
Nem mindegy, mi a kép fájlneve
A kép fájlneve esetében a legjobb, ha azt ékezet nélkül, ámde a kép tartalmát valamelyest leíró módon mentjük el. Például: piros-ketuleses-kanape.jpg.
Kerüljük az ékezetes fájlneveket, a szóközök helyére pedig rakjunk kötőjeleket. Az ékezetes és szóköz karakterekkel az a baj, hogy nem minden szerver tudja őket helyesen tárolni és megjeleníteni. Az „Éves beszámoló.jpg” helyett legyen a fájlunk neve inkább eves-beszamolo.jpg. Így biztosak lehetünk benne, hogy ha a weboldalunkat egyszer áthelyezzük egy másik szerverre, nem fognak a képeink eltűnni amiatt, ha ott más nyelvi kódolást használnak a fájlok tárolásához.
Kerüljük továbbá a semmitmondó fájlneveket. Ilyenek például a digitális fényképezőgépek által használt DSC001.JPG és hasonló elnevezések. Az a baj ezekkel, hogy semmit sem mondanak arról, mi van a képen. Így a keresőrobotok is nehezebben ismerik fel és több ezer ilyen kép feltöltése után mi is nehezebben találjuk majd meg a keresett képet, ha épp nem áll rendelkezésünkre valamilyen előnézet.
Öreg hiba, ha rajta hagyjuk a dátumot
Véletlenül se töltsünk fel olyan képfájlt, amelynek ott van a sarkában a dátum, mert nagyon amatőr hatást kelt. Ha saját magunk készítette képeket akarunk felrakni az oldalunkra, akkor ezt a funkciót villámgyorsan kapcsoljuk ki a fényképezőgépünkön!
Végszó
Remélem segített e cikkem abban, hogy tisztábban láss azzal kapcsolatban, hogyan, milyen alapelvek mentén érdemes képeket feltöltened a honlapodra. Amennyiben bármilyen kérdésed van a témával kapcsolatban, nyugodtan kérdezz lentebb a kommentek részben.
