Формат JPEG разрешает эту проблему, существенно снижая размеры файлов фотоизображений. Уменьшение размеров файла достигается путем выборочного удаления цветов из изображения и заменой недостающей цветовой информации смешиванием оставшихся цветов по шаблону растрирования {dither pattern). Шаб — лон растрирования использует два или более из оставшихся цветов графического изображения для получения третьего цвета. Процесс растрирования позволяет программе, сохраняющей изображение, сохранить три цвета, используя два пик — селя вместо трех, что уменьшает размер файла изображения. Благодаря сокраще — нию количества пикселей файлы, сохраненные с использованием формата JPEG, имеют намного меньшие размеры. Собственно говоря, размеры файлов JPEG —

изображений обычно составляют Vioo размера исходного файла.

30 2 Глава 6. Графика





Использование сокращения цветности для сохранения файла в формате JPEG

называется сжатием с потерями (lossy compression), что подразумевает сжатие с потерей информации. Помните: при применении схемы сжатия JPEG к фото — изображению удаленную информацию восстановить нельзя. Следовательно, все — гда нужно делать копию исходного изображения и сохранять копию с новым

именем файла в формате JPEG. Так у вас будет исходное изображение со всей цветовой информацией для использования в будущем и сжатый файл (значи- тельно меньшего размера) для ваших Web-страниц.

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

30-процентной степенью сжатия (о степенях сжатия будет рассказано подробнее

в подразделе «Преобразование графики в Web-изображения с помощью программ

редактирования изображений» далее в этой главе).

Поскольку формат JPEG удаляет цвета из исходного изображения, следуя оп — ределенному набору инструкций, нельзя создать JPEG-изображение с использо — ванием Web-безопасной палитры (Web-safe palette). Кроме того, изображения, со — храненные в формате JPEG, должны использовать цветовое пространство RGB (красный, зеленый, синий), но не шкалы серого (оттенки серого) или CMYK

(голубой (Cyan), пурпурный (Magenta), желтый (Yellow), черный (blacK)). И, на — конец, формат JPEG дает возможность сохранять изображение с использованием

прогрессивного или непрогрессивного режима.



Глава 6. Графика 30 3





Прогрессивный режим (progressive mode) загружает файл за три прохода. Этим

создается видимость расплывчатого изображения, которое медленно становится четче по мере загрузки информации. Непрогрессивный режим (nonprogressive mode) загружает изображение за один проход, сверху донизу. Преимущество прогрес — сивного режима заключается не в более быстрой загрузке изображения в итоге, а

в том, что так у посетителя есть хоть какое-то развлечение вместо того, чтобы наблюдать за медленной загрузкой изображения сверху донизу, что можно видеть на рис. 6.14.



Рис. 6.14. Прогрессивный метод загрузки JPEG-файла помогает развлечь посетителя в процессе загрузки изображения

30 4 Глава 6. Графика





ПРАКТИКУМ

Перед тем, как сохранять фотоизображения в формате JPEG, ознакомьтесь с при —

веденными ниже советами, как сделать размер файла еще меньше:

• Мягкие полутона (soft tonal qualities). JPEG-изображения сжимаются до меньших размеров, когда они содержат мягкие переходы цветов. Повыше — ние четкости изображения (sharpening) оказывает обратное действие при сжатии изображения с помощью формата JPEG.

• Дополнительное размывание (additional blurring). Хотя размывание — не луч — ший способ при работе с фотоизображениями, применение мягкого раз — мывания на фоновых участках перед сохранением файла в формате JPEG уменьшает размер файла.

• Снижение насыщенности (decreased saturation). Хотя и не всегда эффектив — ное, снижение насыщенности, или интенсивности, цветов в фотоизображе — нии может уменьшить размер файла.

• Снижение контрастности изображения (reduced image contrast). Снижение контрастности изображения (подобно размыванию) обычно уменьшает раз — мер файла.

• Взвешенная оптимизация (weighted optimization). Если у вас есть Photoshop

