Списки и изображения в HTML

Изображения в HTML

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

Форматы графических файлов

Большинство браузеров поддерживает только три графических формата: GIF, JPEG и PNG. Наиболее широкое распространение получили GIF и JPEG. Долгое время они являлись практически стандартами веб-изображений. Формат PNG появился достаточно недавно, и его популярность значительно уступает форматам GIF и JPEG. Распространение формата PNG сдерживается старыми версиями браузеров, а также недостаточной и неполной поддержкой возможностей PNG в новых версиях.

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

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

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

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

Формат JPEG (Joint Photographic Experts Group - объединенная группа экспертов в области фотографии) поддерживает 24-битные цвета (т.е. около 16 миллионов цветов) и сохраняет яркость и оттенки цветов изображений. Формат предполагает сжатие с потерями: JPEG-сжатие основано на разложении изображений на составляющие, близкие к тем, которые используются в человеческом зрении при отбрасывании информации, не сказывающейся на зрительном восприятии образа. За счет этого достигается высокое сжатие изображений при незначительном ухудшении качества. Степень сжатия и качество изображений находятся в обратной зависимости: чем сильнее сжато изображение, тем ниже его качество (и, соответственно, размер графического файла). В отличие от форматов GIF и PNG формат JPEG не поддерживает прозрачность: при сохранении изображения в данном формате, прозрачные пикселы заполняются определенным цветом. Формат JPEG поддерживает технологию, известную под названием прогрессивный JPEG, при которой версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

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

Формат PNG (Portable Network Graphics - переносимая сетевая графика), призванный заменить формат GIF, является относительно новым. Формат PNG существует в двух вариантах: PNG-8 и PNG-24.

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

PNG-24 аналогичен PNG-8, но использует 24-битную палитру цвета и, подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. А подобно GIF и формату PNG-8, сохраняет детали изображения как, например, в логотипах или иллюстрациях. Формат PNG-24 обладает рядом дополнительных преимуществ, таких как применение улучшенного сжатия, наличие альфа-прозрачности и гамма-коррекции и др.

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

Включение изображений в HTML

Для вставки изображения в HTML-документ используется элемент IMG, имеющий два обязательных атрибута src и alt.

Атрибут alt содержит так называемый альтернативный текст, который будет отображаться, если по каким-либо причинам изображение недоступно. Кроме того, люди с недостатками зрения используют вспомогательные технологии для чтения веб-страниц. Эти технологии считывают содержимое атрибутов alt элементов IMG. Поэтому важно написать хороший альтернативный текст для описания содержимого изображения и поместить его в атрибут alt. Такой текст позволяет также получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображения происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. По мере же загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. В качестве значения параметра alt служит любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки. Этот атрибут крайне полезен как для доступности, так и для оптимизации поисковых машин.

Атрибут src задает адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается абсолютный или относительный адрес файла. К абсолютному адресу относится полный путь к ресурсу, включая протокол передачи данных, наименование сервера, а также имена всех каталогов, ведущих к файлу, например http://www.somewhere.com/images/image.jpg. Относительные адреса описывают местоположение файла относительно текущего каталога (например, "../../images/image.jpg") или корня каталогов сервера (например, "/images/image.jpg"). Если требуемый графический файл находится в том же каталоге, что и HTML-документ, его использующий, то в качестве значения аргумента src допустимо указать просто имя требуемого графического файла.

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

<IMG src="http://www.somewhere.com/images/beatles.jpg"
  alt="Группа Beatles: Пол, Ринго, Джордж и Джон">

Результат выполнения данного кода представлен на рисунке 7.

Рис. 7.1. Вид изображения в браузере и всплывающая подсказка

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

Описание изображения: атрибут longdesc

Если изображение является очень сложным, как, например, график, можно предложить более длинное его описание, используя атрибут longdesc, чтобы люди, использующие считыватель экрана или при отключенном выводе изображений, могли, тем не менее, получить доступ к информации, содержащейся в изображении. Этот атрибут содержит URL, который указывает на документ, содержащий эту же самую информацию. Например, если имеется график, показывающий множество данных, можно соединить его с таблицей данных с той же информацией с помощью longdesc. Атрибут longdesc может быть задан следующим образом:

<img src="diagramma.jpg" alt="Диаграмма использования поисковых систем в Рунете" longdesc="data.html">

Размеры изображения: атрибуты height и width

Атрибуты height и width дают указание браузеру выделить необходимое пространство для изображений до их загрузки. В этом случае выводится свободное пространство с заданными размерами, пока изображение не загрузится и не займет свое место. Кроме того, данные атрибуты используются для изменения размеров изображения средствами HTML. Ширину и высоту изображения можно менять как в меньшую, так и в большую сторону. Допускается использовать значения в пикселах или процентах относительно родительского элемента (контейнера, в который помещен элемент IMG), или окна браузера. Добавление только одного атрибута width или height сохраняет пропорции изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину. Задание размеров изображения несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.

В следующем примере ширина и высота изображения задаются равными 300 и 200 пикселов соответственно.

<IMG src="http://www.somewhere.com/images/image.jpg"
  alt="Какая-то фотография" width="300" height="200">

Карты-изображения: атрибуты ismap и usemap

Атрибут ismap сигнализирует браузеру о том, что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Параметр реализуется в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения. Кроме того, координаты имеют смысл только в графической среде, поэтому ссылки, оформленные таким образом, доступны только пользователям графических браузеров, что отрицательно сказывается на доступности сайта.

Атрибут usemap указывает на клиентскую карту ссылок, определенную элементом MAP. Его значением должно быть имя закладки, заданное атрибутом name соответствующего элемента MAP. Применение данного атрибута будет более подробно рассмотрено в следующей лекции.