Иногда неопытные администраторы / редакторы заливают на корпоративные сайты или свои блоги файлы изображений исходного качества. Почему не стоит это делать? У таких изображений "гигантское" разрешение (не всем сайтам нужны фото в разрешении 4K) и размер (зачастую это 2МБ и куда большие значения, нам встречались варианты и по 8-14 МБ).
Отсюда возникают проблемы с загрузкой страниц, т.к. изображений много, их размер достаточно большой для веб-страниц, страницы грузятся по 10 и более секунд, а это фатально много. Более 50% мобильных пользователей покидают сайт, если загрузка занимает более трех секунд. Зачем ждать, когда можно открыть другую вкладку и найти более оптимизированный ресурс для изучения. Таким образом теряется трафик сайта, уменьшаются просмотры. Дополнительно у таких сайтов страдает уровень юзабилити, т.е. сложно работать с сайтом, у которого долго загружается медиа контент.
Как ускорить сайт? Как оптимизировать изображения?
В первую очередь необходимо уменьшить разрешение изображений, как минимум до условных 1280X800 пикселей. Далее исходный размер фото можно сжать через онлайн-сервис, коих достаточно много, из годных можно порекомендовать, например, www.iloveimg.com для JPG и для PNG - tinypng.com
При этом всегда есть свое НО. Если изображений на странице сайта много, то и данный вариант не будет идеальным, т.к. хоть и есть оптимизация изображений, но она не достаточна для большого количества изображений, они все равно будут в куче достаточно долго грузиться. Однозначно, будет лучше, чем использование оригинальных неоптимизированных фото, но не так идеально, как хочется.
Есть решение и оно вам понравится!
Еще в далеком 2010 году компания Google разработала формат изображений Webp. Тогда это был новый прорыв в сжатии изображений, предлагающий сжатие фото на 20-30% практически без потери качества, поддерживалась прозрачность (как в PNG), при сжатии переходы с одного цвета в другой были более качественные, так скажем с минимальной «лесенкой», а также поддерживалась анимация (как в GIF).
Все круто, однако и тут есть свое НО. Многие начали переводить свои сайты на данный формат и получали внушительный прирост к производительности вплоть до 50 и более процентов из-за уменьшения размеров фото. Но тут же и всплывали достаточно серьезные минусы, связанные с совместимостью.
Например, что скачанные webp-картинки не открывались просмотрщиками OS Windows. В дополнение к этому браузеры Safari и IE не поддерживали данный формат, именно поэтому администраторы сайтов использовали обходные пути в виде альтернативных изображений:
1
2
3
4
<picture>
<source srcset="your-image.webp" type="image/webp">
<img src="your-image.jpg">
</picture>
Вышеуказанный код отдавал всем поддерживающим браузерам изображение в webp, а IE и Safari - фото в формате классического jpg.
Даже любимчик нашей веб-студии в лице CMS Netcat не поддерживала данный формат изображений. Однако, все это в прошлом.
На момент написания данного материала ситуация достаточно кардинально изменилась:
- IE уже не актуален, пришедший ему на замену Edge поддерживает формат WebP;
- Safari с конца 2020 года поддерживает WebP;
- В стандартном приложении «Фото» на Windows 11 появилась поддержка формата WebP (для более старых OS Windows существуют специальные драйвера для просмотра WebP, которые можно скачать по ссылке)
- Новые версии CMS Netcat, начиная с 6.0 поддерживают загрузку WebP.
Как быстро конвертировать фото в формат WebP?
Вариантов достаточно много, как говорится - на любой вкус и цвет.
Вот некоторые из них:
- С помощью конвертера WebP. Например, можно использовать XnConvert. Бесплатен для частного или образовательного использования. Особенно удобно использовать данное ПО при массовой конвертации большого количества изображений за один подход.
- Через расширение Chrome. Можно установить расширение Bulk Images to WebP Converter.
- Через плагин Photoshop WebP. Можно установить плагин Google WebP для Adobe Photoshop.
- С помощью онлайн-конвертера. Например, можно использовать Online Image Tool.
- На устройствах Android и iOS можно использовать приложение WebP Image Converter.
- Настройка на сервере сайта автоматической конвертации изображений из классических форматов Png и Jpg в WebP, используя серверную библиотеку CWebP.
Подробнее остановимся на пакетной конвертации через XnConvert
Давайте представим, что вам нужно обработать 1000 изображений за раз. Такую пакетную обработку в 1 подход можно сделать через ранее упомянутый XnConvert.
Перед началом работы необходимо немного настроить программу. Заходим во вкладку входные данные и указываем нужную папку, куда будут сохраняться сконвертированные изображения, далее в формате выбираем “WebP”, сохраняем цветовой профиль и структуру папок.
Почти готово, следующее действие - пройти во вкладку “Входные данные”, выбрать фото или директорию с фото, которые нужно сконвертировать (можно их просто вылить у себя в папке на компьютере и перенести в данное окошко) и нажать на кнопку “Преобразовать”. Для примера возьмем фото в исходном 4K разрешении и посмотрим, что получится.
Вот и все. Как видите за 5 секунд программа обработала 5 фото, степень сжатия на уровне 83-97%. Но даже этот факт не дает нужный результат, т.к. в примере есть фото, которое весило изначально 9,35 МБ, после конвертации - 1,52 МБ. Это недопустимый размер для фото при загрузке на сайт.
Давайте уменьшим его разрешение до оптимальных 1280px. Это, кстати, также можно сделать через XnConvert. Проходим в раздел “Действия” и добавляем новое действие “Изменение размера”. Выставляем изменение размера по ширине (1280 пикселов).
Теперь нужно снова пройти во вкладку “Входные данные”, далее добавляем фото большого разрешения и нажимаем кнопку “Преобразовать”.
Уже лучше, размер 372KБ. Вполне юзабельно для сайта, но все также не идеал. Чтобы добиться более лучших размеров файла, можно пожертвовать разрешением, либо качеством (увеличить степень сжатия, это можно сделать в параметрах формата). Тут, выбирайте сами в зависимости от ваших задач.
Выводы
Использование формата изображений WebP для оптимизации скорости загрузки страниц сайта позволяет добится вполне хороших результатов, особенно в эпоху быстрого интернета. С каждым годом пользователю нужно максимально быстрый доступ к искомой информации и если при интернет-серфинге он имеет дело с не оптимизированным интернет-ресурсом - есть риск того, что он может вообще не вернуться на него, а это потеря трафика, высокий показатель отказов и прочие “радости жизни”, которые пагубно повлияют на рейтинг вашего сайта в поисковой выдачи.
WebP уже устарел, но все еще актуален
Формат WebP по замыслу Google был предназначен для замены JPEG, PNG и GIF. На текущий момент существуют форматы AVIF (год выхода: 2019) и JPEG XL (год выхода: 2020), которые уже предназначены для полноценной замены WebP. Они обещают делать абсолютно все то же самое, только лучше. На настоящий момент поддержка стандарта находится на уровне, который можно назвать «экспериментальным», т.е. нет полноценной кроссбраузерной поддержки.
Именно поэтому, пока новые форматы не будут полноценно адаптированы и оптимизированы для работы, формат WebP по сей день остается хорошим вариантом оптимизации изображений.