6.0, вы можете воспользоваться взвешенной оптимизацией для управления сжатием изображения. Взвешенная оптимизация позволяет использовать

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

При публикации фотографий на Х^еЬ-странице необходимо сохранять равно — весие между качеством изображения и временем ожидания, необходимым для загрузки изображений с высоким разрешением. Формат JPEG помогает поддер — живать такое равновесие.

Сохранение аппликаций и текста в файл формата GIF

Формат GIF (Graphics Interchange Format — формат графического обмена), как уже упоминалось, представляет собой еще один формат, который можно исполь — зовать для сжатия графических файлов, предназначенных для публикации в Internet. Формат GIF наиболее эффективен при работе с аппликациями, логоти — пами и изображениями, содержащими много резких границ и мало цветов, —

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

При сохранении цветного графического изображения с помощью формата GIF процесс сжатия снижает число битов, разрешенное для описания цвета в каждом пикселе в файле, с 24 бит до 8 бит. Следовательно, GIF-сжатие умень — шает максимальное количество цветов в файле с 16.7 млн. до 256. (Существует

Глава 6. Графика 30 5





только 256 комбинаций для каждого из 8 битов информации, имеющихся для

описания цвета каждого пикселя в GIF-файле.) Если исходное цветное изобра — жение содержит более 256 цветов, формат GIF сохраняет представительную вы- борку основных цветовых областей в таблице цветов исходного изображения и использует эту выборку для создания GIF-изображения. Поскольку фотографии обычно содержат тысячи, если не миллионы цветов, визуальный результат по — пытки сохранить фотографию в GIF-файле будет неудовлетворительным (см. рис.

6.15), равно как и приведет к созданию изображения с огромным размером файла.

Формат GIF делает файлы изображений меньше как за счет уменьшения чис —

ла битов для описания каждого цвета в файле, так и за счет сжатия оставшихся битов с помощью схемы RLE. RLE — это схема сжатия, наиболее пригодная для сжатия больших участков сплошного цвета. Формат GIF идентифицирует боль- шие блоки сплошного цвета и фиксирует местоположение этих участков. При сохранении файла блоки сплошного цвета удаляются из изображения и заменя — ются координатами, или местоположением, исходного цвета. Загружая файл, Web-браузер восстанавливает блоки сплошного цвета с помощью ранее зафикси- рованных координат. Поскольку аппликации, логотипы и текст содержат боль- шие области одного и того же цвета, формат GIF идеально подходит для сжатия

файлов упомянутых Wnoe изображений.

Изображения, сохраненные в формате GIF, используют цветовое пространство RGB (красный, зеленый, синий) с 256 или меньше цветами, но не CMYK. Кро — ме того, GIF дает возможность сохранять изображение с использованием черес — строчного или нечересстрочного режима.













Исходное изображение









Изображение в формате GIF

Рис. 6.15. Формат GIF, будучи применен к фотографии, придает блочный или ступенчатый вид

областям изображения с плавными переходами цветов

306 Глава 6. Графика





Чересстрочный режим (interlaced mode) загружает файл за три отдельных про- хода. Этим создается видимость расплывчатого изображения, которое медленно становится четче по мере загрузки информации. Нечересстрочный режим (noninterlaced mode) загружает изображение за один проход, сверху донизу. Пре — имущество чересстрочного режима заключается не в более быстрой загрузке изображения в итоге, а в том, что так у посетителя появляется хоть какое-то раз — влечение вместо того, чтобы наблюдать за медленной загрузкой изображения сверху донизу (см. рис. 6.16).

Ниже приведены некоторые хитрости и соображения, с помощью которых можно получить файл наименьшего возможного размера при сохранении графики в фор —

мате GIF:

• Участки сплошного цвета (solid areas of color). GIF-изображения сжимаются до меньших размеров, когда изображение содержит большие сплошные

участки цвета; участки GIF-изображения, содержащие переходы цветов, сжимаются хуже.

