I bildoptimeringstillägget Imagify finns möjligheten att använda sig av det moderna filformaten WebP och AVIF för visning av bilderna på din webbplats.
Detta kan göras på två olika sätt och kan ställas in i tilläggets inställningar;
1. Genom att använda omskrivningsregler, sk rewrite-regler.
2. Genom att tillägget manipulerar koden och lägger till en <picture>-tagg.
Alternativ 2 är ofta att föredra då det inte kräver någon ytterligare konfiguration men det finns tillfällen då det är bättre med alternativ 1, använda omskrivningsregler.
Fördelar med att använda omskrivningsregler och hur du ställer in det
Några anledningar är att <picture>-taggen inte kommer åt och kan byta ut bakgrundsbilder till WebP och AVIF samt att manipuleringen av koden ibland kan orsaka problem i layouten på webbplatsen.
Så här gör du
Skapa en fil i din config mapp [nginx.d/location/09-imagify]
Detta kan du göra genom att ansluta till din miljö via sftp eller ssh. Filen sparar du alltså i mappen location enl nedanstående bild.
Filen kan du med fördel skapa i anteckningar lokalt i din dator och spara som 09-imagify och sedan ladda upp till din webbplats.
Lägg in följande kod
# BEGIN Imagify: rewrite rules for webp
location ~* ^(/.+)\.(jpg|jpeg|jpe|png|gif|webp|avif)$ {
expires 365d;
add_header Vary Accept;
set $canavif 1;
if ($http_accept !~* "avif"){
set $canavif 0;
}
if (!-f $request_filename.avif) {
set $canavif 0;
}
if ($canavif = 1){
rewrite ^(.*) $1.avif;
break;
}
set $canwebp 1;
if ($http_accept !~* "webp"){
set $canwebp 0;
}
if (!-f $request_filename.webp) {
set $canwebp 0;
}
if ($canwebp = 1){
rewrite ^(.*) $1.webp;
break;
}
}
# END Imagify: rewrite rules for webp
Spara detta och starta sedan om din sajt i kundzonen. Actionsknappen stop och sedan start igen