Найти тему
тотСамыйАйтишник

Как уменьшить размер PNG на 85% без потери визуальной точности.

Приветствую Тебя, мой дорогой друг. В этом году я кое-что узнал (или, я думаю, заново выучил): насколько важно уделять пристальное внимание разрядности цветовой глубины изображений. В свое время мы одержимо выбирали 2-, 4- или 8-битную глубину цвета для наших GIF-файлов, потому что, когда многие пользователи использовали телефонную линию для просмотра веб-страниц, каждый килобайт был на счету.

Теперь, когда огромное количество из нас выходит в Интернет через широкополосный доступ, угадайте, что? Все еще на счету каждый килобайт. Потому что не у всех есть доступ к широкополосной безлимитной связи, особенно в мобильном сегменте; а также, когда мы можем ускорить рендеринг страницы, стоит это делать. Я предполагал, что инструменты оптимизации решают для нас такие тривиальные вещи, как подбор оптимальной глубины цвета, но обнаружил, что ошибался.
Это особенно верно для PNG. По умолчанию многие инструменты для редактирования изображений сохраняют PNG с глубиной цвета 2 в 24 степени на всякий случай.

Для фотографии это имеет определенный смысл (хотя, если это так, вам, вероятно, следует сохранить ее в формате JPG или WebP), но для логотипов и значков, это примерно на 2^24 цветов больше, чем вы на самом деле используете.

Итак, в Acorn, моем любимом редакторе, я уделил особое внимание уменьшению разрядности PNG в окне экспорта. Во многих случаях я уменьшал вес изображения на 80% или более, индексируя цвета в палитре из 256 или менее значений без потери визуальной точности. Опять же, я говорю не о фотографиях.

Окно программы Acorn for MacOS
Окно программы Acorn for MacOS

Рассмотрим следующий пример. PNG с полноцветной глубиной составляет около 379 КБ. Если мы ограничим изображение палитрой из 32 цветов, его размер составляет 61 КБ. И это можно сделать как раз во время экспорта: когда я запускаю их через ImageOptim, оптимизированные размеры составляют 359 КБ и 48 КБ. Данная операция позволяет сэкономить около 85% веса только за счет уменьшения глубины цвета. И если бы я развернул изображение и обнаружил, что ему не хватает заданной глубины, я мог бы повторно запустить процесс, чтобы использовать 64 цвета: окончательный размер в этом случае составляет 73 КБ, что по-прежнему огромная экономия.

Уменьшение глубины цвета на глаз явно более обременительно, чем использование скрипта оптимизации для всех файлов в каталоге изображений, но, по моему опыту, результаты намного эффективнее с точки зрения размера изображения и, следовательно, удобства для пользователя. Это самое главное, не так ли?

Обрати внимание:

Поставь лайк если понравилась статья, тебе всего лишь "клик", а мне радости полные штаны =).