Képek tömörítése és SEO-optimalizálása weboldalon

Egy weboldalon megjelenő kép méretének csökkentése SEO szempontjából fontos, hiszen így gyorsabb lesz az oldal betöltése a Google-ben.
Kép méretének csökkentése

Képek tömörítése és SEO-optimalizálása weboldalon

Hidd el, nem szeretnéd, hogy a Google ne kedvelje a weboldalad. Márpedig ha túl nagy méretűek a honlapodon megjelenő képek, akkor lassabb lesz a betöltési sebessége az oldalnak, ami egyben hátrébb rangsorolást is eredményez a Google találati listáján. Fordíts tehát időt és energiát az összes kép méretének csökkentésére, ezzel is javítva a webhelyed SEO-ját. Legyen szó fájlméret csökkentésről, vagy JPG tömörítésről és átméretezésről, ebben a cikkben számos módszert bemutatunk ezen célokra. Tarts velünk! 🙂

1. Miért előnyös a képek optimalizálása?

A képek átméretezése és a képméret csökkentése azért kockázatos, mert ha rossz programmal csinálod, akkor túlságosan leromlik a kép minősége. A látogatóid nem fogják értékelni, ha pixelesek és alacsony minőségűek a weboldaladon megjelenő vizuális tartalmak.

Szerencsére vannak olyan eszközök, amelyek képesek lecsökkenteni egy kép fájlméretét, miközben szinte semmit (vagy csak nagyon kicsit) romlik a fotók minősége.

Szemmel gyakorlatilag észrevehetetlen lesz a minőségromlás, viszont a Google értékelni fogja a gyorsabb betöltési sebességet. Egyéb weboldal gyorsítási tippjeink is vannak! 🙂

Ha nem optimalizálod a képeket a weboldaladon, akkor lassulni fog a betöltés, ami rossz hatással van a felhasználói élményindexre. Ezért fontos tehát a weboldalon megjelenő minden kép méretének csökkentése.

Egyes kutatások szerint a képek egy teljes honlap méretének 21%-át teszik ki. A videófájlokat követően a fényképek rendelkeznek a legnagyobb átlagos fájlmérettel.

Ha meg szeretnéd mérni az oldalad betöltési sebességét, az alábbi programokat ajánljuk: Google PageSpeed Insights, GTmetrix, Pingdom Tools.

A képek optimalizálása révén a Google is könnyebben indexeli az oldaladon fellelhető fényképeket a Google Képek találatok között. Igen, még onnan is származnak kattintások a webhelyedre!

Sőt, mivel a kép méretének csökkentése egyben kevésbé terheli a webszervert is, így a tárhely szolgáltató is örülni fog neki. 🙂

Weboldal készítés

2. Kép méretének csökkentése – Erre figyelj oda!

A legfontosabb cél, hogy megtaláld a tökéletes egyensúlyt a kis fájlméret és az elfogadható képminőség között. A legegyszerűbb módszer erre, ha tömöríted a képeket, mielőtt feltöltenéd őket a WordPress weboldaladra.

Erre a célra használhatunk online elérhető képtömörítő szolgáltatásokat, vagy letölthető programokat, mint az Adobe Photoshop és az Affinity Photo. Sőt, még WordPress bővítmények is elérhetők.

A két alapvető dolog, amire oda kell figyelni, az a fájlformátum és a tömörítés fajtája. Ha ezeket helyesen kiválasztod, akkor ötször kisebb lesz a honlapodon fellelhető képek mérete.

2.1. Fájlformátum kiválasztása

Amikor képekről beszélünk, rengeteg eltérő fájlformátum közül válogathatunk. Nézzük a három leggyakrabban előforduló variációt:

  • PNG – a legmagasabb képminőséget biztosítja, viszont ennek megvan az ára, mivel a képek mérete többszörösen meghaladja az ideális szintet.
  • JPG – némileg rosszabb a képminőség (alig észrevehető a változás), de cserében sokkal kisebb a fájlméret.
  • GIF – az animált mozgóképekhez a legjobb választás, csak veszteségmentes tömörítést használ.

