Использование JPEG и PNG для веба

Источник материала:

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

Графические изображения, или, проще говоря, картинки, в html-документах бывают двух категорий - содержательные и для красоты. Графика для красоты - это логотипы, элементы меню, оформление. Содержательная же графика несёт информационную нагрузку в публикуемых статьях и материалах и представляет собой иллюстрации, схемы, диаграммы и т.д. Эта статья посвящена исключительно содержательной графике, про оформление написано уже достаточно много. И предназначена эта статья совсем не для профессиональных дизайнеров-оформителей, а для тех, кому нужно использовать изображения в качестве содержательной информации на своём блоге или сайте.

Действительно, кроме текста, часто нужно разместить в качестве содержания веб-страницы математические, химические и другие виды формул, музыкальные ноты, диаграммы, электрические схемы, технические рисунки, чертежи, иллюстрации. И на данный момент только при помощи вставляемых в страницу картинок эту задачу можно решить.

Конечно же, есть, например, MathML для математических формул, SVG для векторной графики. Но поддержка всего этого в современных браузерах ещё весьма далека от идеальной. Особенно это справедливо для самого "продвинутого" в мире браузера от Microsoft, который даже несчастный формат PNG научился только к седьмой версии нормально отображать. Так что без картинок сейчас никак не обойтись.

Основными графическими форматами для веб-браузеров являются форматы сжатия изображений JPEG и PNG. Народ, в основном, использует во всех случаях JPEG. А это не всегда эффективно по качеству и размеру картинки. Бывают случаи, когда PNG однозначно лучше.

В математические основы этих форматов углубляться не будем. Оба этих стандарта имеют цветовую глубину в 16.7 миллионов различных оттенков. Главное различие этих форматов в том, что JPEG сжимает с потерями, а PNG сожмёт только то, что можно ужать, не нарушая качества оригинального изображения, даже если выставить максимальный уровень сжатия.

Просто рассмотрим особенности их алгоритмов сжатия на практических примерах. Или, говоря другими словами, протестируем эти форматы на следующих типах изображений: фотография, рисунок, схема, символы, текстурное изображение. И на основании практических результатов определим, в каких случаях хорош PNG, а в каких - JPEG. Для этого я подготовил в GIMP соответствующие примеры каждого типа размером 640х480 в формате BMP, а потом конвертировал их в PNG и JPEG1. Сжатие PNG - 9, а JPEG - 70%.

А что же GIF? Это старый формат с индексацией всего 256 цветов. Он эдакий древний предшественник PNG. Но современные редакторы, которые имеют внутренний формат, как минимум, восемь бит на каждый из трёх цветовых каналов, часто с трудом конвертируют эти 24 разряда в индексированные 256 цветов и могут появляться непредсказуемые артефакты. Поэтому GIF лучше использовать для всяких анимированных кнопочек-пупочек и прочего оформительства, но не более того.

Фотография

Фотографические изображения характеризуются большим количеством мелких деталей и полутоновых переходов. К фотографиям относятся и результаты моделирования в играх и в 3D-редакторах.

Логично рассуждать, что использование PNG с его бережным отношением к мелким элементам будет в данном случае неэффективным. Так оно и есть. Картинка фотографического типа в этом формате потянула 550 килобайт, а в формате JPEG с компрессией всего 70% - 57 килобайт. Разница в десять раз, при не очень ощутимых потерях в качестве.

То есть для размещения в Интернете фотографий однозначно подходит JPEG. Но всё-таки формат PNG сжал оригинальный bmp-файл в два раза без потерь. А это тоже результат положительный, когда требуется однозначное качество картинки.

Рисунок

Рисунок - это полная противоположность фотографии. Здесь бывает мало полутоновых переходов, здесь большие пространства однородных цветов. То есть всё то, что так хорошо ужмётся форматом PNG. К рисункам следует относить графики, диаграммы, блок-схемы.

Практика подтверждает теорию. В формате PNG рисунок имеет размер четыре килобайта, а в JPEG при стандартных 70% сжатия - восемь с половиной. Причём рисунки имеют обычно резкие границы, которые JPEG-формат сильно портит артефактами.

Так что, когда публикуем рисунки, то лучший выбор здесь как раз PNG.

Чертёж

Все эти чертежи, электрические схемы отличаются большим количеством тонких линий, наличием надписей и текстов мелким шрифтом. С одной стороны, PNG всё это будет беречь, и результат по размеру окажется побольше, чем JPEG. С другой стороны, визуальное качество этих линий и надписей у PNG будет весьма презентабельным.

На практике JPEG потянул двадцать шесть кило, а PNG - сорок три. Но всё-таки склоняюсь к мнению, что в данном случае качество имеет больший приоритет, так как чертёж должен быть как можно более аккуратненьким.

В общем, в случае чертежей однозначного варианта нет. Нужно смотреть, как говорится, по обстоятельствам. В одном случае будет хорош PNG, в другом сгодится JPEG.

Символьные картинки

Ноты, математические, химические формулы, всякие малораспространённые символы и алфавиты - всё это тоже приходится отображать на веб-страницах через изображения. В основном, это чёрно-белые картинки с малой плотностью элементов-символов. Поэтому преимущества JPEG здесь не работают, и формат PNG показывает лучшие результаты как по объёму файла, так и по качеству отображаемых символов.

В нашем случае данную партитуру PNG ужал в четырнадцать килобайт, а JPEG - в двадцать шесть.

Комментарии излишни, и PNG - это однозначный выбор математиков и прочих представителей науки.

Текстурные изображения

Весьма интересный пример. Казалось бы, изображения, созданные текстурированием, должны быть по своим свойствам близки к фотографическим изображениям, и JPEG здесь должен безусловно лидировать. Однако практика показывает обратное. Я перебрал много текстур в GIMP, и всегда картинки, созданные из текстур и сохранённые в формате PNG, по размеру не сильно уступали формату JPEG. Причём имели значительно меньший размер.

Например, в случае прилагаемой картинки с текстурой дерева в формате PNG файл весит семь с половиной килобайт, а JPEG - тридцать девять. Причём фактура этого изображения весьма фотографическая, с мелкими деталями. Объяснить этот феномен научно я пока не в состоянии. Но факт есть факт.

Таким образом, подытожим наши эксперименты. Как выяснилось теоретическим и экспериментальным путём, лучшим форматом для публикации фотографий в Интернете является JPEG. Для рисунков и символьной информации весьма предпочтителен PNG - и размер файлов небольшой, и качество идеальное.

Конечно же, приведенная информация актуальна и для создания обычных электронных документов в том же MS Word или OpenOffice.org. Ведь PNG и JPEG вместе составляют самодостаточный тандем для решения задач документальной содержательной графики.

Михаил АСТАПЧИК

1 Реальные иллюстрации можно посмотреть по адресу 51265.at.tut.by/kv1/test.htm.