Большинство из нас уже знают, что оптимизация изображений очень важна, поскольку она играет огромную роль в общем времени загрузки вашего веб-сайта WordPress. Сегодня мы хотим поделиться с вами простой альтернативой того, как интегрировать файлы Google WebP в ваш сайт WordPress. Некоторые пользователи заметили уменьшение размера файлов изображений более чем на 70%!
Что такое WebP?
Если вы не знакомы с WebP, это формат файла изображения, созданный командой веб-производительности в Google с целью создания изображений, которые меньше и быстрее. Он был впервые анонсирован в 2010 году и поддерживает методы сжатия с потерями и без потерь. Изображения доставляются в веб-браузер с веб-сервера в зависимости от типа MIME, который он использует image/webp
.
Изображения WebP без потерь на 26% меньше по размеру по сравнению с PNG, а изображения WebP с потерями на 25-34% меньше, чем JPEG.
Такие компании, как YouTube и eBay, уже используют WebP для бесшумного управления многими своими сайтами. Ниже приведен пример с сайта eBay, где на своей домашней странице в среднем размещается около 30 файлов WebP.
Почему WebP так важен? Согласно httparchive, по состоянию на август 2016 года изображения составляют более 64% среднего веса веб-страницы. Обычно это больше, чем ваши CSS, JS и HTML вместе взятые. Поэтому выбор надежного метода оптимизации изображения и формата изображения, такого как WebP, имеет решающее значение, чтобы вы могли максимально уменьшить вес своей страницы. Как правило, чем меньше размер вашей страницы, тем быстрее она загружается. И это порадует не только ваших посетителей, но и Google, поскольку скорость страницы является фактором ранжирования.
Поддержка WebP
Хотя WebP очень интересен, важно также упомянуть поддержку браузера. На данный момент не все современные браузеры поддерживают WebP. Согласно caniuse, в настоящее время WebP поддерживается в Chrome 23+, Opera 39+, всех версиях Opera mini, браузере Android 4.3+ и Chrome для Android.
Но ждать! Не расстраивайтесь, потому что в учебнике, который мы собираемся показать вам ниже, есть способ доставки файлов WebP в поддерживаемые браузеры и JPG / PNG в качестве запасного варианта. Это означает, что неподдерживаемые браузеры не увидят битое изображение, они просто увидят то, что видели раньше. Думайте о WebP как о дополнении к вашему сайту WordPress, а не как о миграции.
Согласно W3Schools, Chrome имеет монополию на долю рынка браузеров, составляющую немногим более 70%. Но не принимайте долю рынка как твердое доказательство, посмотрите на данные ваших посетителей и посмотрите, какие браузеры они используют, поскольку они могут отличаться в зависимости от вашей ниши. Вы можете быть удивлены тем, насколько искажена статистика. В Google Analytics в разделе «Аудитория» вы можете нажать «Браузер и ОС» и посмотреть, какие браузеры используют люди, когда заходят на ваш сайт. Мы выбрали случайный веб-сайт, и, как вы можете видеть ниже, 67% посетителей из Chrome и еще 1% из Opera. Таким образом, 68% этих людей могут просматривать и извлекать выгоду из формата файлов изображений WebP!
Как использовать файлы WebP в WordPress
В сегодняшнем примере мы собираемся использовать комбинацию двух разных плагинов WordPress для запуска и запуска WebP в WordPress. Они создаются и разрабатываются командой KeyCDN, глобальной сети доставки контента (CDN ).
- [премия] Optimus Image Optimizer: плагин сжатия изображений без потерь для WordPress, конвертирует изображения в WebP
- [бесплатно] WordPress Cache Enabler: плагин кеширования, который позволяет вам обслуживать WebP в поддерживаемых браузерах.
Optimus Image Optimizer
Вы можете загрузить Optimus Image Optimizer из репозитория WordPress, с сайта optimus.io или из панели управления вашего плагина. Примечание. Для конвертации изображений в WebP требуется лицензия премиум-класса. После установки вы можете включить «Создание файлов WebP» в настройках плагина.
После включения WebP создается дополнительный образ для всего, что преобразовано. Поэтому, если вы загружаете файл PNG или JPG, теперь у вашего изображения также будет версия .webp. Помните, что PNG / JPG по-прежнему необходимы, потому что они все еще используются для неподдерживаемых браузеров. Optimus выполняет сжатие без потерь, поэтому ваши PNG и JPG также сжимаются.
Существует также опция массового оптимизатора на тот случай, если вы уже сжимали свои изображения раньше, но вам все еще нужно преобразовать их в WebP.
Активатор кеширования WordPress
Итак, теперь, когда у вас есть изображения WebP, вам нужен способ сообщить WordPress, чтобы он обслуживал изображения WebP для поддерживаемых браузеров и PNG / JPG для других браузеров. Это можно сделать с помощью бесплатного плагина WordPress Cache Enabler. Вы можете загрузить плагин из репозитория WordPress или установить его из панели управления плагином. После установки вы можете включить «Создать дополнительную кэшированную версию WebP» в настройках плагина.
Как только вы включите эту опцию, будет создана дополнительная кэшированная версия вашей страницы WebP.
Вот и все! Теперь на вашем сайте WordPress должны быть запущены файлы WebP.
Сравнение JPG с WebP
Мы провели сравнение JPG с WebP, чтобы показать различия, которых вы можете достичь.
ИМЯ ФАЙЛА | ОРИГИНАЛЬНЫЙ JPG | СЖАТЫЙ JPG | ФОРМАТ WEBP | РАЗНИЦА РАЗМЕРОВ% |
---|---|---|---|---|
jpg-to-webp-1.jpg | 758 KB | 685 KB | 109 KB | 86% |
jpg-to-webp-2.jpg | 599 KB | 529 KB | 58.8 KB | 90% |
jpg-to-webp-3.jpg | 960 KB | 881 KB | 200 KB | 79% |
jpg-to-webp-4.jpg | 862 KB | 791 KB | 146 KB | 83% |
jpg-to-webp-5.jpg | 960 KB | 877 KB | 71.7 KB | 93% |
WebP привел к уменьшению среднего размера изображения на 85,87%.
PNG и WebP Сравнение
Опять же, мы также сравнили PNG с WebP, чтобы показать различия, которых вы можете достичь.
Имя файла | Оригинальный PNG | Сжатый PNG | Формат WebP | Разница в размере% |
---|---|---|---|---|
png-в-webp-1.png | 44 KB | 34 KB | 30 KB | 32% |
png-в-webp-2.png | 46 KB | 35 KB | 33 KB | 28% |
png-в-webp-3.png | 43 KB | 31 KB | 25 KB | 42% |
png-в-webp-4.png | 30 KB | 24 KB | 18 KB | 40% |
png-в-webp-5.png | 15 KB | 11 KB | 8 KB | 47% |
png-в-webp-6.png | 34 KB | 24 KB | 18 KB | 47% |
png-в-webp-7.png | 15 KB | 13 KB | 8 KB | 47% |
png-в-webp-8.png | 63 KB | 47 KB | 44 KB | 30% |
png-в-webp-9.png | 48 KB | 36 KB | 33 KB | 31% |
png-в-webp-10.png | 17 KB | 14 KB | 11 KB | 35% |
png-в-webp-11.png | 18 KB | 13 KB | 9 KB | 50% |
png-в-webp-12.png | 61 KB | 45 KB | 39 KB | 36% |
png-в-webp-13.png | 32 KB | 25 KB | 21 KB | 35% |
png-в-webp-14.png | 26 KB | 21 KB | 17 KB | 35% |
png-в-webp-15.png | 14 KB | 12 KB | 9 KB | 36% |
png-в-webp-16.png | 36 KB | 27 KB | 24 KB | 33% |
png-в-webp-17.png | 14 KB | 12 KB | 8 KB | 43% |
png-в-webp-18.png | 21 KB | 18 KB | 13 KB | 38% |
png-в-webp-19.png | 42 KB | 30 KB | 27 KB | 36% |
png-в-webp-20.png | 23 KB | 20 KB | 18 KB | 22% |
WebP привел к уменьшению среднего размера изображения на 42,8%.
Резюме
Как видите, WebP очень легко реализовать на вашем сайте WordPress, и вы можете добиться значительно меньших размеров файлов изображений! Там нет сжатия изображений, которое могло бы сравниться с экономией WebP. О, и мы упоминали, что WebP может использовать сжатие без потерь? Это означает, что вы не увидите заметной потери качества. Если вы ищете лучший способ ускорить WordPress, WebP может стать отличным решением.
Источник записи: https://www.wpexplorer.com