AVIF ja WebP ovat nykyaikaisempia tiedostoyyppejä, jotka latautuvat nopeammin kuin vanhemmat JPG-, PNG- ja GIF-kuvat. Sivustoa voidaan siis osaltaan nopeusoptimoida kuvatyypin valinnalla.
AVIF on avoimen lisenssin tiedostomuoto, joka julkaistiin vuonna 2019. WordPress on tukenut AVIF-formaattia natiivisti versiosta 6.5 lähtien. Seravolla on tuettuna AVIF-formaatin lukeminen, mutta kirjoitustuki puuttuu toistaiseksi.
WebP on Googlen kehittämä tiedostomuoto kuville, joka julkaistiin vuonna 2010. WordPress on tukenut myös WebP-formaattia natiivisti versiosta 5.8 lähtien. Seravolla on tuettuna sekä luku- että kirjoitustuki WebP-formaatille.
WebP- ja AVIF-kuvien käyttöönotto WordPressissä
Tuen AVIF- ja WebP-kuville voi aktivoida erillisellä lisäosalla. Lisäksi tarvitaan palvelimelle tehtävä nginx-konfiguraatio.
Huomio!
WebP-kuvien käyttöönotto varjoympäristössämme voi johtaa varjon kuvien rikkoutumiseen. Tällöin suosittelemme WebP-kuvien ottamista pois käytöstä varjoympäristön puolella.
Käyttöönotto Converter for Media -lisäosalla
Yksi tapa tarjota kuvia näissä formaateissa on käyttää Converter for Media -lisäosaa. Huomioi kuitenkin, että kyseinen lisäosa tukee AVIF-formaattia vain PRO-versiossa.
Kun olet asentanut ja aktivoinut lisäosan, luo tiedosto webp.conf kansioon /data/wordpress/nginx ja kopioi seuraava konfiguraatio siihen:
# BEGIN Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
set $ext_avif "";
}
set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
set $ext_webp "";
}
location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
add_header Vary Accept;
add_header Cache-Control "private";
expires 365d;
try_files
/wp-content/uploads-webpc/$path.$ext$ext_avif
/wp-content/uploads-webpc/$path.$ext$ext_webp
$uri =404;
}
# END Converter for Media
Kun olet luonut tiedoston, suorita komento wp-restart-nginx käynnistääksesi nginx-palvelimen uudelleen ja jatka lisäosan käyttöönottoa.