Привет, коллеги! И снова пост касается оптимизации изображений - как использовать на сайте WordPress картинки/изображения в формате WebP? Для изображений формата WebP используется более эффективное сжатие. И поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG. Как загрузить WebP в WordPress? Загружать изображения формата WebP в WordPress можно, начиная с версии WordPress 5.8.
WordPress поддерживает самые популярные форматы графических файлов, в том числе JPEG, PNG, GIF и ICO, а формат изображений WebP в этот список добавлен совсем недавно. Наконец, то WebP поддерживается во всех основных браузерах (Opera, Chrome, Edge, Safari и Firefox) и поэтому большинство сайтов могут начать использовать их уже сегодня.
Использование изображений WebP в WordPress
На данный момент вы можете загружать и использовать изображения WebP в WordPress так же, как сегодня используете изображения в формате JPEG или PNG (конечное, если ваш хостинг поддерживает WebP). Переход на формат WebP для ваших изображений улучшит производительность вашего сайта WP и улучшит качество обслуживания посетителей.
Изображения WebP в среднем примерно на 30% меньше, чем их эквиваленты в формате JPEG или PNG, что приводит к тому, что сайты работают быстрее и используют меньшую полосу пропускания.
Согласно caniuse.com/webp, WebP поддерживается всеми современными браузерами.
Изображения WebP поддерживают сжатие с потерями и без потерь, а также анимированный формат и поддержку прозрачных изображений. В WordPress формат WebP без потерь поддерживается только тогда, когда ваш хостинг-сервер использует Imagick (библиотека PHP).
Для поддержки WebP в медиа-библиотеке необходимо, чтобы библиотека обработки изображений вашего веб-сервера (WordPress поддерживает как Imagick, так и LibGD) поддерживала формат WebP. К счастью, эти библиотеки уже давно поддерживают WebP, поэтому поддержка широко доступна.
Я использую хостинг Beget и поэтому загрузил картинку в современном формате WebP на сайт ВордПресс без проблем:
Если ваш веб-сервер не поддерживает WebP, вы увидите сообщение об ошибке при попытке загрузить изображение WebP. Если у вас не получается загрузить картинку в новом формате WebP на свой сайт ВордПресс, то попробуйте плагин Support WebP.
Плагин Support WebP (Поддержка WebP) для WordPress
Этот плагин поможет вам загрузить изображение формата WebP в медиа-библиотеку WordPress независимо от темы. То есть, работает с любой темой.
Плагин даёт возможность использовать изображение в формате WebP на сайте ВордПресс. Вам не нужно ничего делать, только установить и активировать плагин через админку. После этого, перейдите к медиафайлам из панели управления WordPress, и вы можете загружать изображения WebP.
Загружать и использовать изображения WebP на новом сайте WordPress это - круто, но что делать если сайту уже несколько лет и картинок (в другом формате) скопилось уже тысячи? Как их преобразовать / конвертировать в формат WebP? Для этого, нужен специальный плагин. Об этом будет сказано ниже. А пока, инструмент редактирования изображений которые поддерживает экспорт в WebP.
Создание изображений WebP для сайта WP
Используйте веб-инструмент, такие как . Меньшие изображения означают более быстрое время загрузки. Squoosh может уменьшить размер файла и сохранить высокое качество. Загрузите своё изображение, настройте параметры и скачайте его на свой компьютер:
Как только вы сохраните свои изображения в качестве WebP, загрузите в WordPress и используйте их, как любое другое изображение.
Как конвертировать изображения WebP в WordPress
Вам просто нужно использовать плагин. С помощью плагина можно автоматически конвертировать все картинки на сайте ВордПресс в современный формат WebP. Таким образом, мы обеспечим автогенерацию изображения WebP, вместо PNG / JPEG, для браузеров поддерживающих WebP. А которые не поддерживают WebP мы отправим изображения в формате jpeg и png. Хотя на сегодняшний день формат WebP поддерживается большинством современных браузеров.
Google активно продвигает WebP и будет продолжать это делать. Хорошим решением будет наличие нескольких форматов изображений и выдача нужного типа изображения по ответу браузера — поддерживает WebP или нет.
Да, это приведёт к увеличению количества файлов и заполнения дискового пространства, но даст определенные преимущества перед теми, кто не пользуется новыми форматами.
Будет лучший рейтинг в поиске Google (эффективность учитывается поисковиком Google). Положительное влияние наличия формата WebP на сайте на поисковую выдачу уже замечено.
Конвертировать изображения в формат WebP - лучшая альтернатива JPEG и PNG. Формат WebP предлагает превосходное качество картинки и уменьшает размер файла для ускорения загрузки сайта на WP. Для сайта Вордпресс есть WebP плагин рекомендуемый Google PageSpeed Insights.
Для начала делаем анализ сайта с помощью инструмента PageSpeed Insights. Смотрим отчёт. Видим такую рекомендацию в разделе Оптимизация: Используйте современные форматы изображений. Открываем вкладку и видим решение для сайта WordPress - чтобы загружаемые изображения автоматически конвертировались в формат WebP, надо использовать специальный плагин или сервис.
Google обновил инструмент PageSpeed Insights и стало намного проще узнать с помощью каких модулей можно решить ту или иную проблему. Нажимаем ссылку Плагин:
Откроется страница плагинов с меткой convert webp. И видим кучу плагинов:
Выбирайте подходящий. Как конвертировать в WebP все изображения WordPress с помощью плагина? Например, посмотрим модуль OptiPic images optimization.
Плагин OptiPic CDN для WordPress
Плагин OptiPic CDN – простое решение проблемы "Используйте современные форматы изображений" согласно рекомендациям Google Pagespeed Insights. Он автоматически конвертирует изображения в современный формат WebP (для браузеров, которые поддерживают WebP). А для браузеров, которые не поддерживают WebP, OptiPic оптимизирует (сжимает) старые форматы png и jpeg.
Дополнительными преимуществами OptiPic CDN является то, что он кэширует изображения в соответствии с требованиями Google, ускоряет их загрузку в браузере, а также защищает авторство картинок через мета-теги EXIF и IPTC.
Видео инструкция по установке и настройке плагина OptiPic CDN для WordPress:
Дальше нас интересует популярный плагин WebP Express WordPress. Перейдём непосредственно к WebP Express. Я его тоже использую в блоге WordPress Мания.
WordPress плагин WebP Express
WebP Express - для высококачественной оптимизации изображений на сайте WordPress. Плагин WebP Express обеспечивает авто-генерацию изображения формата WebP вместо jpeg/png для браузеров поддерживающих WebP. Работает со всеми картинками (изображения медиабиблиотеки, гарелереи, изображения темы и так далее):
С помощью бесплатного плагина WebP Express вы можете автоматически создавать сгенерированные изображения WebP в браузерах, которые поддерживают WebP и в то же время предоставлять файлы JPEG / PNG пользователям Safari.
Почти 4 из 5 мобильных пользователей используют браузер, который способен отображать изображения webp. Тем не менее, на большинстве веб-сайтов, они обслуживаются jpeg изображений, которые, как правило, вдвое больше размера изображений webp для данного качества. Какая трата пропускной способности! Этот плагин был создан, чтобы помочь исправить эту ситуацию.
Очень легко, администраторы WordPress могут размещать на своих сайтах автоматически генерируемые изображения WebP в браузерах, которые поддерживают его. И в то же время, обслуживая файлы jpeg и png в браузерах, которые не поддерживают формат WebP. Plugin использует библиотеку WebP Convert для преобразования изображений в WebP на сайте ВордПресс.
WebP Express настройка плагина
Как использовать WebP Express? Да очень просто. Первым делом нужно установить и активировать plagin стандартным способом, из админки. Главное в WebP Express - это правильно настроить его. После активации плагина в админ панели Настройки - пункт WebP Express.
Очень странно, указано что, переведён на русский, но родного ни строчки, сплошной английский. Не беда, браузер переведёт. Хостинг у меня использует NGINX и поэтому я настроил плагин так. Раздел Operation mode и General:
Далее, настройки в .htaccess rules for webp generation:
В разделе Conversion можно оставить всё по умолчанию. Если хотите конвертировать изображения при загрузке в формат webp тогда поставьте галочку напротив Convert on upload:
И последнее по настройкам. Отметьте галочками, как показано на снимке. Первый вариант: галочки в Replace <img> tags with <picture> tags, adding the webp to srcset и Dynamically load picturefill.js on older browsers работает с кэшированием WordPress. Отлично работает с кэшированием страниц, потому что все браузеры обслуживают один и тот же HTML:
Второй вариант: не работает с кэшированием страниц если вы не используете плагин Cache Enabler , который может поддерживать две кэшированные версии каждой страницы:
Правила перезаписи будут активированы при первом нажатии волшебной кнопки "Сохранить настройки" (Save settings).
После этого, можно нажать кнопку Bulk convert (Массовое преобразование) в разделе Conversion и дождаться пока все ваши картинки конвертируются в формат WebP. У меня много скриншотов / изображений в данном блоге и поэтому я ждал преобразования около трёх часов.
Как будет всё готово, то нажмите кнопку - Сохраните настройки и установите новые правила.htaccess.
Все правила перенаправления будут сохранены в вашем файле .htaccess.
Как проверить поддержку WebP в браузере?
Следующий шаг после настроек и конвертации всех ваших изображений - это проверка его работы в различных браузерах. Открываете сайт в браузере, по картинке кликаете правой кнопкой мыши и выбираете "Просмотреть код":
Или чтобы убедиться, что плагин работает, выполните следующие действия:
- Откройте страницу сайта в браузере, который поддерживает WebP, например, в Google Chrome.
- Кликнете страницу правой кнопкой мыши и выберите Посмотреть код.
- Перейдите на вкладку Сеть.
- Обновите страницу.
- Найдите в списке изображение jpeg или png. В столбце Тип должно быть указано WebP:
И так друзья, проверьте снова сайт инструментом PageSpeed Insights. И вы увидите что, рекомендация - Используйте современные форматы изображений - исчезла:
Вот, как то, так. Теперь вы знаете как использовать в WordPress формат изображений WebP.
В будущем разработчики WordPress планируют добавить возможность конвертации изображений в формат WebP для загруженных картинок. Пока такой возможности нет. Также они наблюдают за ещё более современными форматами, такими как AVIF и JPEGXL, которые улучшат сжатие и ещё больше сократят ресурсы, необходимые для сжатия.
В заключение
На данный момент не существует другого формата изображения или инструмента оптимизации изображений для Интернета, который мог бы достичь меньшего размера файла без заметной потери качества, как это может сделать WebP.
Преимущество от внедрения WebP в WordPress заключается в уменьшении размера файлов изображений на 30%.
Будем надеяться, что в будущем WordPress представит конвертацию в WebP уже загруженных изображений. Пока это не произойдет, я рекомендую использовать специальные плагины WebP, которые могут помочь вам ипользовать изображения WebP на вашем веб-сайте ВордПресс. Тем самым, вы значительно ускорите загрузку страниц своего сайта на ВП. А это важно для продвижения.
Вот пожалуй и всё, друзья. До новых встреч. Удачи всем без исключения. Пока, пока!
У меня хостинг не поддерживает Imagick, точнее его конфигурация не поддерживает webp. Из-за чего, я подозреваю, при работе этого плагина картинки получаются грязными и нечёткими, поэтому мне нужен какой-то иной вариант. А ещё хостинг не даёт плагинам возможность записи правил в .htaccess
Смените хостинг, раз столько ограничений.
Какой используете вы, с поддержкой данных расширений для PHP, что на скрине в статье? У вас картинки не становятся грязными, не теряют в качестве, особенно jpeg? Мне никакие настройки данного плагина не помогли, считаю, что дело в расширениях PHP, у меня только gd.
Мой хостинг, как выяснилось ещё ничего, некоторые другие поддерживают только gd и вообще плохо относятся к клиентам, что выяснилось в первый же день тестового периода.
А какой у вас хостинг? Если конечно не секрет.