Основано 12 декабря 1998 годасделаем веб лучше!
Тяжело в учении - легко в бою!Pro.Net.ru: субъективные заметки об интернет-дизайне
главнаязаметкиобзорыресурсыгостиstas@pro.net.ru
Что нового?


[16.06.2001] - новый обзор - Дизайн для графики.

Почтовая рассылка теперь проводится в HTML-формате, и поэтому иллюстрации к материалам теперь можно смотреть прямо в мэйлере.

[11.06.2001] - новый обзор - Креатив-бюро по-русски.

[6.06.2001] - новый обзор - Дискриминация GIFа.

Архив новостей 


Предложить сайт для обзора
Частые вопросы
Информация о сайте


Создание прозрачных PNG изображений.
Заметки

29. PNG, который не GIF

Если спросить начинающего веб-дизайнера о том, графические файлы каких форматов используются для подготовки WWW-страниц, он ответит, что всего таких формата два: GIF и JPEG. Более-менее опытный специалист добавит к ним еще один: PNG. Этому графическому формату и посвящена заметка, которую вы сейчас читаете.

PNG (произносится как “пинг”) — аббревиатура словосочетания Portable Network Graphics. Как видно из названия, этот формат предназначен специально для передачи изображений по сетям.

Неофициально PNG расшифровывают как “PNG's Not GIF” — “PNG — это не GIF”. Создан он был специальным комитетом, состоявшим из 23 человек, возглавлял который Томас Бутелл. Разработчики, среди которых было много “идейных” врагов GIF, ставили своей целью создать новый графический формат, который включал бы все лучшее формата GIF, был бы лишен его недостатков и мог бы полностью вытеснить его с места основного формата графики для WWW.

Спецификация 1.0 формата PNG выглядит впечатляюще: как и GIF, новый формат поддерживает сжатие без потерь (то есть без ущерба качеству изображения), чересстрочность (interlacing), прозрачность цвета (transparency), хранение пользовательских данных (например, комментариев). Но, в отличие от GIF, он может сохранять truecolor-изображения с глубиной цвета до 48 бит на пиксель (GIF, как вы знаете, ограничен всего 8 битами на пиксель), изображения в шкале серого цвета с глубиной до 16 бит на пиксель, поддерживает альфа-канал и гамма-индикатор. Кроме того, PNG может использоваться абсолютно бесплатно, а вот разработчики программ, использующих формат GIF (читающих и записывающих файлы в этом формате), должны заплатить за лицензию фирмы , владеющей правами на алгоритм сжатия LZW, примененный в GIF.

Правда, PNG 1.0 не может хранить несколько изображений в одном файле и, следовательно, анимация, одна из самых привлекательных черт формата GIF, в PNG пока не доступна. Но, как любят говорить сторонники PNG, именно “пока”: PNG — очень перспективный формат (примерно как Linux — очень перспективная операционная система), и поэтому в будущем недостатаки PNG обязательно будут устранены.

В настоящее время отображение картинок в формате PNG поддерживают все браузеры из первой тройки лидеров рынка: MS Internet Explorer, Netscape Navigator и Opera. Читать и сохранять PNG-файлы умеют все более-менее нормальные графические редакторы.

Если вы попробуете сохранить файл в формате PNG, то графический редактор сначала покажет окно с опциями изображения — Adam7, Sub, Up, Path, Average и др. Думаю, нужно пояснить их назначение.

Загадочный термин Adam7 обозначает алгоритм черессторчности изображения (впрочем, других схем чередования строк в PNG не применяется), названный так в честь его изобретателя Адама М. Костелло (цифра 7 указывает на число проходов, за которые изображение “проявляется” на экране). В отличие от схемы чересстрочности формата GIF, где вместо последовательной записи строк (1, 2, 3, 4, 5…) применяется запись строк в порядке 0, 8, 9, 2, 10, 5, за первые шесть проходов схемы Adam7 на экран выводятся строки с четными номерами, а за последний, седьмой — нечетные строки. При такой схеме изображение появляется на экране сначала в виде квадратов 8x8, затем — прямоугольников 8x4, потом — квадратов 4x4, после этого — прямоугольников 4x2 и т.д. По сравнению с чересстрочной схемой формата GIF схема Adam7 значительно ускоряет ”поэтапный” вывод изображения на экран, и кроме того, позволяет распознать воводимую картинку после фактического получения 20-30% информации из файла (у GIF этот параметр находится на уровне 50%).

