Képméret és formátum hatása a weboldalra – esettanulmány

A weboldalak betöltési sebessége és a felhasználói élmény jelentős mértékben befolyásolják egy weboldal keresőmotorok általi rangsorolását. Ennek egyik fontos, de gyakran alábecsült tényezője a weboldalakon használt képek mérete és formátuma.

Nem megfelelő képoptimalizálás esetén a nagyméretű vagy helytelenül optimalizált képek jelentősen lassíthatják a weboldal betöltési idejét, rontva ezzel a felhasználói élményt, és a Google rangsort egyaránt. Mindemellett a tárhely költségeit is növelik, hisz minél több nagyméretű képet töltesz fel a médiatárba, annál nagyobb tárhelyre van szükséged, ami egy kis odafigyeléssel megelőzhető.

Az esettanulmányomban bemutatom, hogy mi történik a különböző méretű és formátumú képek feltöltésekor, valamint milyen hatással vannak a tárhelyre és a betöltési sebességére.

Az elemzés során egy frissen telepített WordPress weboldalt használok tesztelésre, amelyre semmilyen bővítmény nem került telepítésre, és az adatbázis is tartalommentes. Ebben a meglehetősen laboratóriumi környezetben egyértelműen látszik majd a változtatás hatása, kizárva annak lehetőségét, hogy más egyéb tényezők befolyásolják az eredményt.

Mielőtt belevágnánk…

Ha szeretnéd a saját oldaladon nyomon követni az itt leírtakat, akkor szükséged lesz a WordPress adminisztrációs felületre, és FTP hozzáférésre, mellyel a honlap háttéradataihoz, forráskódjához férhetsz hozzá.

Az FTP, azaz File Transfer Protocol, nem más, mint egy állományátvitelre szolgáló protokoll, mely lehetővé teszi fájlok távoli szerverekre való feltöltését és onnan való letöltését. Az FTP hozzáféréshez szükséges adatokat a tárhelyszolgáltató adja meg számodra.

Az FTP kapcsolódáshoz valamilyen FTP kliensre van szükség, mint pl. az általam is használt FileZilla. Segítségével távoli szerverek tartalmához férhetünk hozzá, onnan adatokat tölthetünk le, vagy tölthetünk fel. Jelen esetben távoli szerver a weboldalad tárhelye.

A feltöltött képeidet a WordPress admin felületén a Média könyvtárban találod, azonban ezek a fájlok valójában a szerveren, a wp-content mappán belül, az uploads almappában kerülnek tárolásra. Ha részletes információt szeretnél szerezni a feltöltött médiatartalmakról, az uploads mappát kell figyelemmel kísérned a szervereden. Ahogyan az alábbi képen is látható, a kiindulópontunk alapján mind a médiatár, mind az uploads mappa üres.

Bal oldalon az üres médiatár, míg jobb oldalon az üres uploads fájl.
Bal oldalon az üres médiatár, míg jobb oldalon az üres uploads fájl

Fontos megemlíteni még a médiabeállítások szerepét. A WordPress adminisztrációs felületen a Beállítások/Média menüpont alatt találsz három, előre beállított képméretet pixelben megadva. Alapértelmezés szerint ezek a bélyegkép, a közepes és a nagy, értékei pedig 150px, 300px és 1024px.

Média beállítások a WordPress adminisztrációs felületen.
Média beállítások a WordPress adminisztrációs felületen

Ahhoz, hogy érthető legyen a most bemutatásra kerülő folyamat, először azt kell megérteni, hogy mi is történik, ha feltöltünk egy képet a médiatárba. A WordPress minden feltöltött képből automatikusan létrehoz három különböző méretű másolatot, amit a rendszer médiabeállításai határoznak meg. Emellett, a használt sablon beállításaitól függően, további képmásolatok is létrejöhetnek.

Az, hogy mindez miért történik a WordPress honlapokon, a reszponzivitással magyarázható. Bár nem szeretnék mélyen belemenni a technikai részletekbe, mint például a CSS töréspontok specifikációiba, fontos megérteni, hogy a látogatók különböző méretű kijelzőkön böngésznek, így a képeket is célszerű ezekhez igazítani. A többféle méretben tárolt képek közül az lesz használatban, ami az adott kijelzőhöz legjobban igazodik.

Ezek a képmásolatok nem jelennek meg közvetlenül a médiatárban, hanem csak az uploads mappában találhatod meg őket. Csak itt tudod nyomon követni létrehozott képmásolatokat és azok tárhelyigényét.

A vörös panda képe, mint tesztkép az optimalizációs esettanulmányban.
A vörös panda képe, mint tesztkép az optimalizációs esettanulmányban.

1. lépés: képfeltöltés eredeti méretben

