IMG-физиология: обязательные атрибуты

К обязательным атрибутам я отношу src, height, width, alt, border. Они должны быть заданы во всех тегах IMG без исключения.

src

Если атрибут src не задан, браузеру не станет плохо. Браузеры отличаются железными нервами. Но проку от пустого тега <IMG> мало: на экране появится прямоугольник с пиктограммой внутри:

Правда, если вы смотрите на образ кода <IMG> в Netscape-6, то ничего не увидите: этот браузер покажет вам пустое место! Если попытаться перетащить мышкой образ пустого <IMG> в Internet Explorer 4, то на экране появится неожиданное сообщение: Недопустимый аргумент.

Если теперь записать

<IMG src=./pic/prof.gif>

то глаз пользователя порадует симпатичное изображение:

Запись ./pic/prof.gif задает относительный адрес картинки. Она говорит браузеру: возьми картинку в подкаталоге pic текущего каталога. Текущим для данной страницы считается каталог, который эту страницу содержит. Размещение изображений в отдельном месте — обычная практика. Делается это ради уменьшения беспорядка в файловом хозяйстве сайта.

Типичная ошибка начинающего разработчика — использование абсолютного адреса. Он пишет:

<IMG src=c:/sidorov/pic/prof.gif>

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

Эта ошибка особенно характерна для любителей визуального редактирования. Обычно, визуальный редактор записывает абсолютный адрес, а новичок об этом и не подозревает.

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

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

В качестве URL картинки можно указывать любой адрес Интернета. Можно написать:

<IMG src=http://www.botik.ru/~robot/PIC/RULOGO.GIF>

и вы увидите логотип Роботландского университета с сайта Роботландии:

Но вы можете и не увидеть эту картинку, если сайт Роботландии “переехал”, разработчик изменил его структуру, сервер поломался или встал на профилактику. Вам не нужны “дыры” на страницах вместо картинок? Тогда не делайте ссылок в “чужой” Интернет, уж больно он непредсказуем и быстро меняется.

Как быть, если нужно разместить чужую картинку (с разрешения автора, разумеется) на своей странице? Вы сейчас видите эту картинку в своем браузере? Значит, она уже на вашем компьютере. Ее можно найти в папке Temporary Internet Files каталога Windows, а еще проще щелкнуть по картинке правой кнопкой мыши и сохранить в нужном месте, выбрав в открывшемся меню позицию Сохранить рисунок как...

Еще одна распространенная ошибка связана с тем, что на сервере, который работает, как правило, под Unix или Linux, регистр для имени файла имеет значение. Если записать ссылку на логотип Роботландского университета так:

<IMG src=http://www.botik.ru/~robot/pic/rulogo.gif>

то картинку вы не увидите.

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

height и width

Атрибуты height и width задают размеры прямоугольника, в который браузер выводит картинку. Эти размеры должны совпадать с реальными размерами картинки. Если совпадения нет, браузер растягивает или сжимает изображение так, чтобы оно полностью заполнило отведенное для него место. В итоге картинка выводится с неприятными искажениями.

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

Сравните эти два изображения:

Одно из них уменьшено браузером, другое графическим редактором. Правда, не надо уточнять какая картинка чем уменьшалась?

Кажется, что если, наоборот, есть маленькая картинка, а на странице нужно разместить ее в увеличенном виде, то пользоваться атрибутами height и width выгодно: получаем большое изображение с малым килобайтным весом. Да, это так. Если, конечно, вас устраивает качество увеличения. Браузер просто укрупняет точки, Фотошоп это делает по более сложному алгоритму, стараясь не ухудшить качество изображения. Но самый лучший редактор с точки зрения независимости качества от размера — векторный, такой, как, например, Xara Webster. Векторный рисунок без искажений растягивается до нужного размера, а потом записывается на диск в растровом формате GIF или JPG.

Сравните эти два изображения:

Одно из них увеличено браузером, другое — графическим редактором.

Еще одна оплошность — не указывать значений height и width вовсе. “Зачем?” — говорит Мячиков. — “Неужели браузер такой глупый, что не может прочитать размеры в самом картиночном файле?”. Может. Но только тогда, когда файл уже загружен в компьютер.

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

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

Вывод прост: нужно всегда записывать атрибуты height, width и указывать в них реальные размеры картинки:

<IMG src=./pic/nez.gif width=139 height=149>

alt

Текст, который является значением атрибута alt (альтернативный текст), часто опускают при кодировании тега IMG, а совершенно напрасно!

Пользователь любит прогулки по Интернету с “потушенными фарами” — отключенной в настройках браузера графикой. Зачем он так делает? Ради экономии своих денег и времени, ведь толстая графика бьет и по тому, и по другому. Если атрибут alt проигнорирован, пользователь не увидит никаких сообщений о том, какую роль играет картинка на странице. Если alt наполнен содержанием, пользователь прочитает сообщение, записанное в прямоугольник, замещающий картинку, а в некоторых браузерах увидит тот же текст, наведя мышиный курсор на место картинки.