• Количество цветов (number of colors). Использование меньшего количества цветов дает файл меньшего размера. Количество цветов в изображении оп — ределяет размер GIF-изображения. GIF-изображение, содержащее четыре цвета, будет сжато до размера, значительно меньшего, нежели GIF-изобра — жение, содержащее 20 цветов. Чем меньше цветов, тем меньше размер

файла и тем быстрее файл загружается.

• Уменьшение растрирования (reduced dithering). Растрирование — это процесс,

в ходе которого компьютер использует два цвета для получения третьего. Растрирование приводит к созданию файла с большим количеством цветов

и усложняет для формата GIF сжатие изображения.

Глава 6. Графика 30 7



Создание видимости быстрой загрузки рисунков

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

С помощью прогрессивного или чересстрочного режима вы даете Web-браузе —

ру инструкции по загрузке графического файла. При отсутствии обоих этих ре — жимов Web-браузер загружает файл сверху донизу. Следовательно, для посетите — лей сайта изображения появляются на экране по одной строке развертки (то есть, по одному горизонтальному ряду пикселей) за раз.

При использовании прогрессивного или чересстрочного режима в JPEG — или GIF-файле Web-браузер загружает изображение в три прохода. (Некоторые про — граммы позволяют выбрать число проходов.) При первом проходе браузер загру — жает каждую третью строку развертки, затем следующую треть строк, и завершает изображение загрузкой последней трети строк развертки.

Скажем, например, из-за больших размеров файлов графики на вашем Web — сайте изображения загружаются слишком медленно. Если вы не сохранили фай — лы с использованием прогрессивного или чересстрочного режима, посетитель ви- дит, как на экране появляется рамка и изображение медленно «закрашивает» собой рамку сверху донизу. Посетитель понятия не имеет, что представляет со — бой изображение, до тех пор, пока браузер не завершит его загрузку. В результа —

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

При использовании прогрессивного или чересстрочного режима браузер быст —

ро загружает треть изображения. Хотя изображение получается расплывчатым,

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

они будут видеть расплывчатое представление картинки вместо ее половины.

(Конечно, вы надеетесь, что увиденное полностью, хотя и расплывчатое, изобра — жение на Web-странице заинтересует ваших посетителей в достаточной степени, чтобы они дождались завершения загрузки картинок.)



ПРАКТИКУМ

Чтобы использовать прогрессивный или чересстрочный режимы, нужно открыть графический файл в программе редактирования изображений и сохранить его с использованием опции Progressive (Прогрессивная развертка) для файлов, сохра — няемых в формате JPEG, и опции Interlaced (Чересстрочная развертка) для файлов, сохраняемых в формате GIF. Например, если вы работаете с Adobe Photoshop, от- кройте изображение в Photoshop и выберите в меню File | Save for Web (Файл | Со — хранить для Web). Затем отметьте флажок Progressive (Прогрессивная развертка) для JPEG-файлов или Interlaced* (Чересстрочная развертка) для GIF-файлов, как показано на рис. 6.17.

308 Глава 6. Графика



Помните, при создании Web-страницы дело вовсе не в кнопках и не в HTML-коде. Более того, большинство посетителей вашего Web-сайта никогда не будут смотреть на ваш HTML-код. Самое главное, о чем стоит задумываться на фазе проектирования, — это как развлечь и проинформировать посетителя. Ис- пользование прогрессивного и чересстрочного режима поможет удержать посети — телей там, где это необходимо.



ПРИМЕЧАНИЕ Сохраняя картинку как JF’EG — или GIF-файл с помощью программы редакти- рования изображений, вы можете использовать прогрессивную развертку для формата JPEG

и чересстрочную развертку для формата GIF. Следует понимать, что прогрессивная и черес — строчная развертки не являются функциями HTML-кода. Напротив, они представляют собой опции, выбираемые при сохранении графического файла.





Работа с форматами файлов PNG-8 и PNG-24

