Внедрите новый формат WebP в WordPress с помощью плагина WebP Express. Сожмите свои изображения до 30% без потери качества!
Скорость загрузки сайта – один из важнейших факторов для вебмастера. Сделать страницы сайта информативнее и полезней с помощью изображений – лучший вариант. Но тогда появляется проблема долгой загрузки изображений.
WebP – это современный формат изображений, который обеспечивает превосходное сжатие без потерь и с потерями для изображений в Интернете. На данный момент этот формат могут использовать 80% пользователей пользователей на основе данных сайта caniuse.com.
Глупо имея такую технологию не использовать её у себя. PageSpeed Insights говорит нам “Используйте современные форматы изображений – Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.”
JPEG 2000 и JPEG XR могут открыть меньше 20% пользователей, это пользователи IE и Safari, поэтому мы будет сжимать изображения для большинства.
Плагин WebP Express для WordPress
WebP Express – бесплатный плагин из библиотеки WordPress. Установить плагин и скачать можно по ссылке – https://ru.wordpress.org/plugins/webp-express. Плагин работает с последней версией WordPress и бесплатно оптимизирует изображения на всем сайте, даже на страницах магазина WooCommerce работает WebP.
Настройка
После установки зайдите в Настройки > WebP Express. На скришоте вы можете увидеть мои настройки плагина:
General
В разделе General > Image types to work on выберите, какие форматы плагин будет оптимизировать. Формат WebP поддерживает прозрачность, поэтому за место “Only jpegs” выберите “Both jpegs and pngs”.
В Destination folder выберите место расположение изображений нового формата:
- Mingled: при выборе «Mingled» изображения webp будут помещаться в ту же папку, что и оригинал, но только для изображений в папке Uploads. Другие изображения, например изображения тем, хранятся отдельно.
- Если вы используете WebP Express вместе с Cache enabler или Shortpixel, выберите этот параметр
- In separate folder: изображения хранятся в отдельной папке (wp-content / webp-express / webp-images / doc-root).
Redirection rules
В разделе Redirection rules есть 2 параметра.
- Redirect directly to existing converted images – Это добавит правила в .htaccess, которые перенаправляют непосредственно в существующие преобразованные файлы. Если вы не активируете этот параметр, это будет PHP-скрипт, который обрабатывает перенаправление на существующие файлы webp. Наилучшая производительность достигается путем перенаправления в .htaccess, поэтому включаем этот параметр.
- Redirect requests for non-existing webp-files to converter – правило позволяет создавать WebP версию изображения автоматически, если оно ещё не создано. То есть когда человек заходит к вам на сайт, но у изображения нет WebP версии, она автоматически сгенерируется.
Conversion
Раздел Conversion отвечает за качество и способ сжатия. Я не хотел, чтобы качество изображений падало, поэтому установил значение 100. WebP сжимает изображения без потери качества, поэтому размер файла уменьшится, а качество нет. Вы можете экспериментировать с этим значением и установить то, что Вам подходит.
Conversion method определятся автоматически на основе значения сжатия. Также здесь присутствует возможность использовать платные API, что нам не интересно.
Ставим галочку напротив Convert on upload, чтобы изображения конвертировались при загрузки. Разработчик плагина всё учел, поэтому конвертируются также миниатюры изображения.
Alter HTML
Раздел Alter HTML поможет вам решить, что делать, если браузер посетителя не поддерживает формат WebP. Я рекомендую ставить настройки как у меня – Replace image URLs. Так изображения WebP будет показываться только в поддерживаемых браузерах, проблем с отображением фото не будет.
Если изображения не отображаются, то попробуйте выбрать “Replace img tags with picture tags, adding the webp to srcset” и поставьте галочку у “Dynamically load picturefill.js on older browsers”. Тэг <picture> могут использовать более 93% пользователей.
Заключение
Теперь вы знаете, как загрузить WebP в WordPress с помощью плагина. Благодаря нему Ваши пользователи будут быстрее получать ваш контент на экраны своих устройств и ваш сайт сможет вырваться выше и получить больше положительных оценок.
В комментариях расскажите, удалось ли вам настроить WebP Express, на сколько сайт стал быстрее загружаться. Также пишите, какие инструкции, обзоры вы хотите видеть на сайте!
Команда wptuts.ru
Здравствуйте! Столкнулась с проблемой, что Chrome не грузит изображения после активации плагина. Подскажите пожалуйста, что делать?
Попробуйте сменить настройки в разделе Alter HTML, выбирая Replace img tags with picture tags, adding the webp to srcset, ставьте галочку у Dynamically load picturefill.js on older browsers
А у меня почему то не отображают зеленые галочки Conversion method ?
Галочек вообще нет?
Я веду несколько блогов и самостоятельно обновляю контент на сайтах. Можно сказать, что плагин произвел двойственное впечатление. Сначала мне казалось, что сжатые изображения отпугнут часть аудитории. Но я всё-таки решил попробовать. Скорость загрузки картинок увеличилась в разы. Оказалось, что такие изображения дают большую конверсию сайта. Страница быстрее грузится, пользователи дольше задерживаются на чтении и рассматривании материала. Качество изображений практически не страдает, если оригинал нормальный. Однозначно буду пользоваться.
Грамотный плагин, теперь прогрузка страниц происходит крайне быстро, так как на сайте было много изображений, webp решил проблему со скорость загрузки, что действительно круто и приятно, да и важно для моего сайта. Разобраться в установке же не составило труда.
WebP Express, как плагин мне понравился основательно, ведь благодаря ему прогрузка страниц происходит значительно быстрее, чем было до установки. Хотя, смею заметить мои страницы просто кишат различными изображениями. Работает плагин без крашей, что доказывает профессиональную сборку, одним словом спасибо за наводку, в наше время не так часто встретишь плагины ТОП уровня.
У меня много картинок на сайте. Искал плагин сжатия изображения, и чтобы качество картинки при этом не изменялось. Воспользовался плагином WebP. Плагин помог. Изображение сжимается и получается отличным, плюс сайт открывается намного быстрее.
Плагин оказался очень полезным для сайта, основная моя тематика – это фотографии, поэтому не у всех пользователей быстро загружаются страницы, что сами понимаете сказывается на посещаемости и времени пребывания. Установка не отняла много времени, инструкция расписана подробно. Что хочется сказать – вид у страницы после полной загрузки вообще не портится, грузится (у меня) в 2-3 раза быстрее, в целом я доволен.
Я долго искал, что-то подобное вышеупомянутому плагину и могу отметить, что помогла мне рекомендация из Google. Теперь прогрузка страниц, благодаря плагину webp стала значительно быстрее, несмотря на то что, у меня сайт направлен именно на работу с изображениями. Что же касается установки, то могу отметить, что без лишних проблем встал плагин, как родной. Главное конечно во время обновлять wordpress и тогда проблем уж точно не возникнет, это говорю по опыту и личным наблюдениям. Вообще, в наше время подобных плагинов, о котором говорится выше большое множество, надо только искать, но webp яркий представитель одного из лучших плагинов для крупных сайтов на wordpress.
Плагинов на WordPress крайне большое количество, реально, просто закачаешься от того, сколько их, но что толку то, иной раз найти нужный реально беда. У меня вот сайт в основном позиционировался на изображениях, поэтому прогружался крайне долго, но теперь, как нашел webp плагин на wordpress, данная проблема осталась в прошлом. Больше никаких долгих зависаний и это несмотря на то, что трафик у меня действительно серьезный. Работает плагин без проблем, настраивается замечательно и уже за 2 месяца пользования ни разу не было крашей или чего нибудь подобного, что доказывает, то что сборка профессиональная.
Не конвертирует плагин
Скриншоты
http://skrinshoter.ru/s/180619/CJEB1I08?a
http://skrinshoter.ru/s/180619/6nLAppXn?a
Все по инструкции делал
К сожалению такое бывает. На некоторых хостингах данные методы конвертации не доступны. Пока единственное решение – использование платных способов конвертации. Также следите за обновлениями плагина, возможно автор скоро добавит новые способы.
Я веду несколько своих блогов и признаться честно, объемные изображения сильно замедляли скорость загрузки страниц. Испробовал самые различные варианты плагинов, но как токового эффекта от них не получал. Друг посоветовал установить плагин WebP Express. Хотя от этого плагина также многого и не ожидал, но решили все же установить его. Я был поражен результатом, так как теперь страницы сайта, благодаря сжатию изображений, стали открываться существенно быстрее, а главное не во вред качеству изображений. Одним словом, результатом остался вполне доволен. Планирую этот плагин установить также и на другие свои сайты.
Пользуюсь этим плагином не долго, но уже успел оценить его преимущества. Действительно сжимает фотографии без потери качества. Кстати, спасибо автору за статью,-нашел тут кое-какие нюансы, которые меня интересовали.
я-начинающий блоггер, обновляю контент на своих сайтах самостоятельно. Раньше возникали небольшие глюки,сайты подвисали. Про плагин узнал из рекомендации Gооglе.Решил попробовать.Результат пока радует.Теперь не испытываю затруднений в размещении статей, сайты виснут гораздо реже,можно сказать,что и не виснут вообще.Что еще бы отметил,так это то,что для установки данного плагина не требуется прикладывать особых усилий.Конечно,сейчас существует огромное множество подобных плагинов,да и все они работают практически по одному принципу, но webp является наиболее ярким и качественным плагином конкретно для меня.
Данный плагин давно пыталась установить и правильно настроить. Получилось полностью это сделать только благодаря вашему описанию, спасибо за такую подробную инструкцию! Да, могу однозначно сказать, что сайт грузится намного быстрее, а качество изображения совсем не страдает. Проверяла и с компьютера и мобильного устройства. Спасибо, что делитесь полезностями)
На сайт пошёл по рекомендации Гугл – “используйте современные форматы изображений”. Теперь использую плагин и сайт быстрее грузится, проблем с ни не имею, рекомендую всем, кто понимает плюсы от использования плагина.
В течение года испробовал самые различные варианты плагинов для сжатия изображений, но наравне с преимуществами у них имелись и свои недостатки, в связи с чем приходилось от них отказываться. Но месяц назад, установил на свой сайт WebP Express, на мой взгляд этот плагин со свой задачей справляется неплохо, на данный момент недостатков у этого плагина я не заметил.
До этого момента, даже и не подозревал, что существуют плагины подобного типа. Буквально на днях установил его на сайт, после чего страницы начали загружаться гораздо быстрее.
Хочу попробовать данный плагин, поскольку Гугл ругается на картинки. Но хотелось бы знать на будущее, что эффективнее: сразу сжимать картирки до нужных размеров или пользоваться плагином?
Мы рекомендуем делать всё комплексно. Сжимайте картинки при загрузке на сайт, либо пользуйтесь плагинами для сжатия картинок. После этого настройте WebP. Так вы добьетесь оптимальной скорости загрузки у тех, чей браузер не поддерживает WebP, а также уменьшите размер картинок .webp
Добрый день, плагин работает прекрасно, но столкнулся с такой задачей, когда мне нужно разместить группу фоток не в стандартной папке загрузок /wp-content/uploads/2019/7/… а есть созданная вручную папка: /wp-content/uploads/papka/file.jpg и когда я вставляю на странице поста картинку из этой папки, то плагин не конвертирует webp версию файла, а так и оставляет показывать jpg. По всей логике плагиновский .httaccess, где все правила прописаны, ведь должен картинки во всех папках, находящихся в /wp-content/… обрабатывать и создавать переадресацию на webp версию?
Я сконвертировал сам версии файлов типа /wp-content/uploads/papka/file.webp но плагин их не подгружает во время загрузки страницы, а также показывает jpg.
Если есть идеи, как это дело решить, буду рад! Спасибо.
Так и не понял, так как автором не описано самое главное – при конвертации файлы сохраняют свои изначальные названия или им будет присвоено имя по умолчанию А1, А2, А3 и тд. Так очень важно чтоб все файлы сохранили свои изначальные названия – так как это ключи по которым эти фото ранжируются. И если сохраняются то как именно на английском и русском или конвертится все в английский в траскрипцию ?
Спасибо за хороший вопрос. Файлы сохраняются в отдельной папке (настраивается в настройках плагина), название картинки сохраняется, как у исходника. Транслитерация думаю уже настроена на сайте.
У меня ни один из методов Conversion method не дает зеленіх галочек. Что не так делаю?
Спасибо, не пойму работает плагин или нет. PageSpeed Insights по прежнему показывает что нужно использовать современные форматы.
Если у Вас есть сомнения, работает ли конвертация в WebP, то откройте консоль разработчика и сделайте поиск .webp. Также другие плагины для картинок, использование CDN, могут мешать правильной работе.
Как проверить корректность его работы в разных браузерах, включая мобильные устройства?
Можно открыть сайт в Chrome и посмотреть код страницы. Если ссылка на изображение в конце содержит .webp, то вы настроили всё верно. WebP не поддерживается браузером Safari, поэтому вы можете проверить работу сайта на iPhone (Safari), либо установить этот браузер себе на ПК.
У меня у одного картинка становится грязной в webp? Особенно явно видно это по тексту на картинке. Никакие настройки плагина не помогают. Как решить эту проблему? Ещё проблема в том, что многие хостинги не поддерживают webp в imagick, как выяснилось, только gd, может быть дело в этом?
У меня находятся файлы в другой папке, отличной от UPLOADS. Плагин их не видит.
Плагин WebP Express работает только с теми картинками, которые загружены через “медиафайлы”.
скажите если не сработает плагин, его откат вернет все в прежнее состояние? или надо бекапить сайт?
Рекомендуется сделать бэкап, если вы сомневаетесь, подойдет ли плагин для вашего сайта.
Это для новых картинок, а как на старых страницах перезаписать на новый формат?
В настройках плагина можно запустить процесс перегенерации картинок.
А вот если к примеру с медиатеки изображение удаляется, то удаляется ли автоматически его .webp копия с папки плагина?