Самоучитель по креативному веб-дизайну. Книга 2, стр.66

Хотя изменение атрибутов width и height может показаться удобным спосо — бом приведения размера изображения в соответствие с предназначенной для него областью в пределах Web-страницы, не следует применять этот подход при работе с фотографиями. Атрибуты width и height должны отражать фактические размеры изображения в файле. Если фотография слишком велика для того, что- бы поместиться в отведенную ей область на странице, откройте файл исходного изображения в программе редактирования изображений, например, Photoshop, и

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

Когда атрибуты width и height соответствуют фактическим размерам изобра —

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

ственнее», нежели Web-браузер. Это особенно очевидно при использовании атрибутов width и height для увеличения размеров рисунка — изображение ста — новится зернистым и расплывчатым.















Рис. 6.8. Если значения атрибутов width и height поменять местами,

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

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





Следовательно, если вам небезразлично качество изображения, задавайте ат- рибуты width и height так, чтобы они отражали фактические размеры изобра- жения в файле.

Основная причина использования атрибутов width и height во всех дескрип —

торах состоит в том, чтобы дать^браузеру возможность точно позициони —

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.67

• Браузер может загрузить и отобразить текст. Затем, после загрузки графи — ческих изображений, браузер перезагрузит страницу и расположит текст и изображения на своих местах.

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



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

каждом из дескрипторов зачастую не позволяет браузеру отобразить на эк — ране текст. Помните: вам нужно удержать внимание посетителей, пока браузер загрузит и выведет на экран изображения. Если посетителю надоест, например, смотреть на пустой экран, он может отправиться куда-нибудь еще. Когда же вы задаете атрибуты width и height в дескрипторах , браузер резервирует пространство под каждую картинку и продолжает загружать и отображать текст,

ожидая, пока загрузятся изображения В результате этого посетители смогут ви — деть и читать текстовое содержимое, дожидаясь, пока браузер закончит загрузку

и вывод изображений на Web-страницу. Помогая браузеру быстро загрузить тек —

сту, вы даете посетителю «что-нибудь почитать», пока браузер загружает графику,

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



Работа с атрибутом alt и браузерами, не воспроизводящими графику

Атрибут альтернативного текста (alt ) — важное дополнение к дескриптору

. Атрибут al t дает Web-браузеру указание отобразить строку текста перед загрузкой графического изображения. Кроме того, Web-браузер продолжит ото —

бражать альтернативный текст (заданный атрибутом ait) , если по какой-либо

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.68



width=»100″ height=»50′>

alt=»#OTO Джеймса Эллиотта, основателя InGen, Inc.»>

Самоучитель по креативному веб-дизайну. Книга 2, стр.69



height=»10″ alt=»KpacHb»i маркер»>



Альтернативный текст, «Красный маркер», занимает больше места, чем само

графическое изображение. Более того, поскольку атрибуты width и height дают

браузеру указание зарезервировать под маркер область 10×10 пикселей, для ото-

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

6.10.

Таким образом, при отображении мелких графических изображений или при

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

атрибут ai t с пустой строкой, как в конце следующего дескриптора :



height=»10″ alt=»">



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

на странице, например, маркеров, должен ограничиваться одним словом, напри- мер, маркер, либо оставляться пустым. Когда программа чтения текста обнаружи —

вает атрибут ai t с пустой строкой, она игнорирует изображение и продолжает читать текст тела документа, отображенный в окне Web-браузера.

Консорциум W3C считает использование al t настолько важным, что комитет

стандартизации сделал его обязательным элементом надлежащим образом сфор-

мированного дескриптора . Следовательно, пренебрежение атрибутом al t

во всех дескрипторах не только считается признаком неряшливого коди —

рования, но и, в соответствии со стандартом W3C, делает ваши дескрипторы

неправильно сформированными.

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

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

воспользуйтесь атрибутом longdesc (длинное описание) в дополнение к атрибу —

ту alt. Значение атрибута longdesc отправляет пользователя к отдельному

HTML-файлу, содержащему полное описание изображения. Скажем, вы создаете

Глава 6. Графика 29 9





схему организационной структуры предприятия и вставляете схему (из файла

business. gif ) на страницу с помощью следующего дескриптора :



организационной структуры

предприятия» longdesc=»chart. html»>



HTML-документ (chart. html), указанный в атрибуте longdesc, содержит подробное описание (в формате простого текста) всех данных на рисунке

business. gif. Когда посетители вашего Web-сайта наводят курсор мыши на гра — фический элемент, содержащий атрибут longdesc, Web-браузер открывает окно с информацией из HTML-файла (в данном примере chart. html). Документ chart. htm l содержит только текст.

К сожалению, многие Web-браузеры все еще не поддерживают атрибут

longdesc. Поэтому неплохо бы добавлять на страницы отдельные гиперссылки

на файлы с текстовыми описаниями (помимо добавления атрибута longdesc в

деСКриПТО’ры ).



Создание всплывающей подсказки с помощью атрибута title в дескрипторе

С помощью атрибута titl e в дескрипторе вы можете описать (словес — но) графическое изображение своим посетителям в виде всплывающей подсказ — ки. В спецификациях HTML 4.0 сказано, что использование атрибута titl e в

Самоучитель по креативному веб-дизайну. Книга 2, стр.70

качестве всплывающей подсказки является целесообразным.



ПРАКТИКУМ

Чтобы создать подсказку, вставьте атрибут titl e в дескриптор изображения сле — дующим образом:

width=»200″ height=»80″

alt=»rcpHb»i Крым» tit1е=»Приезжайте в Крыми>

Когда посетитель на несколько секунд задерживает курсор мыши над изобра- жением, браузер отображает текст, присвоенный атрибуту title, в виде всплыва — ющей подсказки рядом с курсором мыши. На рис. 6.11 показано, как Internet Explorer отображает изображение и описание, заданные в приведенном выше дескрипторе .

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

некоторые Web-браузеры некорректно обращаются с длинными строками текста. Некоторые браузеры не переносят длинный текст на следующую строку. В других браузерах существует максимальная длина всплывающей подсказки, и они уреза — ют текст так, чтобы он поместился в поле подсказки. В отличие от атрибута alt, атрибут titl e — сравнительно новый, и многие Web-браузеры его еще не поддерживают. К счастью, атрибут titl e работает в Internet Explorer версии 4 и выше, а также полностью поддерживается Netscape Navigator версии 6 и выше.

Самоучитель по креативному веб-дизайну. Книга 2, стр.71





width=»200″

height=»80″

alt=»Горный Крым»

title=»Приезжайте в Крым»>


Самоучитель по креативному веб-дизайну. Книга 2, стр.72

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

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

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





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

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

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

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.73

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.

Самоучитель по креативному веб-дизайну. Книга 2, стр.74

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

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

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

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

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

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

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.75



Сохранение аппликаций и текста в файл формата 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-файле будет неудовлетворительным (см. рис.



Полезные ссылки
Случайные записи
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 056
  • 17.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.122
  • 12.09.2014">Помост на декоративном водоеме
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.87
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.37
  • 24.02.2010">15 образцов типографики
  • 03.03.2011">Руководство по actionscript. часть 5, стр. 056
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 101
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.100
  • 16.03.2010">10 главных пунктов для оптимизации под поисковые системы
  • 19.07.2011">Как еще увеличить юзабилити?
  • 12.03.2011">Руководство по actionscript. часть 3, стр. 125
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.85
  • 23.02.2011">Руководство по actionscript. часть 7, стр. 039
  • 06.07.2011">Технология Active X на страницах сайта
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...