Атрибуты тегов IMG

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

Пример полностью сформированного HTML-тега IMG выглядит следующим образом:


Обязательные атрибуты тега IMG

SRC. 

Единственный атрибут, который необходимо получить для отображения изображения на веб-странице, — это атрибут SRC. Этот атрибут идентифицирует имя и местоположение файла изображения для отображения.

Чередующийся

Для написания действительных XHTML и HTML4 также необходим атрибут ALT. Этот атрибут используется для предоставления невизуальным браузерам текста, который описывает изображение. Браузеры отображают альтернативный текст по-разному. Некоторые отображают его как всплывающее окно, когда вы наводите курсор мыши на изображение, другие отображают его в свойствах, когда вы щелкаете правой кнопкой мыши по изображению, а некоторые вообще не отображают его.

Используйте альтернативный текст, чтобы предоставить дополнительную информацию об изображении, которая не имеет отношения к тексту веб-страницы или не имеет значения. Но помните, что в программах чтения с экрана и в других текстовых браузерах текст будет читаться на одной строке с остальным текстом на странице. Чтобы избежать путаницы, используйте описательный альтернативный текст, например, «О веб-дизайне и HTML», а не просто «логотип».

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

ARIA-DESCRIBEDBY

Альтернативный текст также не требуется, если изображение чисто декоративное, например, изображение в верхней части веб-страницы или значки. Но если вы не уверены, включите альтернативный текст на всякий случай.

Рекомендуемые атрибуты IMG

ШИРИНА

а также

ВЫСОТА 

Вы должны привыкнуть всегда использовать атрибуты WIDTH и HEIGHT. И вы всегда должны использовать реальный размер и не изменять размер ваших изображений с помощью браузера.

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

Другие полезные атрибуты IMG

ЗАГЛАВИЕ

Атрибут является глобальным атрибутом, который может быть применен к любому элементу HTML. Более того, атрибут TITLE позволяет вам добавить дополнительную информацию об изображении.

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

USEMAP

а также

ISMAP 

Эти два атрибута устанавливают карты изображений на стороне клиента () и на стороне сервера (ISMAP) для ваших изображений.

LONGDESC

Атрибут LONGDESC поддерживает URL-адреса для более подробного описания изображения. Эта функция делает ваши изображения более доступными.

Устаревшие и устаревшие атрибуты IMG

Некоторые атрибуты теперь устарели в HTML5 или устарели в HTML4. Для лучшего HTML вы должны найти другие решения вместо использования этих атрибутов.

ГРАНИЦЫ 

Атрибут определяет ширину в пикселях любой границы вокруг изображения. Это устарело в пользу CSS в HTML4 и устарело в HTML5.

ALIGN 

Этот атрибут позволяет размещать изображение внутри текста и обтекать его текстом. Вы можете выровнять изображение вправо или влево. Он устарел в пользу свойства CSS с плавающей точкой в ​​HTML4 и устарел в HTML5.

HSPACE

а также

VSPACE

Атрибуты HSPACE и VSPACE добавляют пробел по горизонтали (HSPACE) и по вертикали (VSPACE). Пробелы будут добавлены к обеим сторонам изображения (сверху и снизу или слева и справа), поэтому, если вам нужно пространство только с одной стороны, вы должны использовать CSS. Эти атрибуты устарели в HTML4 в пользу CSS-свойства margin, и они устарели в HTML5.

LOWSRC 

Атрибут LOWSRC предоставляет альтернативное изображение, когда ваш источник изображения настолько велик, что загружается крайне медленно. Например, у вас может быть изображение размером 500 КБ, которое вы хотите отобразить на своей веб-странице, но загрузка 500 КБ займет много времени. Таким образом, вы создаете намного меньшую копию изображения, возможно, в черно-белом или просто чрезвычайно оптимизированном виде, и помещаете ее в атрибут LOWSRCattribute. Сначала будет загружаться и отображаться изображение меньшего размера, а затем, когда появится увеличенное изображение, оно заменит изображение с низким исходным кодом.

Атрибут LOWSRC был добавлен в Netscape Navigator 2.0 в тег IMG. Он был частью DOM уровня 1, но затем был удален из DOM уровня 2. Поддержка браузера была отрывочна для этого атрибута, хотя многие сайты утверждают, что он поддерживается всеми современными браузерами. Он не устарел в HTML4 и не устарел в HTML5, потому что никогда не был официальной частью какой-либо спецификации.

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

Ссылка на основную публикацию