Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Ускорение и защита сайта
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
39
Битрикс24

Битрикс24

www.bitrix24.ru

30
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Flowlu

Flowlu

flowlu.ru

10
GIFTD

GIFTD

giftd.tech

9
Aword

Aword

Приложение для изучения английских слов

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Секретные техники оптимизации PNG

163 2 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Сегодня на повестке дня некоторые малоизвестные техники оптимизации PNG. Возможно, вы уже используете сервисы для оптимизации или утилиты optipng, pngcrush или pngout. Но можно сделать изображения еще меньше.

PNG-формат предполагает отсутствие потерь в качестве при сохранении изображений. Но в некоторых случаях сохранение с искажениями (Dithering или постеризация) позволяет получить изображений, почти не отличное от оригинала, но сущестенно меньшего размера.

1. Постеризация, палитра и оттенки серого

PNG_2.webp

Постеризация (не путать с пастеризацией) позволяет уменьшить количество цветов в PNG файле за счет какого-либо адаптивного алгоритма (например, mediancut или k-means). Обычно уменьшение количества цветов в 2-3 раза незаметно для глаза, но приводит уменьшению размера изображения на 20-50%.

Наиболее известные инструменты пастеризации — Photoshop, pngquant, pngnq и TruePNG.

Выбор правильной палитры (например, использование только оттенков серого или только 256 цветов) — если это еще не сделано — также позволяет существенно сократить размер изображения (каждый пиксель кодируется 1 байтом вместо 3).

2. Маска прозрачности

PNG_3.webp

Малоизвестная техника, хорошая описанная Сергеем Чикуёнкомrel="nofollow">. Суть ее заключается в удалении цветовой информации (зануление) у полностью прозрачных пикселей. Это сокращает актуальное количество байтов в IDAT-чанке и позволяет применить более оптимальные фильтры.

К счастью, некоторые утилиты по оптимизации PNG, в частности, TruePNG позволяют выполнить это автоматически.

3. Размытие (dithering)

PNG_4.webp

Более интересная техника от Сергея, применимая не только к PNG изображениям. Суть заключается в выделение областей изображения, которые можно размыть (применить dithering) с сохранением визуального качества (а точнее, выделении областей изображения, для которых нельзя применять размытие).

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

Dithering позволяет усилить сжимаемость изображения фильтрами (за счет отбрасывания некоторой цветовой информации). Тонкая настройка экономит до 20% изображения. В автоматическом варианте Dithering пока не применим, но ваш любимый графический редактор позволит это сделать при помощи масок и селективных фильтров для PNG-изображения.

4. Чрезстрочность (interlacing)

png_11.gif

Техника чрезстрочности (interlacing) подобна последовательному (progressive) JPEG: при каждом проходе PNG-изображение получает больше информации, и детали изображения начинают «проявляться».

Смотрите также

X6Q_DQ.jpgТехнологии AMP и PWA в поиске Google – Будущее уже стало настоящим

Для любого проекта сочетание технологий АМР и PWA позволяет добиться быстрого первого контакта, молниеносного взаимодействия и самое главное– удобного, доступного продолжения контакта с пользователем в любой момент, даже оффлайн. #amp #pwa

Графические редакторы, как и консольные утилиты (например, convert), позволяют использовать чрезстрочность (по линиям или цветам) для PNG изображений. В ряде случае выигрыш от такого метода может составить 5-10%.

5. Эвристика фильтрации

PNG_5.webp

Основной подход для оптимизации представления цветовой информации в PNG – это полный перебор фильтров для каждой строки изображения, и подбор наиболее оптимального набора для изображения в целом. Но поскольку фильтры могут использовать цветовую информацию предыдущей строки, то количество вариантов даже для небольшого изображения (100 строк) получается значительным. Поэтому все утилиты делают те или иные предположения по эффективности фильтров и сокращают полный перебор.

Эвристические (предсказательные) алгоритмы могут обеспечить более эффективное применение фильтров, базируясь на особенностях данного изображения. Такой подход реализован, в частности, в утилите pngwolf. Использование эвристики фильтров в совокупности с другими оптимизаторами фильтров PNG уменьшает итоговый размер изображений.

6. Zopfli для сжатия

PNG_6.webp

Финальный пункт, где еще можно «дожать» PNG – это сжатие. PNG поддерживает большое количество алгоритмов сжатия, в частности, zlib, 7-zip, Kzip, zopfli. Имеет смысл использовать наиболее продвинутый из них — это zopfli (bzip2 не поддерживается из-за значительно времени разархивирования, а h.264 поддерживается только в WebP).

Использование zopflipng для сжатия PNG-файлов (не путать с «сжатием на лету», которое применяется для текстовых файлов) уменьшает актуальный размер цветовой информации уже после того как применена самая эффективная палитра и самые эффективные фильтры (и отключить архивирование в других утилитах оптимизации). Это уменьшит размер PNG еще на 3-7% относительно сжатия другими формата без существенного увеличения времени оптимизации.

7. WebP: легковесная альтернатива

PNG_7.webp

В WebP используется методы адаптивного квантования цветовой составляющей, чтобы предотвратить влияние цветовых каналов друг на друга. Изображение делится на блоки и для каждого блока применяется свой режим. Цветовое преобразование сохраняет неизменным значение зеленого канала G, преобразует красный R в зависимости от зеленого, и синий В в зависимости от зеленого, а затем в зависимости от красного.

Сжатие без потерь в формате WebP использует уже обработанные фрагменты изображения для работы с новыми пикселями. В случае если подходящие совпадения не найдены, используется локально созданная палитра. Эта палитра постоянно обновляется цветами, найденными при сканировании картинки.

По тестам Айри.рф примерно в половине случаев PNG изображений может быть уменьшено, в среднем, на треть за счет перевода в WebP формат. Но сохранять PNG-изображение обязательно: WebP поддерживается сейчас не всеми браузерами.

В заключении рекомендую следующий справочник по утилитам оптимизации PNG, которые могут дополнить ваш арсенал инструментов оптимизатора: PNG Tools Overview.

По материалам: searchengines.ru

0
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Tados
Разработчики индивидуальных IT-решений для сложных бизнес-процессов
Шергин Денис
А что скажете про FileOptimizer?
Ответить
Айри.рф
Ускорение и защита сайта
Nikolay Matsievsky
Судя по набору утилит - http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer - он ничем не уступает Image Catalyst. И, возможно, дает один из лучших вариантов при автоматической оптимизации изображений. Но нужно смотреть на настройки и порядок вызовов утилит оптимизации: в это может быть загвоздка.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать