Детально о работе с изображениями в веб-среде
Опустим вводную часть и перейдём ближе к сути…
Как и замещенные элементы, изображения имеют дискретную ширину и длину; среди прочего, это означает, что при применении свойства layout к изображению эти значения сохранятся. Но при отсутствии таких значений изображение будет размещено так же, как слово в тексте: его нижний край будет совпадать с базовой линией строки текста.
Если присвоить display: inline-block любому незамещенному строковому элементу, то он будет вести себя как замещенный элемент. Однако это не всегда верно для Internet Explorer 6, который применяет display: inline-block только к тем элементам, которые являются строковыми в спецификации HTML 4.
На практике можно увидеть, что в большинстве случаев создание макета начинается с присваивания display: block различным изображениям, или элементам-контейнерам, содержащим изображения и заголовки. Такой способ позволяет избежать выравнивания нижнего края изображения по базовой линии текста, которое используется по умолчанию, а также улучшает удобочитаемость источника: можно добавлять пробелы между изображениями в разметке, сохраняя нулевые отступы между непрерывно следующими изображениями.
Что касается последнего, рассмотрим пример, в котором три изображения расположены подряд:
При использовании стилей по умолчанию агента пользователя эти промежуточные пробелы будут визуализированы. Но если свойству display этих изображений присвоить значение block, то их можно будет расположить в ряд в том порядке, в котором они указаны в разметке, используя дополнительное значение float. Тогда их края будут расположены вплотную друг к другу (однако если ширины контейнера будет недостаточно, изображение переместится ниже своего предшественника в потоке документа).
В тех случаях, когда и форматирование источника, и качество отображения имеют высокий приоритет, почти невозможно обойтись без применения display: block к изображениям.
Но если вам по каким-либо причинам требуется нарезка изображений — как в случае с сайтами, к которым применяются устаревшие технические требования — обычно лучше отказаться от задачи безупречного форматирования разметки и убрать все пробелы (включая переносы строк) между изображениями — тем не менее такие блоки все же можно отформатировать, если начинать каждую строку разметки с пары атрибут/значение, а не с тега img.
Подготовка изображения к обработке
Если ваша работа начинается с документа Photoshop, в котором используется множество дополнительных цифровых ресурсов и схем расположения, то самое главное определить цель, а именно: является ли данный рисунок деталью дизайна или фактическим содержимым? Детали дизайна в большинстве случаев следует относить к фоновым изображениям, с возможным (и иногда весьма вероятным) исключением типа растровых заголовков.
Если, напротив, изображение определяется как содержимое (например, фотография или иллюстрация утверждений, сделанных в документе), для него следует использовать элемент img, задав по крайней мере URI элемента и альтернативное текстовое содержимое.
Что такое атрибут alt
Атрибут alt необходим в тех случаях, когда с сайтом работают люди с ограниченными техническими возможностями; его наличие становится менее важным только тогда, когда изображения загружаются на страницу и просматриваются точно гак, как это было задумано. Во всех остальных случаях на странице отображается значение этого атрибута. Это нужно для того, чтобы изображение было понятным с точки зрения содержания; поэтому значение атрибута alt должно сообщать пользователю либо существенную информацию, либо ничего вообще.
Довольно удобно рассматривать атрибут alt как заголовок; второй вариант — задавать с его помощью тему изображения (в случае, если заголовок уже существует).
Если встроенные изображения используются в качестве деталей дизайна, не имеющих явного текстового эквивалента (то есть все, кроме растровых заголовков), значению атрибута alt должна быть присвоена пустая строка (alt="").
Текстовые браузеры и программы экранного доступа уберут все упоминания об этих изображениях, как если бы для них свойству display было присвоено значение none.
Размеры и границы изображения
В самых первых браузерах рисунков было принято явно указывать значения width, height и border для правильного отображения рисунков. Причина заключалась в том, что эти браузеры не могли отображать какую-либо часть страницы до тех пор, пока не рассчитана вся схема расположения — процесс, который не может быть завершен без точной информации о размерах изображения.
- ↑ Веб-дизайн
- ← H1 — H6: Заголовки и их правильное использование
- → Выбор правильного формата изображения для веб-сети