Как обслуживать изображения WebP вместо JPG или PNG с помощью WordPress

Google находится на вершине пищевой цепи в Интернете. Компания влияет (или диктует) многое из того, что происходит в Интернете. И их новый формат изображений WebP продолжает эту тенденцию. Поскольку скорость загрузки страницы становится все более важной (в первую очередь из-за Google Page Rank), разработчики и дизайнеры рассматривают сжатие изображений как самый простой способ сократить время загрузки. Изображения Google WebP примерно на 30% меньше типичных изображений JPG или PNG и сохраняют такое же качество. И, что самое главное, вам не нужно беспокоиться о преобразовании изображений в WebP вручную.

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

Давайте перейдем к этому.

Подпишитесь на наш канал Youtube

Использование Optimole для обслуживания WebP на WordPress

WebP как формат изображений по умолчанию не поддерживается в WordPress. Вы можете загрузить изображение .webp, но, как и в случае с файлом SVG, вы будете получать сообщения об ошибках. И снова, как и при использовании файлов SVG с WordPress, есть простой обходной путь с помощью плагина, чтобы ваш сайт WP увеличивал масштаб.

Из служб WebP, которые мы пробовали, наш любимый - Optimole. Нам очень повезло, что он заработал с минимальными настройками, поэтому мы хотим показать вам, как его настроить и как можно безболезненно сделать вашу установку WordPress совместимой с WebP.

Во-первых, очевидно, вы захотите загрузить и установить сам плагин. Он находится в репозитории WP.org и совершенно бесплатен. Как и служба на основе API, которая его поддерживает (до определенного момента). Хотя можно «на лету» конвертировать традиционные изображения в WebP с помощью PHP, не каждый веб-хостинг дает такое разрешение вашему серверу. Если у вас есть это разрешение, вы также можете изучить плагин WebP Express . С ним вы получаете большой контроль, но он требует дополнительных настроек, чтобы работать плавно.

После того, как вы установили и активировали Optimole на своем веб-сайте WordPress, вы найдете новый пункт меню в Media - Optimole .

Ваш ключ API Optimole

Прежде чем вы сможете получить доступ к каким-либо настройкам или конфигурациям, вам необходимо иметь учетную запись Optimole. Если вы уже настроили его, вы можете нажать кнопку «У меня уже есть ключ API» . Если нет, зарегистрируйтесь и отправьте ключ API по электронной почте . Базовая учетная запись для ключа API бесплатна, и вы получаете примерно 5000 посещений на этом уровне. Если вам нужно больше, есть доступные уровни цен.

Optimole определяет посещение как « любого, кто посетил ваш сайт один раз [. . .] Каждый пользователь засчитывается только один раз. Неважно, что они делают на вашем сайте, сколько изображений загружают или сколько страниц посещают; это всего лишь один пользователь. Если они покинут ваш сайт и вернутся в тот же день, они останутся всего лишь одним пользователем. ”

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

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

Ваши панели инструментов Optimole WordPress

На панели управления WordPress вы получите базовую информацию об оптимизации WebP. Это позволяет вам устранять неполадки и оценивать, насколько успешным является ускорение. Таким образом, вы можете войти и настроить различные параметры.

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

В самом верху есть вкладка « Возможные проблемы ». Никому не нравится, когда вкладка подсвечивается, но мы все также должны видеть, какие конфликты могут возникнуть.

Основная проблема, с которой мы столкнулись, - это другие плагины для сжатия и доставки изображений. Как вы можете видеть на изображении выше, плагин Jetpack работает аналогично Optimole через Photon APIT, поэтому они могут бить головой. Для нас это проявлялось в том, что посетителю не доставлялось никакого изображения. У нас не было проблем с другими сервисами сжатия, такими как TinyPNG или Smush.

Использование панелей мониторинга

Если вам нужна более подробная информация о том, как ваш сайт работает с WebP, эта информация есть на внешней панели управления Optimole.

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

Вы также можете установить водяные знаки на панели инструментов Optimole (или WP), чтобы, когда кто-то получил WebP с вашего сайта WordPress, ваш логотип автоматически отображался. Это простой процесс, и вы можете управлять прозрачностью, расположением и т. Д.

По сути, вы можете делать одно и то же с обеих панелей управления. Либо на вкладке « Настройки » в WordPress, либо на внешнем тире на Optimole. Это полностью зависит от того, что вам удобнее всего, а также от того, какой уровень данных вам нужен в любой момент времени.

Кроме того, вы сможете контролировать уровень сжатия, отложенную загрузку и время / если определенные изображения будут обслуживаться как WebP на основе имен файлов. Все это вы найдете на вкладке « Настройки » в Media - Optimole .

Заключение

Лучшее в использовании WebP с веб-сайтами WordPress - это то, что вам не нужно вручную работать с файлами. Никаких дополнительных загрузок, никакого дополнительного времени сжатия, ничего. Из-за того, как работают API, все вычисления и процессы выполняются «на лету» в реальном времени. Google действительно сделал Интернет быстрее, используя WebP, а не JPG или PNG. Однако самым большим преимуществом является то, что изображения сохраняют одинаковое качество даже при значительном уменьшении их размеров. Со стороны Google может быть самообслуживание, чтобы заставить вас использовать их формат для ускорения вашего сайта, чтобы они могли повысить ваш рейтинг, а также улучшить взаимодействие с конечным пользователем. И это то, что в конце концов имеет значение.

Как вы относитесь к показу изображений WebP посетителям вашего сайта?

Статья избранное изображение: vladwel / shutterstock.com