Если у вас свой сервер, то конвертируйте изображения в webp с помощью cwebp, вот пример sh скрипта:
# cat webpconverter.sh
#!/usr/bin/env bash
# converting JPEG images
find /path/to/img/ -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;
# converting PNG images
find /path/to/img/ -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;
Потом добавляете правило в nginx-e
ap $http_accept $webp_ext {
default "";
"~image/webp" ".webp";
}
map $uri $file_ext {
default "";
"~(\.\w+)$" $1;
}
server{
...
location ~* "^(?<path>.+)\.(css|js|gif|png|jpg|jpeg|ico|ogg|ttf|woff|eot|otf|svg|woff2|webp)$" {
try_files $path$webp_ext $uri =404;
expires 30d;
}
...
}
В итоге у вас получится, что если браузер поддерживает webp, то ему отдадут webp, иначе исходный формат.