Современные решения ИТ задач и программной инженерии

Оптимизируем JPEG и PNG изображения правильно

15.06.2016 в разделе Обучениес тегами csshtmlpng
Оптимизируем JPEG и PNG изображения правильно

Если коротко то суть вот в чем. Есть такой прекрасный сервис от компании Google как PageSpeed Insights. Он позволяет проверить на столько ваш сайт оптимизирован по юзабилити для мобильных устройств, скорости загрузки вашего сайта для мобильных устройств а так же рекомендации по оптимизации для настольных ПК и ноутбуков.

После долгой оптимизации сайта проверяем его в этом сервисе. Вроде бы все супер, 100 из 100, больше некуда оптимизировать, и тут вам этот чудесный инструмент начинает ругаться на PNG и JPEG файлы.

Файлы сохранены с макета дизайна в фотошопе в оптимизированном режиме в формате PNG 24 с прозрачностью. Все метаданные для файла убраны. Изображение 137 на 80 пикселей, размер 5,899К, куда уж меньше то? А инструмент гугла все ругается и ругается, что можно мол еще меньше ваш файл ужать, оптимизировать. И черт, он таки прав!

Есть такой замечательный сервис как https://tinypng.com/. Веб версия сервиса полностью бесплатная. Платным является только плагин к фотошопу. Загружаем наше исходное изображение в сервис, на выходе получаем новый файл. Смотрим исходник и смотрим на новое изображение - ничего не отличается, как две капли. А теперь смотрим на размер. Размер исходного изображения 5,899К а нового 3,6К! Невероятно! И сервис гугла после этого перестал ругаться!

На самом деле ничего невероятного здесь нет. Сервис хорош а плагин к фотошопу стоит своих денег. Просто фотошоп не умеет так оптимизировать, что бы размер файла был минимальный но при этом качество было бы максимальным.

Возможно эта запись кому то поможет сократить время на решении этой проблемы по оптимизации JPEG и PNG изображений. Удачной всем оптимизации!