Nyílt Web Alapítvány > WordPress Magyarország > Keresőoptimalizálás > Sebességnövelés a képek méretének csökkentésével
Keresőoptimalizálás Tippek, trükkök

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

Szerző: 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:

add_filter( 'jpeg_quality', create_function( '', 'return 80;' ) );

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ó

1999 óta foglalkozom nyílt forrású rendszerekkel, 2006 óta kimondottan WordPress-el. Az utóbbi időben WordPress alapú webshopokat építek. Az általam felügyelt WooCommerce-ek éves forgalma meghaladja a 1.5 milliárd forintot. @patai-laszlo

Hozzászólás a fórumban:

Kezdőlap Fórumok Sebességnövelés a képek méretének csökkentésével

Ennek a témakörnek tartalma 1 hozzászólás, 4 résztvevő. Utolsó frissítés:  Csaba SÁRI 2 éve telt el.

6 bejegyzés megtekintése - 1-6 / 6
  • Szerző
    Bejegyzés
  • #258022

    Patai László
    Adminisztrátor
    • Témanyitás: 216
    • Hozzászólás: 2939
    • WordPress szakértő

    Kérdésed, vagy véleményed van a(z) Sebességnövelés a képek méretének csökkentésével című tartalommal kapcsolatban?
    [A teljes cikk itt olvasható: Sebességnövelés a képek méretének csökkentésével]

    #258023

    Csaba SÁRI
    • Témanyitás:
    • Hozzászólás:
    • Tag

    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:

    sudo apt-get install optipng jpegoptim

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

    
    #!/bin/bash
    
    find /var/www/ -name "*.JPG" | while read file; do
      jpegoptim --strip-all "$file"
    done
    
    find /var/www/ -name "*.png" | while read file; do
      optipng -preserve -quiet "$file"
    done
    

    üdv,
    Csaba

    #258024

    Patai László
    • Témanyitás:
    • Hozzászólás:
    • Tag

    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.

    #258025

    clausewitz45
    Tag
    • Témanyitás: 0
    • Hozzászólás: 0
    • Tag

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

    #258026

    gab
    Tag
    • Témanyitás: 0
    • Hozzászólás: 2
    • Kezdő

    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.

    #258027

    Rottenbacher Tamás
    Adminisztrátor
    • Témanyitás: 84
    • Hozzászólás: 2873
    • Fórum rajongó

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

6 bejegyzés megtekintése - 1-6 / 6

‘Sebességnövelés a képek méretének csökkentésével’ témakör lezárásra került, így a hozzászólás nem lehetséges.

Tovább az eszköztárra

A honlap további használatához a sütik használatát el kell fogadni. További információ

A süti beállítások ennél a honlapnál engedélyezett a legjobb felhasználói élmény érdekében. Amennyiben a beállítás változtatása nélkül kerül sor a honlap használatára, vagy az "Elfogadás" gombra történik kattintás, azzal a felhasználó elfogadja a sütik használatát.

Bezárás