Раздача webp картинок в Nginx
Как то раз когда на одном сайте был превышен лимит канала трафика в 40 Мегабит/с и сайт начал жутко тормозить - я задумался, а что можно сделать да бы сэкономить и не платить больше да ещё чтоб не тормозило?
И я нашел решение - это gzip офлайн.
Но он картинки jpg и png сжимает всего на 1%, а swg сжимает очень хорошо. Я начал искать дальше и наткнулся на альтернативные форматы картинок и среди них был webp формат и я остановился на нём.
Экономия трафика составляет в среднем 26%.
Сначала установим webp.
sudo apt install webp
После этого этим скриптом можно сжимать всё что есть в папке /var/www/748762-murkir/data/www/dj-x.info/uploads
find /var/www/748762-murkir/data/www/dj-x.info/uploads -type f -regextype posix-extended -iregex '.*\.(png|jpg|jpeg)' -exec cwebp -q 75 '{}' -o '{}'.webp \;
Рядом с оригинальными картинками png jpg jpeg будут созданы дубликаты в новом формате webp.
file.png
file.png.webp
После того как переконвертировали все картинки нужно ещё добавить немного в конфигурацию Nginx.
Вставляем его выше вашего кеширования.
# Кеширование
set $webp_suffix "";
if ($http_accept ~* "webp") {
set $webp_suffix ".webp";
}
location ~* \.(jpeg|jpg|png)$ {
add_header Vary "Accept-Encoding";
try_files $uri$webp_suffix $uri $uri/ =404;
add_header Cache-Control public;
access_log off;
expires 30d;
}
Вот как это будет работать. Как видно в Firefox и EDGE этот способ не работает потому что они не передают на сервер информацию в http_accept о том что они поддерживают webp.
Всё! Теперь Nginx будет раздавать картинки в формате webp тем браузерам которые его поддерживают - те которые не поддерживают будут грузить jpg и png.
Важно - расширение при этом меняться не будет и ссылки менять не нужно и переадресации тоже не будет - тип файла только будет меняться и размер.
content-type image/webp.
В браузере EDGE есть поддержка webp но для этого нужно скачать с магазина расширение для изображений
Webp Image Extensions.
Но чтобы это работало в EDGE и Firefox нужно вставлять ссылки на картинки так:
JPG
<picture>
<source type="image/webp" srcset="https://annalitvinova.pro/uploads/mini/PIC-20190428-185318.jpg.webp">
<source type="image/jpeg" srcset="https://annalitvinova.pro/uploads/mini/PIC-20190428-185318.jpg">
<img src="https://annalitvinova.pro/uploads/mini/PIC-20190428-185318.jpg" alt="Anna Litvinova">
</picture>
PNG
<picture>
<source type="image/webp" srcset="https://dj-x.info/foto/webp-ON-OFF.png.webp">
<source type="image/png" srcset="https://dj-x.info/foto/webp-ON-OFF.png">
<img src="https://dj-x.info/foto/webp-ON-OFF.png" alt="webp-ON-OFF">
</picture>
Дальше будет продолжение ели ещё что то найду.
Webp конвертер для Windows
Gzip сжатие в Nginx
Комментарии 1