asztalon heverő eszközök képek optimalizálásához

Képek optimalizálása a weboldaladra: képméret csökkentése

2021. január 18.

Másnak is hasznos lenne? Oszd meg!

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?

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.

képtömörítés TinyPNG-vel
A tinypng.com használata nagyon egyszerű: feltöltöd az eredeti képet és letöltöd a tömörített verzióját.

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.

Ljubljana főteének képe átméretezve, tömörítve
Ennek a képnek a fájlmérete az eredetileg letöltött kép 4%-a, 155 kB. Weben minden gond nélkül használható.

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.

színes lufik optimalizált képe

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.

  1. Fotó készítése vagy jogtiszta stockfotó letöltése a számítógépre.
  2. Átméretezés, esetleg vágás, ha szükséges
  3. Tömörítés beállítása
  4. Mentés a választott formátumban
  5. Fájl átnevezése
  6. 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!

Másnak is hasznos lenne? Oszd meg!

Hasonló témájú cikkek keresése:

shares