Формат PNG (Portable Network Graphic — переносимая сетевая графика) —

последнее пополнение в списке форматов файлов изображений. Форматы PNG-8

и PNG-24 представляют собой два новейших и наиболее универсальных из фор — матов, используемых для сжатия графических файлов для Internet. Третий формат

PNG, PNG-32, дает большую степень контроля над цветом изображения; однако наиболее распространенными из форматов PNG являются PNG-8 и PNG-24.

Для применения в среде Web у PNG фактически свойственны три преимуще — ства по сравнению с GIF:

• Альфа-каналы (alpha channels). Переменная прозрачность.

Глава 6. Графика 309





• Коррекция гаммы (gamma correction). Межплатформенное управление ярко —

стью изображения.

• Двумерная чересстрочная развертка (two-dimensional interlacing). Метод про- грессивного отображения.



Кроме того, практически во всех случаях PNG сжимает лучше, недели GIF, однако различие, как правило, составляет не более 5-25 процентов, — не такой уж существенный фактор для того, чтобы Web-дизайнеры переключились с GIF

на PNG на одном лишь этом основании.

Выполняя сжатие аналогично формату GIF, формат PNG-8 уменьшает коли — чество цветов в исходном изображении до 256. Кроме того, формат PNG-8 ис — пользует для уменьшения размера файла RLE-сжатие (как было описано в под —

разделе «Сохранение аппликаций и текста в файл формата GIF» ранее в этой главе). В противоположность ему, формат PNG-24 способен сохранять фотоизоб- ражения таким же образом, как и формат JPEG, за одним исключением: формат PNG-24 не уменьшает размер файла за счет удаления цветов из изображения. Следовательно, он представляет собой метод сжатия файлов без потерь.



ПРАКТИКУМ

С помощью формата PNG-8 можно уменьшить размер файла аппликации, логоти —

па и текста за счет сжатия больших сплошных участков цвета. Как и формат GIF, формат PNG использует технику сжатия без потерь. (Помните, что формат JPEG производит сжатие с потерями путем удаления некоторой части цветовой инфор- мации исходного файла.) Сжатие без потерь означает, что формат PNG-24 умень — шает размер файла картинки без потери исходных цветовых данных. Кроме того, форматы PNG-8 и PNG-24 используют RLE-сжатие (как и формат GIF) для

уменьшения размера файла без снижения качества изображения (см. рис. 6.18).





310 Глава 6. Графика



Хотя PNG — отличный файловый формат, с ним связаны две существенных проблемы. Во-первых, поскольку формат PNG-24 не удаляет цветовую информа —

цию из файла, он не может сжимать графические файлы до размеров столь же небольших, как и формат JPEG. (Помните, вы пытаетесь уменьшить размер фай —

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

Вторая, и, пожалуй, наиболее важная проблема состоит в том, что PNG-8 и PNG-24 только недавно получили полную поддержку в наиболее популярных бра- узерах — Netscape Navigator 6 и Internet Explorer 5. Хотя более ранние версии Explorer и Navigator поддерживали формат PNG, эта поддержка ограничивалась отображением графики в формате PNG. Поддержка же переменной прозрачнос —

ти и двумерной чересстрочной развертки была эпизодической. На момент напи — сания этой книги некоторые опросы предполагают, что до 20 процентов посети — телей Web не располагают последними версиями Navigator и Explorer, и, следовательно, неспособны просматривать изображения в формате PNG. Имейте это в виду, работая с форматом PNG.



Преобразование графики в Web-изображения с помощью программ редактирования изображений

Чтобы сохранять изображения для последующего использования в Internet, вы должны пользоваться одним из трех форматов: JPEG, GIF или PNG. По правде говоря, форматы файлов Web-изображений на самом деле представляют собой

схемы сжатия, разработанные для уменьшения размера файла графического изоб — ражения. Размер файла — немаловажное соображение при сохранении графичес — ких файлов, поскольку чем больше размер файла, тем дольше Web-браузер загру —