Как передавать растровые изображения

Если клиенту или разработчикам нужно передать растровые изображения (jpg, png24, png8, gif), то следует позаботиться не только о том, как много они весят, но и как будут отображаться при загрузке.

.jpg

Можно сохранять как Progressive (отображение и улучшение качества картинки по мере загрузки). Но это немного увеличивает вес картинки.

Использовать качество 80. Оно хорошо работает для большинства случаев. Если есть возможность настроить качество и потратить немного времени, то можно подобрать качество поменьше, но следить при этом, чтобы артефакты сжатия не были заметны.

Для примера:

Слева качество 80, 117 килобайт. Справа качество 0, 18 килобайт

.png8 и .gif

При сохранении стоит подобрать как количество цветов, так и параметр Dither. Он помогает достигнуть приемлемого качества картинки или интересных эффектов при меньшем количестве цветов.

Примеры с 32 цветами при сохранении из Photoshop:

Слева No Dither, 54 килобайта. Справа Diffusion, 99 килобайт.

Слева Pattern, 86 килобайт. Справа Noise, 113 килобайт.

Для всех

Все растровые изображения, уходящие клиенту или разработчикам должны быть оптимизированы: убраны лишние мета данные, оптимизировано сжатие (да, у JPG есть несколько алгоритмов сжатия картинки). Это поможет ещё уменьшить вес без потери качества.

Оптимизировать можно с помощью приложения ImageOptim:

[## ImageOptim - better Save for Web

A free app that makes images load faster and take less disk space, without sacrificing quality. Removes private EXIF…

imageoptim.com](https://imageoptim.com/?source=post_page-----9f3961e345b6---------------------------------------)

Я Саша Тихонов: дизайнер, арт-директор и сооснователь студии Flyphant.

sashatikhonov.com · twitter · facebook · instagram · vk