Annak érdekében, hogy érzékeltessük az eltérő fájlformátumok közötti méretkülönbséget, nézzük meg ugyanazt a képet PNG és JPG formátumban.

PNG fájlformátum (589 kilobyte):

PNG képformátum

JPG fájlformátum (88 kilobyte):

JPG képformátum

A PNG képet átalakítottuk JPG fájlformátummá, tömörítettük, és egyből csökkent a kép mérete az eredeti fájlmérethez képest 85%-kal!

Ez egy kép esetén lehet nem tűnik hatalmas változásnak, de ha minden képet ilyen formában optimalizálunk az oldalunkon, akkor bizony jól látható eredményei lesznek. 🙂

2.2. Képtömörítés típusai

Két alapvető képtömörítési eljárást különböztetünk meg: veszteséges és veszteségmentes módszerek.

A veszteséges képtömörítés egy olyan szűrő, ami a kép minőségének romlását okozza, tehát ezzel óvatosan kell bánnunk. Ne alkalmazzunk túl nagy mértékű tömörítést, mert akkor szinte felismerhetetlen lesz a kép. Képszerkesztő programokon belül megvalósítható.

A veszteségmentes képtömörítés nem jár adatvesztéssel, csak adattömörítéssel. Nem rontja a képek minőségét, viszont a fotók renderelése előtt szükség lesz azok „kicsomagolására”. Veszteségmentes tömörítésre használható például az ImageOptim.

A tömörítés különösen előnyös több megabyte méretű jogtiszta képek esetén, hiszen ezek valóban nagy felbontású fényképek és sok helyet foglalnak tömörítés nélkül.

3. Kép méretének csökkentése programokkal

Rengeteg prémium és ingyenes képtömörítő alkalmazás közül válogathatunk. Néhány nagyobb szabadságot ad a kezedbe a képek optimalizálását illetően, míg mások elvégeznek mindent helyetted. Nézzük is a listát!

GIMP kép méretének csökkentése

4. Kép méretének csökkentése bővítményekkel

Léteznek olyan WordPress bővítmények, amelyek megkönnyítik a dolgunkat, és nem kell minden egyes képet egyenként átalakítanunk, tömörítenünk. Automatikusan elvégzik a képek méretének csökkentését és optimalizálását.

Különösen előnyös, hogy még azokat a képeket is optimalizálják, amik már fel vannak töltve a honlapra. Mindenesetre ne támaszkodj teljesen a képtömörítő WordPress pluginekre, mert a webszervered gyorsan betelik, ha folyamatosan 2-3 MB méretű képeket fogsz feltölteni.

ShortPixel kép méretének tömörítése

5. Kép méretének csökkentése online

Ha nem szeretnél semmilyen programot letölteni, és nem okoz gondot, ha saját kezűleg kell intézned a weboldaladon megjelenített képek optimalizálását, akkor leírjuk a legegyszerűbb módszert.

Először is használd a PNG to JPG fájl átalakító szolgáltatást, ami már alapból többszörösen csökkenti a PNG képek méretét.

Ezt követően még tovább tudsz faragni a fájlok méretén úgy, hogy nem romlik a minőségük. Erre szolgál a TinyPNG online eszköze, amely képes WebP, PNG és JPG fájlok tömörítésére is.

TinyPNG kép méretének csökkentése

Ki is jelzi számunkra, hogy hány százalékkal lett kisebb a fájlok mérete és mennyi tárhelyet spóroltunk meg a képek tömörítése által.

6. Összefoglaló

A képek tömörítése fontos a weboldalunk keresőoptimalizálása szempontjából, hiszen gyorsabb lesz így az oldal betöltési sebessége és a Google is előnyben részesíti majd ezt.

Számos módszer létezik egy kép méretének csökkentése céljából: letölthető képszerkesztő programok, WordPress bővítmények és online szolgáltatások.

