Это окончание невероятной информации про оптимизация изображений.

...

критериев оценки на выбор. Это может быть SSIM или Butteraugli, а на маленьком наборе иллюстраций можно довериться собственному глазу: что выглядит лучше, а что хуже.

Вот мои заключительные рекомендации:

Если вы не можете отдавать изображения в разных форматах, в зависимости от поддержки в браузере:

• Guetzli + jpegtran из MozJPEG хорошо оптимизируют при качестве JPEG более 90.
  • Для веба качество q=90 слишком расточительно. Для обычных картинок достаточно q=80, а для DPR 2× даже q=50. Поскольку Guetzli не выходит на такой низкий уровень, то для веба можно использовать MozJPEG.
  • Корнель Лесински недавно улучшил команду cjpeg в mozjpeg, добавив крошечный профиль sRGB, чтобы помочь Chrome отображать естественный цвет на дисплеях с широкой цветовой гаммой.
• PNG pngquant + advpng обеспечивает довольно хорошее соотношение скорости/сжатия.

Если вы можете отдавать изображения в разных форматах, в зависимости от поддержки в браузере, используя , заголовок Accept или Picturefill:

• Отдавайте WebP для браузеров, которые его поддерживают
  • Создавайте WebP из оригинальных изображений 100% качества. Иначе вы будете отдавать в браузеры картинки худшего качества и большего объема с искажениями JPEG и искажениями WebP! Если сжимаете исходные изображения кодеком WebP, то искажения будут менее заметны, а уровень сжатия выше.
  • Настройки по умолчанию WebP -m 4 -q 75 хороши для большинства случаев как оптимальное соотношение скорости и степени сжатия.
  • У WebP есть специальный режим сжатия без потерь (-m 6 -q 100), который уменьшает файлы, изучив все сочетания параметров. Это на порядок медленнее, но стоит того для статических ресурсов.
• Запасной вариант — Guetzli/MozJPEG для браузеров, которые не поддерживают WebP.

Удачной компрессии!

Примечание: для более практических советов по оптимизации изображений настоятельно рекомендую книгу Web Performance in Action Джереми Вагнера. В книге High Performance Images тоже много отличных советов и нюансов.

Мелочи

• JPEG XT определяет расширения спецификации JPEG 1992 года. Чтобы гарантировать идеальную совместимость со старым стандартом пришлось уточнить спецификацию 1992 года, а кодек libjpeg-turbo выбран в качестве эталонной реализации (как самый популярный).
• PIK — это новый графический кодек, за которым стоит следить. Он совместим с JPEG, имеет более эффективное цветовое пространство и использует преимущества Guetzli. Он декодирует на 33% медленнее JPEG, но удаляет из файлов на 54% больше лишней информации, чем libjpeg. Он быстрее в Guetzli в декодировании. Исследование психовизуального сходства современных кодеков показало, что PIK намного превосходит альтернативы. К сожалению, кодек пока на ранних стадиях разработки, и кодирование пока неприемлемо медленно (сравнение проводилось в августе 2017 года).
• Для оптимизации изображений часто рекомендуют ImageMagick. Это хороший инструмент, но результат его работы обычно нуждается в дополнительной оптимизации, а другие инструменты справляются лучше. Мы рекомендуем libvips, хотя это более низкоуровневый инструмент и более требователен к технической квалификации пользователя. У ImageMagick также периодически находили уязвимости в безопасности, о которых желательно знать.
• Blink (движок рендеринга в Chrome) декодирует изображения вне основного потока. Перенос декодера в поток компоновщика освобождает основной поток для работы над другими задачами. Мы называем это отложенным декодированием. Но даже в этом случае работа декодера занимает критический путь для вывода фрейма на экран, поэтому он все еще может вызвать подтормаживание и рывки анимации. img.decode() API должен устранить эту проблему.

Исследование, описанное в статье про оптимизация изображений, подчеркивает ее значимость в современном мире. Надеюсь, что теперь ты понял что такое оптимизация изображений и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Продолжение:

Часть 1 Оптимизация графики для веба
Часть 2 JPEG-оптимизаторы - Оптимизация графики для веба
Часть 3 Доставка изображений HiDPI с помощью srcset - Оптимизация графики для
Часть 4 Почему полезна отложенная загрузка? - Оптимизация графики для веба
Часть 5 Вот мои заключительные рекомендации: - Оптимизация графики для веба