Что такое WebP и как использовать изображения WebP в WordPress

Изображения обычно являются одной из главных причин медленной загрузки веб-страниц . Они не только замедляют время загрузки, но также могут занимать много места и ресурсов на вашем сервере. Тщательный выбор типа файла и его сжатие помогает снизить скорость загрузки, но их можно оптимизировать только до тех пор, пока не ухудшится качество изображения. Другой вариант – использовать один из наиболее оптимизированных типов файлов изображений: WebP от Google.

Что такое WebP

WebP – это формат растровых изображений от Google, разработанный специально для Интернета. Он обеспечивает сжатие без потерь и с потерями, что позволяет веб-дизайнерам показывать более богатые изображения при меньших размерах файлов.

Изображения с потерями в WebP используют кодирование с предсказанием для кодирования изображения. Он уменьшает размеры файлов, просматривая соседние пиксели для прогнозирования значений, а затем только кодирует различия. Изображения с потерями до 34% меньше, чем сопоставимое изображение в формате JPEG.

Изображения без потерь в WebP восстанавливают новые пиксели, используя уже просмотренные фрагменты изображения. Если он не находит соответствия, он может использовать локальную палитру. Изображения без потерь на 26% меньше того же изображения, что и PNG. Lossless WebP поддерживает альфа-канал (прозрачность) с размером файла, который в 3 раза меньше, чем сопоставимое изображение в формате PNG.

Что такое файл WebP

Файл WebP использует данные изображения VP8 или VP8L и контейнер на основе RIFF . Используется расширение файла .webp. Библиотека libwebp является эталонной реализацией для спецификации WebP. Вы можете увидеть библиотеку в репозитории git или как tarball .

Как это изменит ваши практики веб-дизайна

Основным преимуществом WebP является небольшой размер файла, поэтому веб-страницы будут загружаться быстрее, и вы будете использовать меньше ресурсов с вашего сервера. Это также означает, что вы сможете использовать более крупные изображения с большим количеством цветов без увеличения текущей нагрузки на сервер, если ваши посетители используют браузер, который их поддерживает.

Вам не нужно быть настолько добросовестным, чтобы использовать меньшие области в ваших макетах для ваших изображений. Вы можете использовать размеры, которые подходят для дизайна, вместо того, чтобы подгонять дизайн под меньшие изображения из-за скорости страницы или времени загрузки.

Как использовать изображения WebP в WordPress

WebP изначально поддерживается в браузерах Chrome и Opera и во многих инструментах редактирования изображений. Вы все еще можете столкнуться с проблемой безопасности с WordPress. Есть несколько способов использовать WebP с WordPress. Вы можете конвертировать ваши файлы, но лучший вариант – использовать плагин.

Плагины преобразования WebP

Одно из лучших преимуществ использования изображений WebP в качестве дизайнера или разработчика заключается в том, что вам не нужно выполнять работу по созданию файлов. Вместо этого вам просто нужно установить конверсионный плагин. Вы загрузите свои обычные изображения в форматах JPEG или PNG, и плагин преобразует эти файлы в WebP для доставки изображений вашим посетителям.

Преимущество этого метода в том, что вам нужно обрабатывать только те типы файлов, к которым вы уже привыкли, и ваши посетители, которые не могут использовать WebP, все равно будут получать исходные типы файлов. Те, кто может получить тип файла WebP, увидят более быстрое время загрузки.

Другой способ – позволить вам загружать файлы WebP на ваш сайт. Этот метод не рекомендуется, так как не все браузеры поддерживают этот формат. Это означает, что некоторые из ваших посетителей не смогут просматривать ваши изображения.

Есть несколько бесплатных и премиальных плагинов, которые конвертируют изображения в WebP. Вот посмотрите на несколько бесплатных вариантов.

EWWW Image Optimizer

EWWW Image Optimizer – это бесплатный плагин с функцией преобразования WebP. Он генерирует WebP-версию ваших файлов JPEG и PNG. Он включает в себя множество параметров, таких как Apache-совместимые правила перезаписи, и альтернативный вариант перезаписи WebP. Он совместим как с кешами, так и с CDN, и работает с плагином Cache Enabler от KeyCDN.

Этот, вероятно, самый простой в использовании. Встроенные функции WebP позволяют использовать преобразование с потерями для JPEG и без потерь для PNG, и преобразование происходит автоматически. Все, что вам нужно сделать, это установить плагин и включить функцию на вкладке WebP. Никаких других настроек не требуется.

Больше информации

ShortPixel Image Optimizer

ShortPixel Image Optimizer – это бесплатный плагин, который будет конвертировать любые JPEG, PNG или GIF в WebP. Он использует сжатие с потерями и без потерь. Он также работает с плагинами кэша, которые поддерживают WebP. Он предоставляет изображения WebP браузерам, которые могут их просматривать, а другие форматы – тем, которые не могут.

Также имеется возможность добавлять изображения WebP на интерфейсные страницы с использованием HTML. Для этого вы можете использовать тег вместо обычного тега . Чтобы настроить автоматическое преобразование изображений, просто включите функцию на вкладке «Дополнительно». Вы можете восстановить изображения, если хотите.

Больше информации

WebP Express

WebP Express – это бесплатный плагин, который создает изображения размером менее половины размера JPEG. Он направляет файлы JPEG и PNG в конвертер изображений для преобразования или в уже преобразованное изображение. Работает независимо от того, как изображения попали на сервер. Он работает с медиа-библиотекой, галереями и изображениями тем, на которые ссылается CSS.

Он не работает с сервером Microsoft IIS или WAMP и не был протестирован с мультисайтом. Это требует некоторой настройки для методов преобразования, но у вас есть несколько вариантов на выбор. Изображения сначала будут использовать метод преобразования вверху, и если этот метод не пройден, он будет двигаться вниз по списку, пока не найдет метод, который работает с изображением. Вы можете перетащить их в том порядке, в котором вы хотите их использовать.

Больше информации

Opti MozJpeg Guetzli WebP

Opti MozJpeg Guetzli WebP – бесплатный плагин, созданный с учетом Google Pagespeed Insights. Для конвертации изображений используются Mozilla MozJpeg, Google Guetzli и Google WebP. Кодировщики могут быть установлены локально или вы можете использовать встроенный ssh-клиент. Он обращается к кодировщикам удаленно, используя ssh-соединение с виртуальной машиной автора.

Он может конвертировать все ваши PNG-файлы не альфа-канала в формате JPEG. Резервное копирование ваших изображений перед внесением изменений. Вы можете вернуть ваши изображения обратно в любое время.

Больше информации

Конечные мысли

Это наш взгляд на то, что такое WebP и что такое файл WebP. Этот формат значительно уменьшает размеры файлов изображений, экономя много места и сокращая время загрузки. Основным недостатком является то, что он совместим только с несколькими браузерами. К счастью, вы можете использовать плагин, который преобразует вашу текущую библиотеку в WebP для тех, кто использует совместимые браузеры, при этом обслуживая общие типы файлов для тех, которые не могут просматривать формат WebP.

WebP – это интересный формат. Так как это от Google, я ожидаю, что это в конечном счете завоевывает популярность. Это было с 2010 года, поэтому оно движется медленно. Экономия на размере файла и скорости загрузки делает целесообразным использование плагинов для конвертации изображений для тех посетителей, которые могут их использовать. Это бесплатная скорость.

Вы используете или планируете использовать изображения WebP в дизайне вашего сайта? Дайте нам знать, что вы думаете о WebP в комментариях.