про png

У минулій статті розглядалися головні особливості формату PNG, тепер скористаємося ними для оптимізації зображень.

Почнемо з самого простого способу # 151; постерізациі зображення. Якщо говорити складною мовою, постеризація # 151; це зміна кількості рівнів яскравості в кожному колірному каналі зображення, якщо простим # 151; зміна кількості квітів.

Відкриємо тестову картинку (PNG, 12 КБ) в фотошопі і викличемо Image → Adjustments → Posterize. Переміщайте слайдер, щоб побачити, як змінюється зображення:

про png

15 рівнів (3014 байт)

про png

50 рівнів (6584 байта)

Чи не складно помітити, що чим менше рівень, тим менше кольорів у зображення і більший одноколірні області. І тим менше важить зображення завдяки тому, що великі одноколірні області краще фільтруються і упаковуються. Цей метод особливо ефективний на фотографічних зображеннях, де постеризованих області не сильно помітні.

про png

Без постерізациі (152 КБ)

про png

50 рівнів постерізациі (108 КБ)

Наступний спосіб трохи складніше, він використовується в зображеннях з напівпрозорими областями. Суть його в наступному: всі непрозорі пікселі зберігаються в одному файлі PNG-8, а напівпрозорі # 151; в іншому. Побачити в дії цей спосіб можна в статті Володі Токмакова. я лише покажу, як можна швидко відокремити напівпрозорі пікселі від непрозорих.

Як приклад візьмемо це зображення (PNG, 62 КБ):

про png

Відкриваємо в фотошопі. Слід пам'ятати, що все поділюване зображення повинно бути в одному шарі, тому якщо ваше зображення складається з декількох шарів (тіні, відображення, відблиски і т. П.), Їх потрібно попередньо об'єднати в один шар.

Спочатку потрібно виділити об'єкт в шарі, для цього робимо Ctrl-клік (або # 8984; -клік на Маке) на зображенні в палітрі шарів (Layers):

про png

Переходимо в палітру каналів (Channels) і створюємо новий канал з виділення, натиснувши на відповідну іконку:

про png

Знімаємо виділення (Ctrl-D або # 8984 ;-D), виділяємо щойно створений канал і викликаємо команду Threshold (Image → Adjustments → Threshold). Перетягуємо слайдер в крайнє праве положення:

про png

Ми отримали маску для виділення абсолютно непрозорих пікселів. Залишилося завантажити виділення (Ctrl-клік / # 8984; -клік на зображенні каналу Alpha 1), перейти на палітру шарів (Layers), виділити шар із зображенням і виконати команду Layer → New → Layer via Cut. Вийшло два шари: в одному непрозорі пікселі, в іншому - напівпрозорі.

Залишилося зберегти ці шари в окремих файлах: непрозорі пікселі зберігаємо в PNG-8, а напівпрозорі # 151; в PNG-24 (для цього зображення додатково можна виконати постерізацией):

про png

PNG-8
128 кольорів + dithering
17 КБ

про png