TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

5

Google – доминирующая поисковая система среди англоговорящих пользователей. В связи с этим владельцы сайтов WordPress серьезно следуют рекомендациям и возможностям, показанным в инструменте Google PageSpeed ​​Insights. Одним из популярных предупреждений в инструменте PageSpeed ​​является исправление изображений, передаваемых в традиционном формате на серверные изображения в форматах следующего поколения. В этой статье мы объясним, как исправить это предупреждение на сайтах WordPress, чтобы оптимизировать ваши изображения.

По теме: Как исправить кумулятивный сдвиг макета в WordPress?

Предупреждение в Google PageSpeed ​​Insights

Перейдите на страницу инструмента Google PageSpeed ​​Insights и проверьте URL-адрес своей веб-страницы. Вы должны увидеть возможность, показывающую «Серверные изображения в форматах следующего поколения», как показано ниже. Вы можете увидеть потенциальную экономию размера для каждого изображения и предполагаемую экономию времени загрузки страницы.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Предупреждение о скорости загрузки PageSpeed ​​Обслуживайте изображения в форматах следующего поколения

Примечание: Google говорит, что это возможность и не повлияет на оценку производительности PageSpeed. Однако удаление этого предупреждения значительно увеличивает счет в реальности.

Форматы изображений Next-Gent

Прежде чем мы продолжим, вы должны понять форматы изображений. Существует три традиционных и популярных формата изображений:

  • Joint Photography Experts Group (JPEG или JPG) – поддерживает сжатие с потерями
  • Portable Network Graphics (PNG) – поддерживает прозрачное сжатие без потерь и замену GIF
  • Формат обмена графикой (GIF) – формат растрового изображения поддерживает зацикливание нескольких кадров.

Теперь для веб-сайтов рекомендуются новые форматы следующего поколения:

  • WebP – разработан Google для лучшего сжатия
  • JPEG 2000 – улучшение по сравнению со стандартами JPEG в сжатии изображений
  • JPEG XR – формат расширенного диапазона JPEG, разработанный Microsoft

Вы можете проверить галерею Google, чтобы визуально сравнить различные изображения. Форматы следующего поколения помогают значительно уменьшить размер изображений, тем самым увеличивая скорость загрузки страницы. Согласно Википедии, 92% браузеров поддерживают формат WebP, что делает его многообещающей заменой традиционному формату. Поэтому вам нужно начать использовать формат WebP, чтобы избавиться от предупреждений об отображении изображений в форматах следующего поколения в инструменте PageSpeed ​​Insights.

Преобразование форматов изображений

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

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

Поскольку Google является владельцем формата WebP, многие плагины поддерживают преобразование традиционных изображений в формат WebP. Здесь мы объясним, как преобразовать ваши изображения в WebP и исправить «показывать изображения в формате следующего поколения» в инструменте PageSpeed ​​Insights.

Плагины WebP для WordPress

Для преобразования WebP доступно несколько популярных плагинов.

Оптимизатор SG для SiteGround

Если вы размещаете на SiteGround, лучший вариант – использовать плагин SG Optimizer. Это будет работать из коробки для преобразования и обслуживания изображений WebP с вашего сервера. Вы можете выбрать уровень сжатия, чтобы контролировать качество преобразованных изображений, сохраняя при этом все исходные изображения. Ознакомьтесь с нашей предыдущей статьей о том, как обслуживать изображения WebP в SiteGround.

  • Вы можете просто включить опцию «Генерировать WebP копии новых изображений» в разделе «SG Optimizer> Оптимизация изображений».
  • Нажмите кнопку «Массовое создание файлов WebP», чтобы сгенерировать изображения WebP для всех существующих изображений с уровнем сжатия без потерь или с заранее заданным уровнем сжатия с потерями.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Опция WebP в плагине SG Optimizer

Предложение SEO: оптимизируйте свой сайт с помощью специальной 14-дневной бесплатной пробной версии Semrush Pro.

Smush Pro

Smush – еще один популярный плагин для сжатия изображений с более чем 1 миллионом активных установок. Тем не менее, WebP – это опция премиум-класса в этом плагине, и вы должны платить подписку 5 долларов в месяц (годовой план) за использование этой функции.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Вариант Smush Pro WebP

Автоматическая оптимизация

Этот плагин предлагает оптимизацию изображений на лету с преобразованием WebP с помощью службы ShortPixel CDN. Хотя это хороший вариант сочетания CDN и WebP, есть одна загвоздка. У вас есть ограничение на бесплатное обслуживание до 100 изображений в месяц. Если вам нужно больше, вы должны платить 3,99 доллара в месяц, чтобы начать премиум-план до 5000 изображений. Это будет дорогостоящим вариантом, если вы захотите сжать и обслужить большое количество изображений. Если вы хотите протестировать автоматическую оптимизацию, после установки и активации плагина перейдите в раздел «Настройки> Автоматическая оптимизация> Изображения».

  • Установите флажок «Оптимизировать изображения».
  • Выберите уровень оптимизации изображения: глянцевое, без потерь или с потерями.
  • Установите флажок «Загрузить WebP или AVIF в поддерживаемых браузерах?»
  • Включить "Ленивую загрузку изображений?" флажок.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Настройки WebP в плагине Autoptimize

Нажмите кнопку «Сохранить изменения» и протестируйте инструмент PageSpeed ​​Insights на своем сайте. Вы должны увидеть, что предупреждение «Показывать изображения в форматах следующего поколения» исчезло. Однако вы начнете видеть предупреждающее сообщение в панели администратора WordPress о том, что ваша квота ShortPixel используется, и с просьбой обновить план.

Бесплатные плагины WebP

К счастью, доступно несколько бесплатных плагинов, таких как WebP Express и WebP Converter for Media. В этой статье мы объясним процесс с плагином WebP Converter for Media.

Установите плагин WebP Converter for Media

Войдите в панель администратора WordPress и перейдите в раздел «Плагины> Добавить». Введите «webp» в поле поиска, чтобы отфильтровать результаты и найти подключаемый модуль WebP Converter for Media. Нажмите кнопку «Установить», а затем активируйте плагин на своем сайте.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Установите плагин WebP Converter for Media

Включить преобразование изображений WebP

После активации плагина вы увидите сообщение, подобное приведенному ниже, и нажмите кнопку «Ускорить мой сайт». Кроме того, вы можете перейти в меню «Настройки> Конвертер WebP», чтобы перейти на страницу настроек плагина.

  • Выберите режим загрузки изображения «через .htaccess (рекомендуется)».
  • Выберите JPEG, JPG и PNG для поддерживаемых расширений файлов.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Режим загрузки изображений и расширения файлов

  • Чтобы просмотреть список поддерживаемых каталогов, выберите параметр «/ uploads». Убедитесь, что вы обслуживаете изображения из папки загрузок WordPress по умолчанию. Если вы переместили свои изображения в поддомен, выберите этот каталог, чтобы плагин работал правильно.
  • Для метода преобразования выберите вариант «GD (рекомендуется)».
  • Наконец, выберите качество изображения в соответствии с вашими потребностями. Плагин использует 85% в качестве значения качества по умолчанию для преобразования WebP.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Преобразование каталогов и качество

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

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Дополнительные особенности

Восстановить изображения

Плагин WebP Converter for Media также предлагает возможность регенерировать все ваши изображения для преобразования их в формат WebP. Это полезно, если у вас есть изображения, загруженные на сайт перед установкой плагина.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Восстановить изображения WebP

Проверьте в Google Chrome

После регенерации всех существующих изображений вы можете открыть веб-сайт в Google Chrome и проверить. Вы должны увидеть, что изображения WebP подаются из раздела инструментов разработчика. Вы можете проверить эту статью о том, как проверить, отображаются ли изображения WebP в браузере Chrome. Если вы включили кеширование в браузере, просто скопируйте URL-адрес изображения и увидите, что имя файла содержит .webp.

Проблема с поддержкой сервера

К сожалению, не все веб-серверы поддерживают преобразование WebP. Вы можете найти это, если в настройках плагина отключен раздел «Метод преобразования». На вашем сервере должна быть установлена ​​поддерживаемая библиотека GD или Imagick для поддержки формата WebP. В противном случае плагин покажет ошибку, и вы не сможете использовать преобразование WebP. Насколько мы проверили, серверы виртуального хостинга Bluehost не поддерживают преобразование WebP, и вы увидите сообщение об ошибке, подобное приведенному ниже.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Ошибка конфигурации сервера для WebP

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

Включение кеширования изображений WebP с помощью WP Rocket

Как уже упоминалось, плагин WebP Converter for Media предлагает возможность включить кеширование в браузере для изображений WebP. Это поможет вам ускорить загрузку страницы, указав браузерам кэшировать изображения, когда пользователь снова откроет те же изображения. Однако эта опция недоступна для многих других плагинов, и вы должны комбинировать ее с настройками вашего плагина кеширования. Например, если вы используете WP Rocket, не забудьте установить флажок для кеширования браузера в разделе «Изображения». Это позволит плагину кэшировать изображения WebP и работать в поддерживаемых браузерах.

Как исправить проблему с отображением изображений в форматах следующего поколения в WordPress?

Включить поддержку WebP в WP Rocket

Источник записи: webnots.com
Leave A Reply

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