Май 2010

Вторая, и, пожалуй, наиболее важная проблема состоит в том, что 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, есть больше информа — ции (больше пикселей) для коррекции проблем, связанных с изображением (пыли, царапины, участки обесцвечивания). При увеличении размеров отскани — рованного изображения вы вынуждаете программу редактирования изображений вставлять дополнительные пиксели и окрашивать новые пиксели исходя из сред — него значений цветов окружающих пикселей.

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

Закончив редактировать изображение, вы можете уменьшить размер графичес — кого файла путем сохранения файла со стандартным разрешением W3C — 72 ppi. Кроме того, сохраните изображение с использованием файлового формата JPEG либо GIF, чтобы сжать данные и уменьшить размер файла. Например, чтобы из — менить разрешение графического изображения, выберите в меню Image | Image Size (Изображение | Размер изображения), измените разрешение на 72 и щелк —

ните на кнопке ОК. Окно Image Size показано на рис. 6.20.



ПРИМЕЧАНИЕ1

Пользуйтесь термином spi (samples per inch — выборок на дюйм), говоря о

разрешении картинки при сканировании изображения. Используйте термин ppi (pixels per inch — пикселей на дюйм), говоря о разрешении изображения после изменения разрешения картинки и сохранения файла с помощью программы редактирования изображений.

Эта строка текста отделена от следующей строки горизонтальной линией



Эта строка текста отделена от текста вверху горизонтальной линией





В данном примере дескриптор создает видимый разрыв между двумя

строками текста, как показано на рис. 6.21. ^ В





Однако хотя с помощью этих дескрипторов можно разбивать Web-страницы

на разделы, горизонтальным линиям не хватает «настроения». Чтобы добавить

изюминку в свои Web-страницы, замените функциональные (хотя и скучные)

стандартные линейки цветной графикой.



ПРАКТИКУМ

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

тальную линию шириной 600 пикселей и высотой 5 пикселей. Сохранив графи —

ческое изображение в виде маленького GIF-файла (iine. gif ) размером всего

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

Глава 6. Графика ‘ 31 5









IlpHMep с горизонтальными линиями





Эта строка текста отделена от следующей строки горизонтальной линией







Эта строка текста отделена от текста вверху горизонтальной линией

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

Скажем, вы хотите вывести на экран некий пейзаж. Для визуального воздей — ствия и качества картинки вам нужно использовать большое изображение — ши — риной 600 пикселей и высотой 300 пикселей. Прочитав практикумы в этой гла — ве, вы решаете сохранить изображение в файл, воспользовавшись форматом

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





JPEG, чтобы сделать размер файла фотографии как можно меньше. Однако, со- хранив изображение, вы обнаруживаете, что размер файла изображения все равно составляет более 200 Кб. Таким образом, посетителям вашего сайта, подключен — ным к Internet на скорости 28.8 Кбод, придется ждать более 30 секунд, чтобы их Web-браузеры загрузили и отобразили пейзаж.

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

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

width=»600″ height=»300″>



Графический файл, заданный атрибутом lowsrc (iandiow. jpg) — это копия с

низким разрешением исходного изображения (iand. jpg). Когда Web-браузер об — наруживает дескриптор в данном примере, браузер сначала загружает изображение, указанное в атрибуте lowsrc, а затем загружает исходное изобра —

жение, указанное атрибутом src.

Поскольку изображение lowsrc (iandiow. jpg) имеет файл меньшего размера, чем исходное изображение (iand. jpg), браузер может быстро загрузить и отобра — зить iandiow. jpg. Благодаря этому посетители смогут видеть версию пейзажа с низким разрешением, пока браузер загружает исходную фотографию с высоким

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

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

ПРАКТИКУМ

Как было сказано выше, основное назначение атрибута lowsrc — вывод на экран изображения с низким разрешением (быстро загружающегося). Однако вместо того,

чтобы использовать атрибут lowsrc для отображения копии с низким разрешением того же изображения, почему бы не сделать все несколько интереснее — не загру — зить с помощью одного дескриптора два разных изображения (см. рис. 6.23)?

В предыдущем примере вы использовали программу редактирования изобра —

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

ла. В приведенном ниже примере показано, как можно воспользоваться дескрипто —

ром для загрузки изображения со словами «Следующим летом» на время ожидания загрузки и отображения браузером картинки в файле photo. jpg:



width=»600″ height=»300″>

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





Итак, когда посетитель .извлекает Web-страницу, он видит изображение из

файла nextsummer. jpg, которое позже заменяется изображением, заданным ат — рибутом src, что и можно лицезреть на рис. 6.23.

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





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



Обеспечение правильного представления цветов

с помощью Web-безопасной цветовой палитры

Одна из наибольших трудностей, с которыми вы столкнетесь при создании ри —

сунков для Web-страницы, — это использование Web-цветов. Web-безопасная цвето —

вая палитра (Web-safe color palette) состоит из 216 цветов, которые Web-браузеры способны правильно воспроизводить как в среде Windows, так и в среде Macintosh.

Большинство посетителей вашего Web-сайта — не Web-дизайнеры, и многие

из них работают на старых машинах, видеоадаптеры которых поддерживают мак —

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

Скажем, например, вы создаете изображение, содержащее тысячи или даже

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

Если при разработке графики для Internet вы используете цвета, не входящие

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

Во-вторых, некоторые системы будут «растрировать» цвета изображения. Растри — рование (dithering) — это процесс, в ходе которого более старая машина начинает смешивать существующие цвета, пытаясь воспроизвести цвета, находящиеся вне