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

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

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

Рекомендую ознакомиться : Оптимизация изображений для сайта

В этой статье мы покажем вам, как легко использовать изображения WebP в WordPress.

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

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

WebP — это новый формат файлов для изображений, используемых в Интернете. При использовании формата изображений WebP ваши изображения будут на 25-34% меньше по размеру файла, чем PNG и JPEG, без потери качества.

Если изображения замедляют работу вашего веб-сайта, преобразование их в формат WebP может улучшить  производительность сайта.

Поскольку WebP — это новый формат файлов, он пока поддерживается не всеми браузерами. Однако большинство современных браузеров, таких как Google Chrome, Firefox и Microsoft Edge, поддерживают изображения WebP.

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

Изображения WebP могут помочь вам ускорить работу вашего сайта WordPress . Рекомендуется использовать вместе с плагином кеширования WordPress, CDN и т. Д.

По умолчанию WordPress не поддерживает изображения WebP, и при загрузке изображения WebP будет отображаться ошибка.

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

Если на вашем сайте используется много изображений, и они замедляют работу вашего блога WordPress , вам обязательно стоит подумать об использовании изображений WebP.

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

Метод 1. Использование изображений WebP в WordPress с оптимизатором EWWW

Плагин EWWW Image Optimizer — один из лучших плагинов сжатия изображений WordPress, который позволяет оптимизировать изображения WordPress. Он также поддерживает изображения WebP и может автоматически отображать их в поддерживаемых браузерах.

Первое, что вам нужно сделать, это установить и активировать плагин EWWW Image Optimizer . Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress .

После активации перейдите на страницу « Настройки» »EWWW Image Optimizer, чтобы настроить параметры плагина. Вас встретит мастер установки, но вы можете щелкнуть ссылку «Я знаю, что делаю», чтобы выйти из мастера.

EWWW Image Optimizer

На следующем экране вы увидите множество вариантов плагина. Прокрутите вниз и установите флажок рядом с параметром «Конверсия WebP».

установите флажок

После этого нажмите кнопку «Сохранить изменения», чтобы сохранить настройки.

Затем вам нужно прокрутить вниз до раздела WebP Conversion. Плагин теперь покажет вам некоторые правила перезаписи с красным изображением предварительного просмотра.

Вам нужно нажать кнопку «Вставить правила перезаписи», и плагин автоматически попытается вставить эти правила перезаписи в ваш файл .htaccess .

нажать кнопку «Вставить правила перезаписи»

Если плагин успешно добавляет эти правила, то красный предварительный просмотр изображения станет зеленым с текстом «WebP».

изображения станет зеленым

Иногда плагин не может вставить правила. В этом случае вам необходимо скопировать правила перезаписи со страницы настроек плагина и вручную вставить их в конец файла .htaccess.

Когда вы закончите, вернитесь на страницу настроек плагина и снова нажмите кнопку «Сохранить изменения». Если изображение предварительного просмотра становится зеленым, это означает, что вы успешно включили доставку изображений WebP на своем сайте WordPress .

Метод 2. Использование изображений WebP в WordPress с Imagify

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

Первое, что вам нужно сделать, это установить и активировать плагин Imagify . Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress .

После активации вам необходимо перейти на страницу « Настройки» »Imagify, чтобы настроить параметры плагина. Отсюда. нажмите кнопку «Создать бесплатный ключ API», чтобы продолжить.

Создать бесплатный ключ API

Вам будет предложено ввести рабочий адрес электронной почты, после чего вы сможете проверить свой почтовый ящик на наличие электронного письма, содержащего ваш ключ API. Скопируйте и вставьте ключ на страницу настроек плагина и нажмите кнопку «Сохранить изменения».

Далее вам нужно прокрутить вниз до раздела Оптимизация. Там вам нужно проверить параметры рядом с параметрами «Создавать веб-версии изображений» и «Отображать изображения в формате веб-страниц на сайте».

Создавать веб-версии изображений

Ниже вы можете выбрать один из двух методов доставки для отображения изображений WebP в WordPress. Первый — это метод .htaccess, а второй — с помощью тега <picture>.

Метод .htaccess работает быстрее, но он не работает, если вы используете службу CDN . Метод тега <picture> работает и с CDN, но может нарушить работу некоторых тем WordPress.

Вы можете выбрать любой из них, который подходит для вашего сайта. После этого нажмите внизу кнопку «Сохранить и перейти к массовому оптимизатору».

Нажмите кнопку оптимизации

Если у вас много изображений, это может занять некоторое время. Не волнуйтесь, вы можете закрыть страницу и вернуться к ней позже, потому что закрытие страницы не остановит процесс оптимизации изображения.

Тестирование изображений WebP в WordPress

После завершения оптимизации вы можете посетить страницу или публикацию, содержащую несколько изображений. Наведите указатель мыши на изображение и щелкните правой кнопкой мыши, чтобы выбрать «Открыть изображение в новой вкладке».

Это откроет изображение в новой вкладке браузера, и вы сможете увидеть расширение .webp в адресной строке.

Если статья  «Как использовать изображения WebP в WordPress»  вам понравилась, то стоит поделиться с друзьями? Тогда, нажмите одну (можно и больше) из кнопок соц. сетей. Появились вопросы , пишете в комментариях .

close

Получайте обновления блога прямо на свой почтовый ящик!

Leave a Reply