Mi köze a vörös pandának az optimalizációhoz? Csupán annyi, hogy ő lesz az esettanulmányom főszereplője, vagyis ezen a képen fogom bemutatni a teljes folyamatot. Tehát ha kigyönyörködtük magunkat ebben a kis tüneményben, kezdjünk is bele az érdemi részbe.

A vörös pandánkról készült eredeti kép 5150px széles és 7,5 MB méretű, amit most direkt nem optimalizáltam, hanem eredeti méretben töltöttem fel a teszweboldalra. Nézzük, mi történt feltöltés után.

  • Feltöltéskor a WordPress túl nagynak találta a képet, ezért létrehozott egy úgynevezett scaled, vagyis egy méretcsökkentett verziót, majd ezt helyezte a médiatárba.
  • A médiabeállításoknak megfelelően létrejött a bélyegkép (150px), a közepes méret (300px) és a nagy méret (1024px)
  • Ezen kívül egy 768px, egy 1536px és egy 2048px szélességű másolat is bekerült az uploads mappába.
Az eredeti méretű kép másolatai az uploads fájlban.
Az eredeti méretű kép másolatai az uploads fájlban

Így tehát egy nagyméretű, optimalizálatlan képből további 7 másolat készült, melyek együttesen kb. 11 MB helyet foglalnak el a tárhelyen.

2. lépés: 1280px szélességű .jpg kép feltöltése

Ahhoz, hogy szemléltessük a méretcsökkentés hatását, a következő lépésben módosítottam a vörös pandánkról készült kép méretét 1280px szélességre. A képet továbbra is .jpg formátumban hagytam, további tömörítést, amit a TinyPNG programmal szoktam végezni, ezúttal nem alkalmaztam. Ennek eredményeként egy kb. 500 kB nagyságú kép jött létre.

Az 1280px széles kép másolatai az uploads fájlban.
Az 1280px széles kép másolatai az uploads fájlban

Nézzük meg mi történt a feltöltés után.

  • Méretcsökkentés után már csak 4 másolatot hozott létre a rendszer.
  • A most feltöltött kép és másolatai összesen még az 1 MB adatmennyiséget sem érik el.

Hihetetlen és lenyűgöző, igaz? Csupán egy egyszerű méretcsökkentéssel 11 MB helyett 1 MB-ra csökkent a tárhelyigény. De nem csak helyet spórolunk, hanem jobb felhasználói élményt biztosítunk azzal, hogy a kisebb méretű képek gyorsabban betöltődnek.

3. lépés: 1280px szélességű WebP formátumú kép feltöltése

Bár az eredmények önmagukért beszéltek, további optimalizálásra törekedtem. Az 1280px széles képet a TinyPNG program segítségével tovább tömörítettem, ami 50%-os adatcsökkenést eredményezett: az eredeti 500 kB lecsökkent 243 kB-ra.

TinyPNG online képtömörítő program felülete.
TinyPNG online képtömörítő program

Ezt követően a .jpg formátumú képet WebP formátumra konvertáltam a Photopea ingyenes program használatával. A WebP, egy webes megjelenéshez optimalizált képformátum, kisebb fájlméreteket tesz lehetővé, anélkül, hogy a képminőség érdemben romlana, ezzel elősegítve a gyorsabb oldalbetöltést és a kedvezőbb SEO eredményeket.

Az 1280px széles, tömörített, WebP formátumú kép másolatai az uploads fájlban.
Az 1280px széles, tömörített, WebP formátumú kép másolatai az uploads fájlban

Az eredmény ámulatba ejtő! Bár a másolatok száma nem csökkent a kép tömörítése és WebP formátumra való konvertálása révén, a kép és a hozzá tartozó másolatok összesen csak kb. 500 kB helyet foglalnak el a tárhelyen.

Gondolj csak bele: ha a weboldaladon 100 képet használsz és azokat változtatás nélkül töltenéd fel, akkor az hozzávetőlegesen 1 GB helyet foglalna el a tárhelyeden. Azonban, ha optimalizálod a méretüket és a formátumukat, akkor ez az igény 50 MB-ra csökkenhet.

Romlik-e a kép minősége?

Ezek után biztosan felmerül benned a kérdés, hogy nem romlik-e a kép minősége ennyi optimalizálás és jelentős méretcsökkentés után. Az alábbi összehasonlító képen megmutatom, hogy a különféle optimalizálási lépések – mint a méretcsökkentés és a WebP formátumra való átalakítás – után a képek közötti különbség szinte észrevehetetlen.

Az esettanulmányhoz használt három kép összehasonlítása.
Az esettanulmányhoz használt három kép összehasonlítása.

