A PageSpeed Insights gyakori javaslata: „Képek megjelenítése modern formátumokban”. A WebP ugyanolyan látható minőség mellett jellemzően 25–35%-kal kisebb a JPEG-nél, az AVIF még kisebb, de lassabban készül. Ehhez nem feltétlenül kell bővítmény: a WordPress saját képszerkesztője a feltöltött JPEG- és PNG-képek bélyegképeit WebP vagy AVIF formátumban is el tudja készíteni.

A cikkben leírt beállítást egy cPanel tárhely teszt-webhelyén próbáltuk ki.

Mit tud a tárhely?

Az aWh cPanel szerverein a PHP képkezelője (GD) a WebP és az AVIF formátumot is írja, így a WordPress mindkettőt elkészíti. Ezt a webhely mappájában WP-CLI-vel ellenőrizheti:

cd ~/public_html
wp eval 'foreach ( [ "image/webp", "image/avif" ] as $m ) echo $m, ": ", wp_image_editor_supports( [ "mime_type" => $m ] ) ? "igen" : "nem", PHP_EOL;'

A Select PHP Version felületén az imagick bővítményt is bekapcsolhatja (PHP-bővítmények kezelése); a WordPress ezt választja a GD helyett, és nagy képeknél kevesebb PHP-memóriát használ.

Külső programot (például cwebp vagy vips) a PHP a szervereinken nem indíthat, mert az exec és a hozzá hasonló függvények biztonsági okból le vannak tiltva. A régi útmutatók parancssori konvertálót hívó kódrészletei ezért itt nem működnek; a WordPress saját képszerkesztője igen.

A WebP bekapcsolása

Hozzon létre egy must-use bővítményt a wp-content/mu-plugins/kep-formatum.php fájlban (a mu-plugins mappát hozza létre, ha nincs; a cPanel Fájlkezelő felületén is megteheti):

<?php
/**
 * Plugin Name: JPEG és PNG képek mentése WebP formátumban
 */
add_filter( 'image_editor_output_format', function ( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
    $formats['image/png']  = 'image/webp';
    return $formats;
} );

A must-use bővítmények automatikusan betöltődnek, nem kell bekapcsolni őket, és a bővítménylistában külön csoportban (Must-Use) látszanak.

Ezután egy feltöltött JPEG-ből ez lesz a tesztünkön:

kep.jpg              <- az eredeti, változatlanul megmarad
kep.webp             <- teljes méretű WebP-másolat
kep-150x150.webp
kep-300x188.webp
kep-768x480.webp
kep-1024x640.webp
kep-1536x960.webp

A WordPress a bejegyzésekbe már a WebP-változatokat teszi, a srcset is ezekre mutat. Az eredeti JPEG letölthető marad.

AVIF-hez az image/webp helyére írjon image/avif értéket. Az AVIF kisebb fájlt ad, de a kódolása lassabb, ezért nagy képek feltöltése tovább tart. A mai böngészők mindkét formátumot ismerik.

A meglévő képek

A beállítás csak az új feltöltésekre vonatkozik. A régi képek bélyegképeit WP-CLI-vel generálhatja újra:

wp media regenerate --yes

Figyelem: az újragenerálás a régi JPEG-bélyegképeket törli, és WebP-változatokat készít helyettük (a teszten a kep-300x188.jpg helyén kep-300x188.webp lett). Ha a bejegyzések tartalmában a képek méretezett címe szerepel (például kep-1024x640.jpg, ahogy a blokkszerkesztő és a klasszikus szerkesztő is beírja), ezek a címek ezután nem léteznek. A böngészők a srcset miatt többnyire a WebP-változatot töltik be, de a tartalomba írt cím 404-es hibát ad, és a régi, máshonnan hivatkozott képcímek is eltörnek. Ezért:

• először egy staging másolaton próbálja ki, és nézzen végig néhány régi bejegyzést;
• vagy hagyja a régi képeket úgy, ahogy vannak, és csak az új feltöltések készüljenek WebP-ben;
• vagy a tartalomba írt címeket a wp search-replace paranccsal írja át, próbafuttatással kezdve.

Mentés nélkül ne futtassa az újragenerálást a teljes médiatáron (WordPress mentés).

Bővítménnyel

Ha nem szeretne kódot írni, vagy a régi képeket a címük megváltoztatása nélkül szeretné WebP-ben kiszolgálni, egy képoptimalizáló bővítmény (például Converter for Media, EWWW Image Optimizer, Imagify) mellé teszi a WebP-változatot, és vagy <picture> elemmel, vagy átírási szabállyal adja a böngészőnek. Néhány dolog, amire figyeljen:

• Hol fut a konvertálás? A külső szolgáltatásra küldő bővítmények nem terhelik a tárhelyet, de a képei egy harmadik félhez kerülnek. A helyben konvertálók a tárhely erőforrásait használják; egy több ezer képes médiatár első feldolgozása a CloudLinux erőforráslimitjeibe ütközhet, ezért kis adagokban, kis forgalmú időben futtassa.
• Tárhely: minden kép és minden bélyegkép mellé egy újabb fájl kerül. Nézze meg a Lemezhasználat és a Fájlhasználat értékét a cPanel kezdőlapján (inode-ok).
• Gyorsítótár és CDN: ha a bővítmény ugyanazon a címen adja a WebP-t a JPEG-et kérő böngészőnek is (a böngésző Accept fejléce alapján), a gyorsítótárnak ezt a fejlécet is figyelembe kell vennie, különben egy régi böngésző WebP-t kaphat. A <picture> elemes megoldásnak ez nem gond.

Ha a webhely Cloudflare mögött van, a fizetős csomagok képoptimalizálása a CDN-en végzi a konvertálást, így a tárhelyen semmit nem kell beállítani.

Ellenőrzés

Nyisson meg egy oldalt a böngészőben, a fejlesztői eszközök Hálózat fülén szűrjön a képekre, és nézze meg a Típus oszlopot: webp vagy avif kell legyen. Parancssorból:

curl -s https://pelda.hu/ | grep -o 'wp-content/uploads/[^" ]*\.\(webp\|avif\)' | head -5

Ezután futtassa le újra a PageSpeed Insights mérést. A képek méretén túl a gyorsításról a WordPress gyorsításáról szóló cikk ad további tippeket.