Существуют браузеры, которые вообще не поддерживают графики, например, текстовый браузер Lynx. Голосовой браузер pwWebSpeek предназначен для слепых людей. Такие люди не увидят картинки, но хотя бы получат о ней представление, услышав ее описание. Существуют браузеры, использующие тактильный ввод-вывод по азбуке Бройля. Другие пользователи работают с Web по телефону. Так, например, устроена система Web-on-Call Voice Browser. В последнее время становится модным иметь в автомобиле бортовой компьютер с интернет-связью. Так как глаза пользователя заняты дорогой, к браузеру подключают речевой синтезатор.

Поисковые интернет-узлы запускают в сеть свои роботы, для сбора информации. Картинки роботы не видят, а вот alt-тексты читают с удовольствием.

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

Сообщение “Это картинка” совсем не годится для альтернативного текста. Текст “Фото школьного здания. Четырехэтажная кирпичная постройка с липовой аллеей.” хорошо подходит для изображения, которое любят размещать на главной странице школьные сайты. Представьте, что человек не видит картинки, а только слушает альтернативный текст. Слова “Это картинка” вызовут раздражение. Короткое “Школа” — информативнее, а текст с липовой аллеей еще и вызовет положительную ассоциацию:

Фото школьного здания. Четырехэтажная кирпичная постройка с липовой аллеей.

Если картинка большая, то и альтернативное сообщение может быть достаточно большим. А вот на маленьких картинках длинные тексты обрезаются:

Фото школьного здания. Четырехэтажная кирпичная постройка с липовой аллеей.

Огорчительно, что некоторые браузеры относятся к alt не уважительно.

IE-4 интерпретирует alt идеально. Если картинка не загружена, alt-текст записывается в замещающий прямоугольник и показывается во всплывающем окошке при наезде мышиным курсором.
NN-3 не рисует прямоугольник, не записывает на экран alt-текст и не выводит его при наезде мышиным курсором.
NN-4 рисует замещающий прямоугольник, не выводит в него альтернативный текст, но показывает его при наезде мышиным курсором. Текст всегда показывается в одну строку и обрезается краями экрана монитора.
NN-6 рисует прямоугольник только на время загрузки картинки. Если картинка не загружена, прямоугольник замещается альтернативным текстом, записанным как обычный абзац. Понять, что на этом месте должно быть изображение, практически невозможно.

Независимо от того, как браузеры интерпретируют альтернативный текст, писать его необходимо. Около 90% пользователей видят alt-текст через Internet Explorer. Этот текст выводится на панель Бройля, озвучивается речевым браузером, и его читают роботы поисковых систем.

Вот еще несколько правил записи альтернативного текста.

Для пустых картинок-распорок и декоративной графики необходимо указывать alt="". Дело в том, что по стандарту HTML у атрибута alt нет определенного значения. Это означает, что браузеры вправе помещать в альтернативный текст все, что угодно.
Если заголовок или другой текст на странице выполнен в графике, то альтернативный текст должен в точности его повторять.
Если картинки используются как маркеры списка, записывайте в alt последовательную цифровую нумерацию. (Значение “маркер” гораздо хуже.)
Если картинка используются вместо тега HR, записывайте alt="разделитель". (Представьте, что для имитации разделения записано atl="*************". Речевой браузер будет нудно повторять: “символ звездочка, символ звездочка…”.)
Если графическая кнопка используется для навигации, заключайте alt-значение в квадратные скобки — это один из принятых способов оформления текстовых меню. (Пример: alt="[начало]").

Часто на web-страницах неверно используют атрибут alt как всплывающую подсказку для сообщения пользователю дополнительной информации. Для этой цели больше подходит атрибут title. Если в теге IMG записаны оба атрибута, то значение alt записывается на место картинки, а значения title всплывает на экран при наезде мышиным курсором.

border

В стандарте HTML значение атрибута border по умолчанию не определено. Это означает, что если разработчик желает самостоятельно контролировать наличие рамки вокруг картинки и ее толщину, он должен обязательно указывать значение этого атрибута. Чаще всего записывают border=0.

Особое значение запись border=0 имеет тогда, когда изображение является ссылкой.

Если нулевое значение не задано, то даже в тех браузерах, в которых рамка по умолчанию не рисуется, она появится вокруг картинки-ссылки (аналог подчеркивания ссылки):

<A href=torop.htm"><IMG src=./pic/torop.gif
                        width=115 height=150
                        alt="Торопыжка"></A>

От ссылочной рамки можно избавиться, если явно задать border=0:

<A href=torop.htm"><IMG src=./pic/torop.gif
                        width=115 height=150 border=0
                        alt="Торопыжка"></A>

Иван Сидоров kurs@robotland.pereslavl.ru