Az esettanulmány során bemutatott képeket egymás mellé helyeztem, hogy közvetlenül összehasonlíthasd őket. Ezután a szerkesztett képet tovább tömörítettem és WebP formátumra alakítottam, de még így is nehéz lenne megkülönböztetni őket, ha nem lennének megjelölve. Ez azt bizonyítja, hogy az optimalizálási folyamatok nem rontanak szemmel láthatóan a képminőségen.

Bízz bátran a képek tömörítésében, méretcsökkentésében és a WebP formátum használatában. Ezek az eljárások segítenek javítani weboldalad teljesítményét anélkül, hogy a vizuális minőség rovására menne.

Képméretek és betöltési sebesség összefüggése

Eddig a képek optimalizálásának tárhelyre gyakorolt kedvező hatását mutattam be, most következzen a weboldal betöltési sebességére gyakorolt hatásának vizsgálata. Ehhez a korábban létrehozott teszt-weboldalon kialakítottam a főoldalt, ahol különböző méretű és formátumú képeket helyeztem el az alábbi módon.

  • A tesztoldalhoz a Twenty Twenty-Four sablont választottam és a sablonba beépített egyik mintaoldalt használtam, melyre 8 db képet tudtam elhelyezni.
  • A betöltési sebesség mérésére a PageSpeed Insights programot használtam. Egyszerűen működik, és amely részletes elemzést készít mind mobil, mind asztali nézetben.
  • A teszthez a vörös panda képén kívül további 7 képet használtam.
  • A teszt első szakaszában a 8 képet eredeti méretükben töltöttem fel a tesztoldalra, méreteik: 4-6000px szélesek, 4-8MB méretűek, .jpg formátumúak.
  • A teszt második részében a képeket 1280px szélesre csökkentettem anélkül, hogy más módosítást végeztem volna.
  • A teszt harmadik szakaszában az 1280px széles képeket TinyPNG programmal tömörítettem, majd WebP formátumra konvertáltam.
  • Mindhárom szakaszban sebességmérést végeztem, melyekről képernyőfotót készítettem, mind a mobil, mind az asztali gépre vonatkozó eredményekről.
  • A teszt során semmilyen gyorsító vagy cache plugint nem alkalmaztam, az eredményeket kizárólag a képek befolyásolták.

Sebességmérések eredményei asztali gépre

Sebességmérés eredménye asztali gépen, eredeti méretű képekkel.
Sebességmérés eredménye eredeti méretű képekkel – asztali
Sebességmérés eredménye asztali gépen, 1280px méretű képekkel.
Sebességmérés eredménye 1280px méretű képekkel – asztali
Sebességmérés eredménye asztali gépen, optimalizált, tömörített, WebP formátumú képekkel.
Sebességmérés eredménye optimalizált, tömörített, WebP formátumú képekkel – asztali

Sebességmérések eredményei mobilra

Sebességmérés eredménye mobilon, eredeti méretű képekkel.
Sebességmérés eredménye eredeti méretű képekkel – mobil
Sebességmérés eredménye mobilon, 1280px méretű képekkel.
Sebességmérés eredménye mobilon, optimalizált, tömörített, WebP formátumú képekkel.

Eredmények kiértékelése

Az optimalizálási folyamat mind a mobil, mind az asztali nézetben jelentős javulást eredményezett a weboldal betöltési sebességében. Ha még nem találkoztál korábban ilyen típusú mérési eredményekkel, ne aggódj a sok adat láttán. Jelen elemzés során a négy kiemelt adat közül csak a Performance (Teljesítmény) értéket kell nézni, amely a képek és egyéb médiaelemek betöltési sebességére is vonatkozik.

A Performance egy összetett mutató, amelynek egyik kulcsfontosságú eleme az LCP, vagyis a Largest Contentful Paint. Az LCP az oldalon megjelenő legnagyobb médiaelem betöltődésének idejét méri, ami alapján láthatjuk a képek optimalizálásának hatékonyságát.

A képernyőfotókon egyértelműen látható, hogy az optimalizálás mértékével arányosan csökkent a betöltési idő:

  • Asztali eszközökön a betöltési idő 3,4 másodpercről 0,7 másodpercre csökkent.
  • Mobil eszközökön pedig 7,2 másodpercről 2,4 másodpercre.

Ezek az eredmények világosan mutatják, hogy az optimalizálás jelentősen javítja az oldal sebességét, így növelve a felhasználói élményt.


Ebben az elemzésben gyakorlati példán keresztül mutattam be, hogy mennyire fontos a weboldalra feltöltött képeket optimalizálni. Az eredmények egyértelműen kimutatták, hogy a képek méretcsökkentése, a tömörítés és a helyes formátumra konvertálás jelentősen csökkentik a weboldal tárhelyigényét, miközben drasztikusan javítják a betöltési sebességet mind mobil, mind asztali nézetben.