Figyeljünk oda az ideális fájlformátumra (JPG/JPEG), illetve a tömörítés mértékére, hogy ne legyen túl alacsony minőségű a webhelyünkön megjelenő kép.

Hibát találtál? Írj nekünk az alábbi e-mail címre: szerk@kiszervezettmarketing.hu

7. Gyakran ismételt kérdések és válaszok

❓ Miért fontos a képek méretének csökkentése?

A weboldal SEO pontszámai miatt, hiszen így rövidebb időt vesz igénybe az oldal betöltése.

❓ Hogyan tömöríthetők a képek egy weboldalon?

Vannak letölthető képszerkesztő programok, WordPress bővítmények, és online elérhető szolgáltatások is erre a célra. Ezeket bemutatjuk a cikkünkben.

❓ Mi az ideális fájlformátum, ha jó minőségű és kis méretű képeket szeretnék?

JPG/JPEG formátum a leginkább javasolt.

Oszd meg! Küldd el! Nyomtasd ki!

Facebook
LinkedIn
Email
Nyomtatás
Picture of Dávid Ádám

Dávid Ádám

Dávid Ádám vagyok, a Kiszervezett Marketing Kft. alapítója, az online marketing megszállottja.

150+ szöveges ötcsillagos ügyfélvéleményünkkel előrevetítjük, hogy milyen egy igazán profin megtervezett, ügyfélközpontú marketing ügynökséggel dolgozni.

A Kiszervezett Marketing 13x-os Marketing Diamond Awards-díjas ügynökség. Ezt a díjat a Magyar Marketing Szövetség ítélte oda számunkra, ami bizonyítja, hogy szakmailag kimagasló szolgáltatásokat nyújtunk az online marketing területén.

Büszkék vagyunk arra, hogy 2023-ban a Kiszervezett Marketing Kft. lett Az Év Marketing Nagykövete!

A Kiszervezett Marketing az a marketing ügynökség, amely nem olyan, mint a suszter és a cipője.

Ezt alátámasztja a 430+ szakmai blogcikkünk is, amelynek köszönhetően több mint 160.000 látogatónk van éves szinten a saját weboldalukon a Google Keresőből, fizetett hirdetések nélkül. Mindezt alig 1,5 év alatt értük el.

A megtervezett médiamegjelenésekkel folyamatosan ott vagyunk nagy hírportálok hasábjain a területünk szakértőjeként. Párat kiemelve: penzcentrum.hu, hirado.hu, hrportal.hu, origo.hu, blikk.hu.

Azért lehetünk Google Partnerek, mert rendelkezünk a Google által elismert szakértővel. Az ügyfeleink hirdetési kampányai kivétel nélkül minden esetben elérik a minimum 70%-os optimalizáltságot.

Tartottam már szakmai előadást több egyetemen online marketing témában, többek között: BME, BGE, ELTE, MATE, Óbudai Egyetem. Emellett a Magyar Marketing Fesztivál rendszeres előadójaként mutatom be a siker kulcsát a digitális térben.

Hogyan legyen vevőszerző weboldalam?

HOVÁ KÜLDHETJÜK AZ INGYENES E-BOOKUNKAT?

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
FONTOS2: Mindössze 60 másodperc az ajánlatkérés!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Készítettünk egy 5 részből álló videós útmutatót, hogy könnyen tudd telepíteni!

PLUSZ: Kuponkód az emailben, amivel -10% az első 3 hónapból!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Hogyan legyen vevőszerző weboldalam?

Töltsd le az e-bookot, és a megvalósítás menete is kristálytiszta lesz előtted.

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!

Ajánlatkérés

FONTOS1: Mindössze 60 másodperc az ajánlatkérés!
FONTOS2: Töltsd ki 100%-ra a kapcsolatfelvételt, csak abban az esetben kapjuk meg az ajánlatkérésed!
Szuper kezdés! Folytasd, már csak két apró lépés van hátra!
Nagyszerű! Még egy utolsó lépés, és minden kész az ajánlatkéréshez!