Использование изображений WebP в WordPress

Опубликовано: 2021-03-30

Как вы, наверное, уже знаете, когда дело доходит до веб-сайтов, скорость имеет значение! Одна из главных вещей, которую вы можете сделать, чтобы ускорить работу вашего сайта, — это уменьшить размер страницы. Чем он меньше, тем меньше данных необходимо загрузить. Чем меньше данных, тем быстрее (в разумных пределах!) загрузится страница.

Изображения составляют значительную часть размера файла веб-страницы (иногда более 50% данных страницы составляют изображения). Это делает изображения целью номер один, чтобы сесть на диету в вашем стремлении к меньшим размерам страниц! Традиционно большинство изображений, используемых на веб-сайтах, имеют формат JPEG или PNG. Оба являются отличными типами файлов, которые хорошо работают на веб-сайтах. Однако у них могут быть проблемы с размером. Несмотря на то, что использование такого инструмента, как TinyPNG, рекомендуется (и может существенно повлиять на размер изображений, которые вы добавляете на свой сайт), что, если бы был формат изображения, который был бы меньше «прямо из коробки». Ну, есть и называется он WebP.

В этой статье мы рассмотрим изображения WebP более подробно, чтобы узнать, что они из себя представляют и как вы можете использовать их на своем веб-сайте WordPress. Итак, если вы всегда хотели похудеть на своем веб-сайте, возьмите кофе и немного пирожных (никто не говорил, что мы должны сидеть на диете так же, как и наш веб-сайт!), А затем давайте начнем!

Что такое изображения WebP?

Итак, что же это за изображения WebP, о которых вы, вероятно, слышали? Что ж, в этом нет ничего слишком сложного или таинственного. По сути, это просто другой тип файла. Вместо сохранения изображений в формате JPEG или PNG они сохраняются в формате WebP. WebP на самом деле был разработан Google. Они описывают WebP как «современный формат изображений, который обеспечивает превосходное сжатие без потерь и с потерями для изображений в Интернете. Используя WebP, веб-мастера и веб-разработчики могут создавать более мелкие и насыщенные изображения, которые делают Интернет быстрее».

Google любит быстрые веб-сайты, поэтому вполне логично, что они должны лидировать в предоставлении формата изображений, который поможет веб-сайтам работать быстрее. Файлы WebP обычно на 25-34% больше, чем эквивалентные файлы JPEG (согласно собственному исследованию Google). Учитывая, что изображения могут составлять большую часть данных на веб-странице, это значительная экономия.

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

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

Удобство использования. В настоящее время изображения WebP не поддерживаются большинством программ для графического дизайна, таких как Photoshop или Illustrator. Любой, кто работает в этих программах, привык открывать файлы изображений (всех описаний, JPEG, GIF, PNG и т. д.) и просто «приступать» к редактированию по мере необходимости. Кроме того, когда дело доходит до сохранения этих файлов, вы обычно можете экспортировать их в любой из распространенных форматов изображений. С WebP это невозможно сделать прямо из коробки. Вместо этого вам, вероятно, потребуется загрузить плагин из WebPShop, чтобы использовать «обычное» программное обеспечение для редактирования изображений. Пока изображения WebP не станут такими же вездесущими, как JPEG и другие форматы, всегда будет нежелание «слишком усложнять» вещи, и многие веб-дизайнеры будут продолжать использовать более традиционные форматы изображений.
Совместимость с браузерами : WebP НЕ поддерживается всеми браузерами. Это означает, что, хотя у большинства ваших посетителей, которые используют современные браузеры, такие как Chrome или Mozilla, не будет проблем с просмотром этих изображений, у вас все равно будет значительное меньшинство, которое не сможет просматривать сохраненные изображения веб-сайта. как WebP, который, в частности, включает Safari, который обеспечивает только частичную поддержку в зависимости от используемой версии (на момент написания). Вам понадобится обходной путь (который мы обсудим ниже), чтобы гарантировать, что все ваши посетители смогут видеть ваш веб-сайт так, как вы хотите.

Итак, вопрос должен звучать так: «Должен ли я использовать WebP?». Что ж, похоже, что люди начинают обращать больше внимания на невероятно инновационный формат файлов. И если для вас действительно важна скорость и у вас есть ресурсы для создания веб-сайта с использованием изображений WebP, то почему бы и нет? Как и со всеми новыми технологиями, иногда стартовые ворота могут быть медленными, но лучше быть на шаг впереди, чем мчаться, чтобы догнать своих конкурентов! Имея это в виду, давайте посмотрим, как мы будем использовать изображения WebP на веб-сайте WordPress.

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

Любой, кто сразу погрузился и попытался загрузить файлы WebP на свой веб-сайт WordPress до июля 2021 года, был бы немного разочарован. Вероятно, вы ожидаете, что любые изображения WebP, загруженные через Media Center, будут сохраняться как обычно. Вместо этого вы могли видеть такой экран:

К счастью, с момента выпуска WordPress 5.8 теперь вы можете загружать изображения WebP непосредственно в WordPress, что делает этот великолепный формат изображения таким же простым в использовании, как и форматы JPEG, PNG и GIF. Подобные последовательные улучшения являются одной из причин, почему имеет смысл обновить ядро WordPress до последней версии. Конечно, если вы используете управляемый хост WordPress, такой как Pressidium, мы позаботимся об этом за вас, помогая вам всегда использовать самую последнюю и лучшую версию WordPress.

До выпуска WordPress 5.8 одним из самых простых способов использования изображений WebP была установка плагина, который конвертировал поддерживаемые форматы изображений (например, PNG) в файлы WebP, а затем отображал их на вашем сайте. Есть некоторые предостережения относительно использования изображений WebP (мы перечислили их выше), и использование подходящего плагина, такого как Shortpixel, может устранить эти недостатки, поэтому все же может быть решением, которое стоит рассмотреть. Читай дальше, чтобы узнать больше!

Короткий пиксель

Shortpixel — отличный плагин, о котором стоит подумать, независимо от того, решите ли вы использовать изображения WebP. Shortpixel — хорошо зарекомендовавший себя сервис оптимизации изображений. Он запускает все изображения, которые вы загружаете, через свою превосходную службу сжатия изображений, часто сжимая размер изображения на 50% или более без потери качества изображения. Это происходит автоматически, что означает, что вам не нужно думать о сжатии изображений перед их загрузкой на веб-сайт.

Чтобы действительно максимально использовать Shortpixel, вам нужно будет оплатить план с ними. Они взимают плату на основе «оптимизированных изображений в месяц»: 5000 изображений в месяц стоят всего 3,99 доллара в месяц. Для многих веб-сайтов этого плана будет более чем достаточно, и, учитывая преимущества производительности, связанные с оптимизированным веб-сайтом, он будет дешевым по цене.

Shortpixel оптимизирует широкий спектр форматов изображений, включая JPEG и PNG. Итак, вам может быть интересно, как это поможет мне добавить изображения WebP на мой сайт WordPress?

Если вы помните, не все веб-браузеры поддерживают формат WebP, а в Safari только частичная поддержка WebP, в зависимости от используемой версии (на момент написания) и отсутствие поддержки в Internet Explorer. Просто нецелесообразно создавать веб-сайт, который не обслуживает этих посетителей, даже если тех, кто использует устаревший или неподдерживаемый браузер, может быть меньшинство.

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

Shortpixel спешит на помощь

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

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

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