Pogost predlog PageSpeed Insights: „Prikazuj slike v sodobnih oblikah”. WebP je pri enaki vidni kakovosti običajno 25–35 % manjši od JPEG, AVIF še manjši, a se pripravlja počasneje. Za to ni nujno potreben vtičnik: lastni urejevalnik slik WordPress zna sličice naloženih slik JPEG in PNG narediti tudi v obliki WebP ali AVIF.

Nastavitev, opisano v članku, smo preizkusili na testnem spletnem mestu gostovanja cPanel.

Kaj zmore gostovanje?

Na strežnikih cPanel aWh upravljalnik slik PHP (GD) zapisuje oblike WebP in AVIF, zato WordPress pripravi obe. To lahko preveriš v mapi spletnega mesta z WP-CLI:

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

V vmesniku Select PHP Version lahko vklopiš tudi razširitev imagick (upravljanje razširitev PHP); WordPress jo izbere namesto GD in pri velikih slikah porabi manj pomnilnika PHP.

Zunanjega programa (na primer cwebp ali vips) PHP na naših strežnikih ne more zagnati, ker so exec in podobne funkcije iz varnostnih razlogov onemogočene. Odrezki kode iz starih vodnikov, ki kličejo pretvornik iz ukazne vrstice, zato tu ne delujejo; lastni urejevalnik slik WordPress pa deluje.

Vklop WebP

V datoteki wp-content/mu-plugins/kep-formatum.php ustvari vtičnik must-use (mapo mu-plugins ustvari, če je ni; to lahko narediš tudi v vmesniku Upravitelj datotek v cPanelu):

<?php
/**
 * Plugin Name: Shranjevanje slik JPEG in PNG v obliki WebP
 */
add_filter( 'image_editor_output_format', function ( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
    $formats['image/png']  = 'image/webp';
    return $formats;
} );

Vtičniki must-use se naložijo samodejno, ni jih treba vklopiti, na seznamu vtičnikov pa so vidni v ločeni skupini (Must-Use).

Nato iz naložene datoteke JPEG v našem preizkusu nastane tole:

kep.jpg              <- izvirnik, ostane nespremenjen
kep.webp             <- kopija WebP polne velikosti
kep-150x150.webp
kep-300x188.webp
kep-768x480.webp
kep-1024x640.webp
kep-1536x960.webp

WordPress v prispevke že postavi različice WebP, tudi srcset kaže nanje. Izvirni JPEG ostane prenosljiv.

Za AVIF namesto image/webp vpiši vrednost image/avif. AVIF da manjšo datoteko, vendar je njegovo kodiranje počasnejše, zato nalaganje velikih slik traja dlje. Današnji brskalniki poznajo obe obliki.

Obstoječe slike

Nastavitev velja le za nova nalaganja. Sličice starih slik lahko znova ustvariš z WP-CLI:

wp media regenerate --yes

Pozor: ponovno ustvarjanje stare sličice JPEG izbriše in namesto njih naredi različice WebP (v preizkusu je namesto kep-300x188.jpg nastal kep-300x188.webp). Če je v vsebini prispevkov naveden naslov pomanjšane slike (na primer kep-1024x640.jpg, kot ga vpišeta urejevalnik blokov in klasični urejevalnik), ti naslovi nato ne obstajajo. Brskalniki zaradi srcset večinoma naložijo različico WebP, naslov v vsebini pa vrne napako 404, pokvarijo pa se tudi stari naslovi slik, na katere kažejo drugje. Zato:

• najprej preizkusi na testni kopiji (staging) in preglej nekaj starih prispevkov;
• ali pusti stare slike, kot so, in naj se v WebP pripravljajo le nova nalaganja;
• ali naslove v vsebini prepiši z ukazom wp search-replace, začni s poskusnim zagonom.

Brez varnostne kopije ponovnega ustvarjanja ne zaganjaj na celotni knjižnici predstavnosti (varnostna kopija WordPress).

Z vtičnikom

Če ne želiš pisati kode ali bi stare slike rad stregel v WebP brez spremembe njihovega naslova, vtičnik za optimizacijo slik (na primer Converter for Media, EWWW Image Optimizer, Imagify) različico WebP postavi poleg in jo brskalniku da z elementom <picture> ali s pravilom prepisovanja. Nekaj stvari, na katere pazi:

• Kje teče pretvorba? Vtičniki, ki pošiljajo zunanji storitvi, ne obremenjujejo gostovanja, tvoje slike pa pridejo k tretji osebi. Lokalni pretvorniki uporabljajo vire gostovanja; prva obdelava knjižnice predstavnosti z več tisoč slikami lahko trči ob omejitve virov CloudLinux, zato jo zaganjaj v majhnih odmerkih, v času z malo prometa.
• Prostor: ob vsako sliko in vsako sličico pride še ena datoteka. Na začetni strani cPanela poglej vrednosti Poraba diska in Poraba datotek (inodi).
• Predpomnilnik in CDN: če vtičnik na istem naslovu WebP da tudi brskalniku, ki zahteva JPEG (na podlagi glave brskalnika Accept), mora predpomnilnik upoštevati tudi to glavo, sicer lahko star brskalnik dobi WebP. Za rešitev z elementom <picture> to ni težava.

Če je spletno mesto za Cloudflare, optimizacija slik plačljivih paketov pretvorbo opravi na CDN, zato na gostovanju ni treba ničesar nastaviti.

Preverjanje

Odpri stran v brskalniku, na zavihku Omrežje razvijalskih orodij filtriraj slike in poglej stolpec Vrsta: biti mora webp ali avif. Iz ukazne vrstice:

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

Nato znova zaženi meritev PageSpeed Insights. Poleg velikosti slik da več nasvetov za pospešitev članek o pospešitvi WordPressa.