Сохранение аппликаций и текста в файл формата 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-браузер загру —

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

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



width=»60″ height=»150″ />



В данном примере программа редактирования изображений сжала графичес- кое изображение с использованием формата JPEG и затем сохранила сжатую

картинку в файле с именем photo. jpg. Атрибут sr c в дескрипторе

(src=M photo. jpg») не делает файл JPEG-сжатым изображением, а всего лишь идентифицирует графический файл, ранее сохраненный в формате JPEG.

Глава 6. Графика 31 1





ПРАКТИКУМ

Чтобы сохранять файлы в форматах JPEG, GIF или же PNG, вам понадобится программа редактирования изображений. Из коммерческих программ редактиро- вания изображений, имеющихся на рынке, наиболее популярными являются две — Adobe Photoshop и Macromedia Fireworks. Помимо коммерческих про — грамм, немало программ редактирования изображений можно найти в Internet.

На таких сайтах, как http://www. shareware. com И http://tucows. com, ВЫ СМО — жете найти и выгрузить множество приложений для редактирования изображе — ний (причем как условно-бесплатных, так и полностью бесплатных).

Скажем, у вас есть графическое изображение в цветовом пространстве RGB, и вы хотите использовать это изображение на Web-странице, но размер файла

слишком велик (более 1 Мб). Если вы располагаете программой Photoshop, вы можете открыть изображение и выбрать в меню File | Save for Web (Файл | Сохра —

нить для Web). Photoshop, в свою очередь, выведет на экран диалоговое окно

Save for Web (Сохранить для Web).

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

в формате JPEG, позволяют управлять качеством изображения. Качество опреде — ляется значением от 0 до 100 процентов (или от 1 до 10). Если вы отметили 100 процентов, программа редактирования изображений попытается уменьшить раз —

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

и больше цветов для получения меньшего и меньшего файла графического изоб — ражения. На рис. 6.19 показано различие между JPEG-изображениями, сохра- ненными со значениями качества 100, 60 и 20 процентов.

Короче говоря, чем ниже выбранный вами процент качества, тем меньше раз —

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



Создание Web-совместимых графических изображений на сканере

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

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

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

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







храняемых сканером, становится разрешением отсканированного изображения. Каждый из этих пикселей представляет собой фрагмент (то есть точку) цвета на изображении. Следовательно, если вы оптически сканируете изображение с бо — лее высоким разрешением, изображение содержит больше пикселей и, следова — тельно, больше информации. Проблема состоит в том, что чем выше разрешение сканирования, тем больше размер файла. Изображение в пространстве RGB раз- мером 5×5, отсканированное с оптическим разрешением 72 spi (samples per inch

— выборок на дюйм) дает файл размером 380 Кб (число пикселей в сохраненном изображении определяет размер файла изображения). Если вы отсканируете эту же картинку с оптическим разрешением 300 spi, вы получите изображение с

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

жаться, если поместить такую картинку на Web-страницу.

Комитет W3C устанавливает среднее разрешение Web-графики равным 72 ppi

(72 пикселя на линейный дюйм), что равно числу пикселей в линейном дюйме

на среднем компьютерном мониторе. Однако это вовсе не означает, что вы дол — жны сканировать все изображения, предназначенные для публикации на Web — страницах, с разрешением 72 spi.



ПРАКТИКУМ

Если изображение, которое вы хотите опубликовать на Web-странице, находится в

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

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





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

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

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