В тесте для сайтов 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!