Понедельник, 27 Августа 2012 12:17

Оптимизация изображений и особенности PNG-формата

Written by 
Оцени эту запись
(1 Голос)

Хочу поделиться некоторыми нюансами сохранения изображений для веб. Раньше вес встраницы имел большое значение, поскольку скорость интернета была очень маленькой. В книге Якоба Нильсона по юзабилити утверждается, что если страница загружается более 10 секунд, пользователь у нее уже уходит на другую или забывает причину ее посещения. Раньше, для уменьшения веса страницы, картинки сохраняли только с цветами для веб(есть такая галочка в Фотошопе). Сейчас это уже считается перегибом. Но часто полет фантазии дизайнера приводит в тому, что без оптимизации на обойтись.

 

1. Если на картинке нет прозрачности, то чаще всего jpg весит меньше png.

Возьмем картинку размером 600px*393px и попробуем сохранить ее для веб в jpg и png:

 

 

При сохранении такой картинки в jpg, мы получили ее вес - 131.3К,

она же в png весит 276К.

 

2. При сохранении картинки в формате jpg, можно выставлять качество картинки. В Фотошопе слишком много цветов, большинство из которым человеческий глаз все равно не различает. Даже поставив качество 90%, вместо 100, вес той же картинки получим 93.04К. На вид эта картинка осталась прежней, но ее размер значительно уменьшился.

 

3. Второй способ уменьшения веса картинки - постеризация. В меню Фотошопа ее можно найти так:

Image -- Adjustments -- Posterize...

Эта тема также работает с количеством цветов картинки, но другим образом. Постеризация изменяет глубину цветности изображения. 

 

4. Если изображение черно-белое (оттенки серого, градиент белого), то его вес уменьшится при переводе его с RGB в Grayscale.

 

5. Для сохранения изображений, содержащих прозрачные области, используются форматы png8 и png24. Отличаются они разным пониманием прозрачности. Png24 для сохранения прозрачности использует альфа-канал, то есть для каждого пикселя изображения этот формат сохраняет данные и его цвете и о его прозрачности. В связи с тем, что у разных форматов PNG данные о изображении сохраняются по разному, то и вес изображения будет разным. Вообще считается, что изображение с полупрозрачностью лучше срхранять в png24, а изображение с малым количеством цветов в png 8.  Потому при сохранинии картинок с малым количеством цветов и областями полупрозрачности, нужно пробовать сохранять оба варианта и выбирать меньший по весу.

 

6. Также png8 и png24 отличаются способом отображения в всеми любимом браузере IE6. Первый области полупрозрачности делает полностью прозрачными, а второй - заливает серым цветом.

 

7. Кроме возможностей Фотошопа, для оптимизации изображений можно использовать отдельные сервисы, как OptiPNG или PNGout

 

 

Комментарии  

 
0 #2 Serjik 04.08.2015 14:21
OPTIPNG и PNGOUT в 2015 году... :-x Мда, это даже не смешно. Это ведь морально устаревший хлам. Сейчас "рулят" утилиты на базе движка ZOPFLI, если кто вдруг не в курсе. :roll: Вот для примера короткий список современного софта для глубокой оптимизации: скриптовые утилиты (Image Catalyst http://habrahabr.ru/post/215213/ и ScriptPNG http://css-ig.net/scriptpng и т.п.), или утилиты с графическим интерфейсом - Color Quantizer http://kherson.myftp.biz/cq/
 
 
0 #1 Dex 11.09.2014 06:52
самая крутая програмулина по сжатию фалов - FileOptimizer
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов