Jpeg, jpeg progressive или webp? Что выбрать?

Изображения — то, без чего невозможно представить современную страницу в интернете. Картинки делают сайты живыми, понятными и эмоциональными. От размера и качества графических материалов напрямую зависит: 

1. скорость загрузки и процент пользователей, которые совершили целевое действие
2. количество свободного места на сервере
3. позиция сайта в поисковой выдаче

Какой формат картинки на сайте считается оптимальным? По мнению наших разработчиков оптимальными можно считать такие форматы изображений: 

• progressive jpeg — формат, который позволяет браузеру загружать изображение постепенно, постоянно отображая картинку с различным качеством от 0 до 100 процентов.
• webp (произносится как weppy) — современный формат сжатия изображений, разработанный компанией Google в 2010 году. Помогает уменьшить «вес» изображения, но при этом сохранить высокое качество. 

На примерах ниже можно увидеть разницу между загрузкой изображения в формате jpeg, progressive jpeg, webp. 

Jpeg-изображение появляется на экране постепенно. Сначала небольшой кусочек картинки сверху, потом еще больше. Каждый кусок отображается в максимальном разрешении.



Progressive jpeg появляется весь сразу. Сначала картинка представляет собой набор огромных пикселей, в которых проглядывается силуэт загружаемого изображения. По ходу загрузки страницы разрешение картинки увеличивается. Разница между jpeg и progressive jpeg может быть незаметна на компьютерах с хорошим интернетом (более 100 Мбит/с), где изображения загружаются быстро. При слабом соединении разница между jpeg и progressive jpeg будет очевидна. 



Webp хорошо передает графику и фото, поддерживает прозрачность и анимацию. Первое изображение в формате jpeg весит 132 КБ. Этот же зимний лес в формате webp весит уже 96,5 КБ, качество при этом не меняется.


Как самостоятельно перевести jpeg в progressive jpeg и webp?

1. Через https://convertio.co/ru/jpeg-webp/ , https://ezgif.com/jpg-to-webp
2. Через онлайн-сервис https://www.jpeg.io/

Чтобы было понятно. У нас есть фотография готического собора в Милане. В формате jpeg изображение весит 3,16 МБ.

• Пробуем преобразовать фотографию в webp через конвертатор https://convertio.co/ru/jpeg-webp/ . Разрешение остается таким же, размер уменьшается на 1МБ.

• С помощью конвертации через https://ezgif.com/ можно оптимизировать изображение до 100 Кб с тем же разрешением. Первичная конвертация в webp выглядит так:

Оптимизируем до 100 КБ:



Смотрим итоговый размер и разрешение файла:

• Переводим jpeg в progressive jpeg. Переходим на https://www.jpeg.io/. Загружаем изображение собора размером 4,50 МБ, скачиваем конвертированный файл в ZIP-формате.

Формат остается тем же jpeg, при этом размер файла уменьшается примерно на 500 КБ без потери качества.



Это несколько рабочих способов преобразования графических элементов. Чтобы загрузка картинок на сайте была быстрой и пользователи чаще совершали целевые действия, попробуйте поработать с изображениями. Используйте оптимальные форматы, значительно уменьшайте вес сайта и сокращайте расходы на хранение информации. Теперь вы знаете, как можно изменять форматы самостоятельно.