Webp: Оптимизация всех изображений сайта. Как и зачем?
При проверке сайта в сервисе Google Pagespeed Insights дается важная рекомендация по ускорению сайта: «Используйте современные форматы изображений». Сервис OptiPic CDN поможет легко выполнить эту рекомендацию. OptiPic подключается к сайту с помощью удобного модуля. В результате все изображения на сайте будут преобразованы из устаревших форматов (png и jpeg) в современный формат Webp с целью ускорения загрузки изображений.
Формат WebP и его преимущества
Изображения, размещенные на странице сайта, зачастую «весят» в байтах гораздо больше чем текст страницы, вся html-разметка, css-стили и javascript-логика вместе взятые. Поэтому формату изображений стоит уделять особое внимание.
Формат WebP является более эффективным и экономичным. Конвертация изображения из старого формата jpeg/png в формат WebP позволяет облегчить файл до 25% без ухудшения визуального качества картинки.
Именно поэтому Google настоятельно рекомендует отказываться от устаревших форматов изображений.
Как сконвертировать все изображения в формат WebP
Но есть и один недостаток, который кстати легко решается использованием OptiPic CDN.
Старые версии браузеров не поддерживают формат WebP (к примеру Safari на старых версиях iOS). На этих браузерах WebP просто не отобразится (как будто картинки не существует). Можно конечно проигнорировать посетителей сайта с такими браузерами (пусть уходят с сайта, ведь у вас и так лишнего посетителей). Но есть вариант получше.
OptiPic проверяет через какой браузер запрашивается изображение. Если браузер поддерживает WebP – отдаем посетителю изображение, сконвертированное в WebP. Если браузер не поддерживает WebP - отдаем изображение в исходном формате jpeg/png. Но даже в этом случае вы получите преимущество от использования сервиса, ведь изображение будет предварительно сжато (оптимизировано)..
Все конвертации и оптимизации изображений происходят в фоне в облаке OptiPic. Так что это никак не влияет на скорость отдачи изображений, и не создает нагрузки на ваш сайт.
Автоматизация конвертации WebP с помощью OptiPic
Чтобы произвести ускорение сайта с помощью сервиса OptiPic CDN, необходимо скачать и установить модуль на свой сайт, используя видео инструкцию. Процесс установки очень простой и обычно не вызывает затруднений даже у новичков.
Шаг №1
Скачайте и установите на свой сайт официальный модуль CDN OptiPic для вашей CMS или универсальный модуль для PHP-сайтов.
Можно просто указать адрес своего сайта - система сама определит CMS вашего сайта и предоставит инструкцию по установке.
Шаг №2
Зарегистрируйтесь в личном кабинете OptiPic CDN и добавьте новый сайт в панель управления CDN.
Шаг №3
Выделите и скопируйте ID созданного сайта в буфер обмена (Ctrl + C)
Перейдите на страницу настроек установленного ранее модуля на вашем сайте.
Вставьте скопированный ID сайта в соответствующее поле настроек.
Шаг №4
Сохраните настройки модуля. Очистите кэш в панели управления вашего сайта.
При необходимости измените другие настройки модуля.
Как происходит оптимизация изображений в OptiPic
- По каждому изображению на странице выполняется конвертация, и возвращаются WebP-файлы пользователям, если браузер поддерживает данный формат.
- Отдается сжатая версию изображения в старом формате (без конвертации в webp), если автоматическое тестирование показало, что браузер пользователя не поддерживает WebP.
- Приложение адаптирует картинки под узкие экраны телефонов, если пользователь просматривает сайт с мобильного.
- Выполняет кеширование для ускоренной загрузки картинок, чтобы сайт быстрее отрисовывал изображения.
- У изображений проставляются теги EXIF/IPTC, если их заполнение настроено в личном кабинете.
Пробный тариф дает 10 000 показов, чего вполне достаточно, чтобы оценить удобство сервиса, понять насколько он вам подходит. Бесплатные показы начисляются сразу после прохождения регистрации пользователем.
Кроме того за счет акций OptiPic можно получить другие скидки на его использование, в т.ч.:
- 100 000 бесплатных показов изображений для тех, кто рекомендует сервис своим читателям. Просто разместите на одной из страничек своего сайта рекомендацию с описанием сервиса OptiPic и сообщите об этом в поддержку help@optipic.io, указав адрес странички и своей емейл.
- 100 000 показов за отзыв на сервис на странице самого OptiPic.
- 100 000 показов ежемесячно за размещение ссылки на сервис в подвале сайта.
Дополнительную скидку могут получить пользователи, подписавшиеся на странички сервиса в соцсетях.