Выбираем формат для картинки

Formats of picturesКак я уже писал ранее в статье "Правило трех 'И'", картинки являются неотъемлемой частью грамотного оформления ваших статей. К тому же, если вы выбрали не аскетичный вариант дизайна для своего блога, то и интерфейс оформления задействует графику. Посему, сегодня я решил поговорить о картинках. А точнее об облегчении веса картинки при минимальной потере качества за счет грамотного подбора формата, в котором картинка сохранена.

Для чего нам нужно так оптимизировать графику? Для чего уменьшать вес картинки? Все просто: чем меньше весят картинки, тем быстрее грузятся статьи вашего блога у читателей. А это, как вы понимаете, повышает в их глазах привлекательность вашего блога.

Для начала, думаю, стоит обозначить инструмент для работы с изображениями. Сразу хочу оговориться, что программ для работы с графикой много, и у каждого и вас могут быть свои предпочтения и привычки в выборе графического редактора. Я не собираюсь вас агитировать или переубеждать - просто обозначу свой личный выбор. Я, лично, для оптимизации картинки для веб пользуюсь Adobe Fireworks. Это профессиональный редактор со множеством возможностей, умеет работать с плагинами Photoshop, доступен, в том числе, и на русском. Firewoks имеет не особо сложный в освоении интерфейс и заточен в первую очередь под оптимизацию графики - именно то, что нам нужно.

Теперь о форматах изображения: современные браузеры работают с форматами GIF, JPEG и PNG. Рассмотрим в каких случаях имеет смысл использовать каждый из них.

GIF (расширение gif)
Основное отличие этого формата от прочих в том, что с его помощью можно создавать анимационные изображения. Они представляют из себя последовательность нескольких статичных кадров и информацию о том, сколько каждый кадр будет отображаться на экране. Анимацию можно сделать цикличной, тогда вслед за последним кадром начнётся воспроизведение первого, и так по кругу. Впрочем, для статических картинок этот формат тоже подходит. Еще к приятным особенностям данного формата можно отнести то, что один из цветов в палитре может быть заявлен как прозрачный. В этом случае, сквозь пиксели, помеченные как прозрачные, будет видно то, что находится под ними. Например, при наложении GIF-картинки с прозрачной областью поверх непрозрачной, в "окнах прозрачности" мы сможем наблюдать части нижнего изображения.

Теперь о других особенностях, менее приятных: палитра у данного формата составляет максимум 256 цветов, так что многоцветные картинки, как, к примеру, фотографии, сохранять в этом формате не рекомендуется. GIF использует метод сжатия, при котором хорошо сжимаются изображения, строки которых имеют повторяющиеся участки. В особенности изображения, в которых много пикселей одного цвета по горизонтали. Это легко проиллюстрировать: возьмем картинку 640х640 с черно-белой градиентной заливкой сверху вниз и сохраним ее в GIF. Затем повернем ту же картинку на 90°, так чтобы градиент пошел слева направо и тоже сохраним в GIF. Теперь сравним размер этих картинок: первая у меня весит 16,9 Кб, вторая 168 Кб - разница в 10 раз!

Globe Gradient 1 Gradient 2

JPEG (расширения jpg, jpeg, jpe)
Формат JPEG в наибольшей степени выгоден для сохранения фотографий и картин, содержащих реалистичные сцены с плавными переходами яркости и цвета. При этом, JPEG, напротив, малопригоден для сжатия чертежей, текстовой и знаковой графики, где резкий контраст между соседними пикселами.

Сжатие в формате JPEG осуществляется за счет так называемого прореживания. Суть его в том, что каждому блоку из 4 пикселов (2х2) яркостного канала присваиваются усреднённые значения. При этом для каждого блока 2х2 вместо 12 значений используется всего 6. Чем выше степень сжатия, тем выше потери качества изображения. К недостаткам сжатия по этому стандарту следует отнести появление на картинках с высокой степенью сжатия характерных артефактов: изображение рассыпается на блоки размером 8x8 пикселов (особенно заметно в областях с плавными изменениями яркости), в областях с высокой пространственной частотой (например, на контрастных контурах и границах изображения) возникают артефакты в виде шумовых ореолов. Тем не менее, JPEG довольно популярен из-за достаточно высокой степени сжатия и поддержки сжатия полноцветных изображений.

Демонстрация сжатия
Фотография заката в формате JPEG с уменьшением степени сжатия слева направо.

PNG (расширение png)
Формат PNG появился как замена устаревающему более простому формату GIF. PNG, также как и GIF, умеет работать с прозрачным цветом, но в отличии от него PNG пошел дальше - он предоставляет возможность использовать альфа-прозрачность или, как ее еще называют, частичную прозрачность. При этом подложка под полупрозрачной картинкой в формате PNG частично просвечивает сквозь изображение нашей картинки. По сравнению с GIF, у PNG фактически нет ограничения по цветовой палитре. PNG обладает более высокой степенью сжатия для файлов с большим количеством цветов, чем GIF, но разница составляет не более 5-25%, а небольшие 2-64-цветные файлы формат GIF сжимает не менее эффективно.

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

Кубики
Визуализация изображения в формате PNG с 8-битным каналом прозрачности. Шахматный фон обычно используется в графических редакторах в качестве "прозрачного" фона.

Если вкратце, не вдаваясь в технические детали, то вот, собственно, и все, что я хотел рассказать. Надеюсь, эти сведения помогут вам определиться с выбором оптимального формата для публикации изображения в зависимости от его структуры, детализации, цветовой палитры и световой насыщенности. Помните, картинка должна нести максимум информации при минимальном объеме!

Комментариев: 0

Отправить комментарий

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях