Добавить в корзинуПозвонить
Найти в Дзене

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

Если клиенту или разработчикам нужно передать растровые изображения (jpg, png24, png8, gif), то следует позаботиться не только о том, как много они весят, но и как будут отображаться при загрузке. Можно сохранять как Progressive (отображение и улучшение качества картинки по мере загрузки). Но это немного увеличивает вес картинки. Использовать качество 80. Оно хорошо работает для большинства случаев. Если есть возможность настроить качество и потратить немного времени, то можно подобрать качество поменьше, но следить при этом, чтобы артефакты сжатия не были заметны. Для примера: При сохранении стоит подобрать как количество цветов, так и параметр Dither. Он помогает достигнуть приемлемого качества картинки или интересных эффектов при меньшем количестве цветов. Примеры с 32 цветами при сохранении из Photoshop: Все растровые изображения, уходящие клиенту или разработчикам должны быть оптимизированы: убраны лишние мета данные, оптимизировано сжатие (да, у JPG есть несколько алгоритмов сжат
Оглавление

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

.jpg

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

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

Для примера:

Качество 80, 117 килобайт
Качество 80, 117 килобайт
Качество 0, 18 килобайт
Качество 0, 18 килобайт

png8 и .gif

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

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

No Dither, 54 килобайта
No Dither, 54 килобайта
Diffusion, 99 килобайт
Diffusion, 99 килобайт
Pattern, 86 килобайт
Pattern, 86 килобайт
Noise, 113 килобайт
Noise, 113 килобайт

Для всех

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

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

ImageOptim — better Save for Web