HTML тег IMG регулирует вставки картинок и других статических графических объектов в веб — страницы. Этот общий тег поддерживает несколько обязательных и дополнительных атрибутов, которые повышают вашу способность создавать привлекательный, сфокусированный на изображении веб-сайт.
Пример полностью сформированного HTML-тега IMG выглядит следующим образом:
<img src = "url">
Обязательные атрибуты тега IMG
SRC = "/ путь / к / image.jpg"
Единственный атрибут, который требуется для отображения изображения на веб-странице, — это атрибут src . Этот атрибут идентифицирует имя и местоположение файла изображения для отображения.
alt = "Описание изображения"
Для написания действительных XHTML и HTML4 также необходим атрибут alt . Этот атрибут используется для предоставления невизуальным браузерам текста, который описывает изображение. Браузеры отображают альтернативный текст по-разному. Некоторые отображают его как всплывающее окно, когда вы наводите курсор мыши на изображение, другие отображают его в свойствах, когда вы щелкаете правой кнопкой мыши по изображению, а некоторые вообще не отображают его.
Используйте альтернативный текст, чтобы предоставить дополнительную информацию об изображении, которая не имеет отношения к тексту веб-страницы или не имеет значения. Но помните, что в программах чтения с экрана и в других текстовых браузерах текст будет читаться в соответствии с остальным текстом на странице. Чтобы избежать путаницы, используйте описательный альтернативный текст, например, «О веб-дизайне и HTML», а не просто «логотип».
Альт текст также имеет важное значение для SEO (Search Engine Optimization). Боты, которые используют поисковые системы, такие как Google, для просмотра контента на сайтах не могут «видеть» изображения. Они полагаются на альтернативный текст, чтобы определить, что находится на странице.
В HTML5 , то альт атрибут не всегда требуется, потому что вы можете использовать подпись , чтобы добавить больше описания к нему. Вы также можете использовать этот атрибут, чтобы указать идентификатор, который содержит полное описание:
aria-descriptionby = "Описание изображения"
Альтернативный текст также не требуется, если изображение чисто декоративное, например, изображение в верхней части веб-страницы или значки. Но если вы не уверены, включите альтернативный текст на всякий случай.
Атрибуты размеров
ширина = "500"
и
высота = "500"
В зависимости от вашего дизайна использование атрибутов высоты и ширины в ваших изображениях может быть или не быть хорошей идеей. Традиционная мудрость в прошлом диктовала, что их использование всегда было хорошей идеей, но в эпоху адаптивного веб-дизайна это уже не годится.
Как правило, вы хотите, чтобы размер изображения был установлен в вашем CSS. Чаще всего это будет результатом размеров родительского контейнера изображения. Такой подход обеспечивает большую гибкость при адаптации к разным размерам экрана. Однако все еще есть случаи, когда вы можете указать размеры изображения в качестве атрибутов HTML.
Другие полезные атрибуты IMG
title = "Описательное имя изображения"
Атрибут является глобальным атрибутом, который можно применять к любому элементу HTML . Кроме того, атрибут title позволяет добавлять дополнительную информацию об изображении.
Большинство браузеров поддерживают атрибут title , но делают это по-разному. Некоторые отображают текст как всплывающее окно, а другие отображают его на информационных экранах, когда пользователь щелкает правой кнопкой мыши на изображении. Вы можете использовать атрибут title, чтобы написать дополнительную информацию об изображении, но не рассчитывайте, что эта информация будет либо скрытой, либо видимой. Вы определенно не должны использовать это, чтобы скрыть ключевые слова для поисковых систем. Эта практика теперь наказывается большинством поисковых систем.
usemap = ""
и
ISMAP = ""
Эти два атрибута устанавливают карты изображений на стороне клиента () и на стороне сервера (ISMAP) для ваших изображений.
longdesc = "Более подробное описание вашего изображения"
Longdesc атрибут поддерживает URL — адрес для более длинного описания изображения. Эта функция делает ваши изображения более доступными.
Устаревшие и устаревшие атрибуты IMG
Некоторые атрибуты теперь устарели в HTML5 или устарели в HTML4. Для лучшего HTML вы должны найти другие решения вместо использования этих атрибутов.
граница = "3"
Атрибут определяет ширину в пикселях любой границы вокруг изображения. Он устарел в пользу CSS в HTML4 и устарел в HTML5.
ALIGN = "влево"
Этот атрибут позволяет размещать изображение внутри текста и обтекать его текстом. Вы можете выровнять изображение вправо или влево. Он устарел в пользу свойства float CSS в HTML4 и устарел в HTML5.
hspcace = "10"
и
VSPACE = "10"
В HSPACE и VSPACE атрибуты добавить пустое пространство по горизонтали ( HSPACE ) и вертикально ( VSPACE ). Пробелы будут добавлены к обеим сторонам изображения (сверху и снизу или слева и справа), поэтому, если вам нужно пространство только с одной стороны, вы должны использовать CSS. Эти атрибуты устарели в HTML4 в пользу CSS-свойства margin, и они устарели в HTML5.
LOWSRC = "/ путь / к / lowres.jpg"
LOWSRC атрибут обеспечивает альтернативный образ , когда ваш источник изображения настолько велик , что он загружает очень медленно. Например, у вас может быть изображение размером 500 КБ, которое вы хотите отобразить на своей веб-странице, но загрузка 500 КБ займет много времени. Таким образом, вы создаете намного меньшую копию изображения, возможно, в черно-белом или просто чрезвычайно оптимизированном виде, и помещаете ее в атрибут lowsrc . Сначала будет загружаться и отображаться изображение меньшего размера, а затем, когда появится увеличенное изображение, оно заменит изображение с низким исходным кодом.
LOWSRC атрибут был добавлен в Netscape Navigator 2.0 в <IMG> тег. Он был частью DOM уровня 1, но затем был удален из DOM уровня 2. Поддержка браузера была отрывочной для этого атрибута, хотя многие сайты утверждают, что она поддерживается всеми современными браузерами. Он не устарел в HTML4 и не устарел в HTML5, потому что никогда не был официальной частью какой-либо спецификации.
Избегайте использования этого атрибута и оптимизируйте изображения, чтобы они быстро загружались. Скорость загрузки страницы является важной частью хорошего веб-дизайна, а большие изображения сильно замедляют страницы — даже если вы используете атрибут lowsrc .