Термины Sub, Up, Average и Path обозначают различные фильтры, которые повышают эффективность метода сжатия Deflate, используемого в PNG (а также, кстати, в известном архиваторе pkzip). Фильтры эти никаким образом не ухудшают качество изображения, так как при открытии PNG-файла, например, браузером для отображения картинки на WWW-странице, производится обратное восстановление изображения в “нефильтрованном” виде.

Фильтры применяются не к пикселям, а к байтам пикселей строки развертки (уж извините за использование специальной программистской терминологии). Так, фильтр Sub отмечает разность между значением байта в текущем пикселе и значением в том же байте предыдущего пикселя (аналогичный алгоритм применяется в формате TIFF); фильтр Up фиксирует разность байтов пикселей, расположенных в соседних строках (т.е. по вертикали); фильтр Average сохраняет разность между значениями байтов текущего пикселя и байтов пикселей, расположенных под текущим пикселем и слева от него. И, наконец, фильтр Path вычисляет значение с помощью линейной функции. Подозреваю, что я зря расписал здесь отличия между алгоритмами фильтров: разница между файлами одинаковых изображений, записанными с различными фильтрами, составляет максимум полпроцента; “чемпионом” же, по моему опыту, является фильтр Up, выдающий самые компактные файлы.

Во некоторых источниках я читал, что алгоритм сжатия изображения PNG более эффективен, чем GIF. Ну что же, давайте проверим. Берем две такие “тестовые” картинки:

В формате GIF файл картинки слева занимает 1,9 Кбайт, в формате PNG — 1,2 Кбайт. Выигрышу в 37%, однако, радоваться не стоит. Вертикальные линии, из которых состоит первое изображение — слабое место формата GIF, а вот картинки с горизонтальными линиями, напротив, сжимаются очень хорошо. Например, объем файла изображения справа в формате GIF составляет 600 байт, а в формате PNG — те же 1,2 Кбайт. Если же попробовать сохранить в обоих форматах не какие-то там зеброобразные тестовые картинки, а реальный логотип, например, такой:

получим файлы объемом 3,412 (GIF) и 3,448 (PNG) Кбайт. Как видите, PNG и здесь, хотя и ненамного, уступил GIF.

Но, может быть, формат PNG может хорошо показать себя там, где GIF'у точно ничего не светит — в области сохранения многоцветных (более 256 цветов) изображений? Посмотрим. Берем такую вот картинку (в оригинале — 400x250, 24 бита):

и сохраняем ее в форматах JPEG и PNG. JPEG-файл с 40%-компрессией (заметно некоторое ухудшение качества) занимает на диске 39 Кбайт, 30% (ухудшение качества заметно только при тщательном сравнении оригинала и копии) — 46 Кбайт.

Конечно, эти игры со степенями сжатия тут некорректны, так как PNG сжимает изображения без потери качества. Хорошо: JPEG, потеря качества 0%, результат — 115 Кбайт. А вот сохранение картинки в формате PNG порождает файл объемом 190 Кбайт! Никакими ссылками на “особенности конкретного изображения” или “кривизной программного обеспечения” нельзя оправдать увеличение размера картинки более чем на 50%.

На мой взгляд, формат PNG нельзя однозначно признать мертворожденным. Но и объявлять его полноценной заменой GIF'у тоже преждевременно. GIF, как вы могли убедиться, вполне может “сделать” PNG при работе с реальными изображениями, и, кроме того, он поддерживает анимацию. Что касается полноцветных изображений, то здесь альтернативы формату JPEG по-прежнему нет.

18 апреля 2000 г.

НазадНазадДалееДалее


| Главная | Заметки | Обзоры | Ресурсы | Карта сайта |

Copyright © 1998-2001.
Pro.Net.ru