Оптимальный формат изображений на сайте

#frontend #изображения #pagespeed_insights

Появилась острая необходимость в оптимизации изображений на сайте. Как увеличить
скорость загрузки сайта путем уменьшение объема загружаемых изображений? Для тестирования
результата использую несколько разных способов: 


Тестирование инструментом PageSpeed Insights
Измерение общего объема сайта до и после оптимизации изображений. 


Знаю 4 основных формата изображений используемых в Web:


JPEG
GIF
PNG
SVG


В основном использую именно JPEG и PNG. Поэтому занимался оптимизацией именно их.
Этого вроде бы хватало. Но совсем недавно PageSpeed Insights изменился кардинально,
например данное обновление описано на Хабре. Ранее были рекомендации по сжатию изображений,
сейчас же Google рекомендует использовать современные форматы изображений JPEG 2000,
JPEG XR и WebP.


  Используйте современные форматы изображений
  
  Для изображений в форматах JPEG 2000, JPEG XR и WebP используется
  более эффективное сжатие, поэтому они загружаются быстрее и потребляют
  меньше трафика, чем изображения PNG и JPEG.



От предлагаемых форматов изображений я просто в шоке. 



Главные проблемы, которые меня беспокоят:


Поддержка браузерами
Размер изображений


Разберёмся со всеми пунктами по порядку. 

Пункт №1

Для анализа поддержки браузерами буду использовать сервис Can I use.

Результат формата изображений JPEG - не дал результатов

Результат формата изображений PNG


Результат формата изображений JPEG 2000

Результат формата изображений JPEG XR

Результат формата изображений WebP

Результат просто ошеломительный. В моём понимании, я теперь должен использовать эти
современные форматы изображений, загружая в зависимости от браузера разную по формате
картинку пользователю? Или на примере интернет магазина, это как вообще?

Пункт №2
В этом пункте использовав одно изображение в JPEG, я переконвертировал его в разные
форматы. 

Изображение в формате JPEG

Размер 1,26 МБ
Ссылка https://ibb.co/bxGFh0


Изображение в формате PNG

Размер 6,97 МБ

Ссылка https://ibb.co/etc7Uf

Изображение в формате JPEG 2000

Размер 2,71 МБ

Изображение в формате JPEG XR

Размер 10,4 МБ 

Изображение в формате WebP

Размер 704 КБ



Использовать JPEG, GIF, PNG, SVG или JPEG 2000, JPEG XR, WebP? Как?
    

Ответы

Ответ 1

Можно использовать в Adobe Photoshop встроенный оптимизатор "для Web", при сохранении
изображения.
Возможна гибкая настройка по соотношению качество-вес/скорость