Képek optimalizálása a weboldaladra: képméret csökkentése
A weboldalra kerülő képek optimalizálása fontos, mert a képméret meghatározza a betöltődés idejét. Ez pedig döntő a felhasználói élmény szempontjából. A Google is kiemelt tényezőként tekint rá, a gyorsabb oldalakat előrébb sorolja. Hogyan tehetsz meg mindent a legjobban optimalizált képekért?
Miről olvashatsz?
Mit jelent a képek optimalizálása?
Az optimalizált képek gyorsan betöltődnek, jól mutatnak, és támogatják az oldalt keresőoptimalizálás szempontjából is.
A weboldalak sebessége nagyrészt a képeken múlik. A sebesség pedig nagyon fontos része az oldal látogatók általi megítélésének és a keresőoptimalizálásnak is. Ha felkeresel egy oldalt, te meddig vársz az oldal, a tartalom, a képek betöltődésére? Nagyon kritikus az első 2-5 másodperc. Ha ezalatt nem tárul a látogatód szeme elé értékes tartalom, valószínűleg visszafordul és másvalaki oldalának linkjére kattint.
A képek legtöbbször nagyon jó minőségben és nagy méretben hozzáférhetők, akár letöltöd őket valahonnan, akár fotózol. Ezek a képek azonban általában túl nagyok ahhoz, hogy szerkesztés nélkül jól használhatók legyenek egy weboldalon. Szerencsére jó minőségű, nagy méretű képekből könnyű weboldal-barát, jól használható verziót készíteni.
Feltöltés után is van néhány teendő a képek beállításaival kapcsolatban. Ezek a bejegyzés támogatásán túl abban is segítenek, hogy még többen megtalálhassák a tartalmad.
Az a weboldal, ahol optimalizálod a képeket:
- gyorsabban töltődik be, ezzel kedvez a látogatóknak, és a keresőmotorok is előnyben részesítik;
- előrébb kerül a találati rangsorban;
- elégedettebbek a látogatók, kevesebb a visszafordulás;
- kisebb a szükséges tárhely és sávszélesség.
Képek előkészítése feltöltés előtt
A weboldalra való feltöltés előtt az optimalizálás általában a megfelelő fájlformátum kiválasztását, a képméret csökkentését és a fájl megfelelő elnevezését jelenti.
Az optimalizálás elsődleges célja ekkor az egyensúly megtalálása. A fájlméret legyen a lehető legkisebb, miközben a kép minősége maradjon a lehető legjobb, de legalábbis elfogadható.
Megfelelő fájlformátum kiválasztása
A webre a képeket a legjobb .jpg vagy .png formátumban feltölteni. Alapesetben fotókhoz válaszd a .jpg-t. Ha viszont átlátszó része is van a képnek, vagy grafikai, esetleg szöveges részeket is tartalmaz, akkor a .png formátum a megfelelő megoldás.
Méret csökkentése
Soha ne tölts fel a weboldaladra fotózás után azonnal képet! Az okostelefonokkal készített képek mérete általában többszöröse az optimálisnak minden szempontból, méretük akár 4-5 MB is lehet.
A képméret csökkentése egyaránt vonatkozik a kép pixelben meghatározott méretére és a fájlméretre.
A kép pixelben meghatározott nagyságát a használt sablon határozza meg (WordPress oldalnál), illetve hogy ezen belül milyen területen használod majd a képet. Mindig a lehető legnagyobb megjelenés méretéből érdemes kiindulni.
Ha teljes képernyő szélességben mutatsz meg egy képet, akkor maximum 1800-2000 px szélességben mentsd el. Ha a középső, tartalmi oszlopban szerepel, annak a szélessége sablontól függően általában 900-1200 px, tehát nincs szükséged ennél szélesebb képre. Ha pedig több oszlopos elrendezésben fog szerepelni egy kép, például egy galériában, akkor akár 600-800 px szélesség is elegendő lehet.
Képszerkesztő szoftver nélkül a képméretezés online is megoldható. Segíthetnek például az ingyen elérhető Canva, Pixlr vagy Reduce Images programok.
A megfelelő pixel-méretre vágás után a fájlméret további csökkentése tömörítéssel érhető el. A tömörítésnek különböző típusai vannak és különböző mértéke lehetséges. A Pixlr és a Reduce Images programban a tömörítés mértékét az ingyenes verzióban is beállíthatod (a Canva erre csak a fizetős verzióban ad lehetőséget).
Jó eredményt ad képek további tömörítésére a TinyPNG. Csak a képet kell feltölteni, semmilyen beállítást nem igényel.
Ha ezek után a kép mérete maximum 100-150 KB, akkor megfelelően optimalizált a kép mérete, a betöltődés gyors lesz.
Képfájl elnevezése
Ha valamilyen eszközzel fotót készítesz, általában egy értelmetlen karaktersorozatot kap automatikusan névként, például IMG_1234.jpg. A stock oldalakról letöltött képek neve általában a letöltési oldal nevét, a készítő nevét vagy egyéb adatokat is tartalmazhat, jellemzően túl hosszú, és nem az, amire szükséged van.
A képfájlt nevezd el beszédesen. A fájlnév utaljon arra, mit ábrázol a kép. Legyen értelmes, de ne túl hosszú. Ne tartalmazzon ékezetes vagy speciális karaktereket, sem szóközt vagy pontot. A szavak között használj kötőjelet. Ha nem releváns a kulcsszó használata a névben, akkor nem kell hozzá mindig ragaszkodni.
Például a Terített asztal almafa alatt.jpg név helyett a teritett-asztal-almafa-alatt.jpg elnevezést használd.
Két kép optimalizálása kizárólag ingyenesen elérhető programokkal
Letöltöttem egy képet az Unsplash oldalról, ami eredetileg 4407*3305 px méretű volt, 3,73 MB fájlmérettel. Elsőként direkt egy nagyon sok részletet tartalmazó képet választottam, ami viszonylag színes is.
Először a Canva oldalon méreteztem át 1000*750 px méretűre. Az ingyenes verzióban nem változtatható meg a tömörítés mértéke. Így a fájlméret .jpg formátumban 263 kB lett. A TinyPNG tömörítése után a fájlméret már csak 181 kB. Sajnos a Canva előfizetés nélkül nem enged ennél nagyobb tömörítést, de kevesebb részletet tartalmazó képeknél a kapott képméret már tökéletes lehet a webre.
Másodszor a PixlrE-ben méreteztem át ugyanígy 1000*750 px méretűre. Itt mentéskor megadható a minőség, azaz a tömörítés. A tömörítés beállításakor azonnal látható az elérhető fájlméret. 70%-nál ez 208 kB volt, 60%-nál 175 kB. A 60%-os tömörítésű verziót a TinyPNG-be is feltöltöttem, így a végső mérete 155.2 kB lett. Ez látható itt.
Harmadszor a Reduce Images oldalt használtam, az előzőeknek megfelelő paraméterekkel. Így a fájl 166,7 kB lett. A TinyPNG ezt tovább tömörítette, végül 148,5 kB lett.
Valószínűleg ennél erősebb tömörítést is lehetett volna választani. Azok a képek pedig, amelyek kevesebb részletet tartalmaznak, sokkal kisebbek lesznek.
Egy ennél jóval kevesebb részletet tartalmazó kép, ami eredetileg 3143*2121 px és 428 kB méretű volt, a Reduce Images-szel 1000 px szélesre átméretezve már csak 44 kB.
Hangulat egységesítése
Ha összegyűjtötted, átméretezted és tömörítetted a képeket egy bejegyzéshez, még kiderülhet, hogy valahogy nem passzolnak egymáshoz. Mások a fények, más domináns színeket mutatnak. Erre megoldás lehet, ha például mindet fekete-fehér verzióban használod, vagy alkalmazol rájuk egy áttetsző, színes réteget.
A képek előkészítésének lépései – összefoglalás
A képek előkészítése hosszú folyamatnak tűnik, de érdemes kialakítani a rutinját.
- Fotó készítése vagy jogtiszta stockfotó letöltése a számítógépre.
- Átméretezés, esetleg vágás, ha szükséges
- Tömörítés beállítása
- Mentés a választott formátumban
- Fájl átnevezése
- PLUSZ: Filterek használata, ha szükséges
A következő lépés a feltöltés az oldaladra. Ha bizonytalan vagy, milyen adatokat érdemes megadni a Médiatárban, és mire figyelj, amikor beilleszted egy bejegyzésbe, akkor olvasd el a cikk folytatását!
* * * * * * * *
Legyen még szuperebb a weboldalad! Hasonló bejegyzéseket a Blogban találsz!