Keresőoptimalizálás Tippek, trükkök

Sebességnövelés a képek méretének csökkentésével

Patai László

Egy beszélgetés kapcsán merült fel, hogy milyen lehetőségekkel lehet a WordPress-ben a feltöltött képek méretét csökkenteni. Elsőre csak vakartam a fejemet, hiszen eddig nem különösebben foglalkoztatott a téma. Egy-két beállítást használtam korábban, amit alapból a WordPress biztosít számunkra.

Miért van erre szükség?
Elsősorban a látogatóknak kedvezünk ezzel. Nem túl felhasználóbarát, amikor 4-5 MB-os képeket tölt le az olvasó, hiszen használhatunk 50-100KB-os képeket is. Továbbá SEO szempontjai is vannak, hiszen a Google -tapasztalataim szerint- előnyben részesíti a gyorsabb weboldalakat. Bár ezt mostanában tagadja a Google.

Nézzük, hogyan érhetünk el méretcsökkenést a feltöltött képeknél:

jpeg_quality hook:

Példa:

Ezzel a beállítással a feltöltött képekből generált, különböző méretű thumbnail képek minősége 80%-os lesz. Ezzel a WordPress funkcióval el lehet érni méretcsökkenést. Érdemes kísérletezni vele. Egészen 30-40%-ig használhatóak a képek.

Gyakorlatban:
Találomra kiválasztottam az interneten egy 4MB körüli képet és elkezdtem vele tesztelni. A kiválasztott kép: alpha-test-photo.jpg (mérete: 3 957 414 báj)

Teszt 1: Alapértelmezett képkezelés

Feltöltöttem a fenti képet és a WordPress által generált “NAGY” verziót beillesztettem a bejegyzésbe. Ez egy 1024×681-es kép lett. A mérete pedig: 57,7 KB

A kép minősége:
SONY DSC

Teszt 2: 60%-os minőségen

A fenti hook segítségével levettem a kép minőségét 60%-ra. Méret: 35,7 KB
Csökkenés mértéke: 38,13%

A kép minősége:
SONY DSC

Teszt 3: 30%-os minőségen

Ezt már csak a teljesség kedvéért teszem be. Itt már fellép némi (látható) minőségromlás. Méret: 24,7 KB
Csökkenés mértéke: 57,19%

A kép minősége:

alpha-test-photo

Méretcsökkentés bővítmény segítségével:

Teszt 4: Kikapcsoltam fenti hookot és feltelepítettem a TinyPNG WP bővítményét

Számos olyan bővítmény elérhető WordPress-re, melyek segítségével csökkenthetjük a képek méretét. Átnéztem számos tesztet és szinte mindenhol a TinyPNG-t favorizálják, így én is ezt próbáltam ki. A kép mérete: 39,8Kb

Csökkenés mértéke: 31,02%

A kép minősége:

SONY DSC

A TinyPNG nem rossz, csökkenti a képek minőségét, törli a meta infókat, így ér el méretcsökkenést. Az előnye az, hogy a feltöltött képet is optimalizálja (tehát az eredetit), így tárhelyet spórolhatunk meg vele. Viszont nagyon ritkán használjuk a feltöltött képet direktben, szinte mindig valamilyen thumbnail verzióját jelenítjük meg. A TinPNG hátrányai: lassú, mivel külső szerveren dolgozza át a képeket, továbbá 500 kép után fizetős. Az 500-as ingyen kép a gyakorlatban kb. 100 képre elegendő, hiszen a WP készít 4-5 képméretet feltöltésenként és azokat is optimalizálja. 

Konklúzió: A WordPress dokumentáció átnézése után számos olyan ingyenes megoldást találhatunk, melyek felveszik a versenyt a prémium megoldásokkal is. Sőt… szemmel látható különbség nincs a bővítmény segítségével készült kép és a WordPress saját verziója között, mégis 7,11%-al jobb a mérete a jpeg_quality hook-nak. 

A szerzőről

Patai László

Patai László

15 éve foglalkozom nyílt forrású rendszerekkel, ebből több, mint 10 éve a WordPress bűvöletében! Véletlen? Aligha!

  • Csaba SÁRI

    Sziasztok,

    aki egy kicsit mélyebben járatos a linux témában és esetleg saját szervert üzemeltet – vagy van olyan kapcsolatban az üzemeltetővel, hogy ezt meg tudja tenni, akkor a következőket is használhatja (mondjuk Debian / Ubuntu esetében): optipng és jpegoptim csomagok, amelyekkel már operációs rendszer szinten el tudja érni a veszteségmentes tömörítését a képeknek. Telepítése:

    Használata is egyszerű (sőt, ha betesszük egy CRON-ba, akkor időnként futtatva automatizálható a folyamat):

    üdv,
    Csaba

    • Patai László

      Szia Csaba, ezek is szuper megoldások.

      PNG-re ajánlom a pngquant-ot. Próbáltad esetleg? Nekem az optipng nem csökkentett akkorát.

      pngquant –force –quality=70-80 teszt.png kb. 70%-os csökkenést eredményez.

      • Sári Csaba

        Oh, nem ismertem Köszönöm :-), tesztelem

  • Gab

    Szia. Nem vagyok járatos ebben a témában, sőt, nagyon is kezdő vagyok, ezért az lenne a kérdésem, hogy ezt a jpeg_quality hook-ot hogyan tudom használni, hova kell beírnom azt a kódot?
    Válszod köszönöm.

    • Rottenbacher Tamas

      A functions.php -hez kell hozzáadni. Itt van segítség miként: http://rotisoft.hu/blog/wordpress-functions-php-szerkesztese/

Yes No