WebP для картинок на сайте

В тесте для сайтов Page Speed Insights от Google есть рекомендация перевести все изображения в формат WebP. Формат разработали в Google, он открытый и основан на уже известном кодеке и форматах. Пользователи раньше не любили WebP, потому что не понимали как смотреть сохранённые картинки в устаревших программах.

В чём же фишка и почему Google рекомендуют переходить на него? - JPG, GIF и PNG используют алгоритмы компрессии изображений, разработанные в прошлом веке. - WebP основан на эффективном видеокодеке VP8, который разработали для сжатия потоков видео. - Кодек пытается предсказать, какого цвета будут следующие пиксели и кодирует только отклонения от предсказания. Он просто старается не записывать информацию обо всех пикселях. - Лучше учитывает несовершенство человеческого зрения и делает картинку проще для кодирования с разницей незаметной для зрителя. - Поддерживает полупрозрачность, как PNG. - Компактнее хранит метаданные и меньше места тратит на технические заголовки файлов.

Визуально неотличимые файлы получаются на 20-35% меньше, чем традиционные JPG и PNG. На многих сайтах картинки составляют большую часть веса, поэтому эта экономия значительно ускоряет загрузку.

Чтобы WebP заработал на моём WordPress сайте, нужно проверить несколько вещей: - WebP поддерживается веб-сервером — для Caddy ничего делать не нужно, в NGINX или Apache2 я бы проверил поддержку mime-type. - WebP поддерживается сайтом — WordPress умеет распознавать WebP-файлы при загрузке. - Конвертировать уже загруженные картинки в WebP — я использую плагин EWWW Image Optimizer. Он бесплатно конвертирует все старые JPG прямо на сервере за пару минут. - Подменить старые форматы на новый в опубликованных постах. Для этого включаю автозамену картинок в том же плагине.

Всё, на сайте работает WebP!

❤️ Жми на сердечко, если интересно ⚡️ Жми на молнию, если узнал новое 🧑‍💻 Жми на ботана, если настраивал WebP