В HTML Тег IMG управляет вставкой изображений и других статических графических объектов на веб-страницу. Этот общий тег поддерживает несколько обязательных и необязательных атрибутов, которые расширяют ваши возможности по разработке привлекательного веб-сайта, ориентированного на изображения.
Пример полностью сформированного HTML-тега IMG выглядит так:
Обязательные атрибуты тега IMG
src = "/ путь / к / image.jpg"
Единственный атрибут, который вам нужен для отображения изображения на веб-странице, - это src атрибут. Этот атрибут определяет имя и расположение отображаемого файла изображения.
alt = "Описание изображения"
Чтобы написать действительный XHTML и HTML4, альт атрибут также обязателен. Этот атрибут используется для предоставления невизуальным браузерам текста, описывающего изображение. Браузеры по-разному отображают альтернативный текст. Некоторые отображают его как всплывающее окно, когда вы наводите указатель мыши на изображение, другие отображают его в свойствах, когда вы щелкаете правой кнопкой мыши по изображению, а некоторые не отображают его вообще.
Использовать альтернативный текст для предоставления дополнительных сведений об изображении, которые не имеют отношения к тексту веб-страницы или не важны для него. Но помните, что в программах чтения с экрана и других текстовых браузерах текст будет считываться вместе с остальным текстом на странице. Чтобы избежать путаницы, используйте описательный замещающий текст, который говорит (например) «О веб-дизайне и HTML», а не просто «логотип».
В альт текст также важен для SEO (поисковой оптимизации). Боты, которые поисковые системы, такие как Google, используют для изучения контента на сайтах, не могут «видеть» изображения. Они полагаются на альт текст, чтобы определить, что находится на странице.
В HTML5, то альт атрибут не всегда требуется, потому что вы можете использовать подпись чтобы добавить к нему больше описания. Вы также можете использовать этот атрибут для указания идентификатора, который содержит полное описание:
aria-descriptionby = "Описание изображения"
Альтернативный текст также не требуется, если изображение носит чисто декоративный характер, например рисунок в верхней части веб-страницы или значки. Но если вы не уверены, добавьте замещающий текст на всякий случай.
Размеры атрибутов
width = "500"а также.
height = "500"В зависимости от вашего дизайна использование. высота а также. ширина
Как правило, вы хотите, чтобы размер изображения был установлен в вашем CSS. Чаще всего это зависит от размеров родительского контейнера изображения. Такой подход обеспечивает максимальную гибкость при адаптации к разным размерам экрана. Однако бывают случаи, когда вы можете указать размеры изображения как атрибуты HTML.
Другие полезные атрибуты IMG
title = "Описательное имя изображения"Атрибут - это глобальный атрибут, который можно применить к любому. HTML-элемент. Более того, расширение. заглавие
Большинство браузеров поддерживают заглавие атрибут, но делают это по-разному. Некоторые отображают текст как всплывающее окно, в то время как другие отображают его на информационных экранах, когда пользователь щелкает изображение правой кнопкой мыши. Вы можете использовать заглавие атрибут для записи дополнительной информации об изображении, но не рассчитывайте, что эта информация будет скрыта или же видимый. Вам определенно не следует использовать это, чтобы скрыть ключевые слова для поисковых систем. В настоящее время эта практика преследуется большинством поисковых систем.
usemap = ""а также.
ismap = ""Эти два атрибута устанавливают на стороне клиента () и на стороне сервера (ISMAP). карты изображений
longdesc = "Более подробное описание вашего изображения"Файл. longdesc
Устаревшие и устаревшие атрибуты IMG
Некоторые атрибуты устарели в HTML5 или объявлены устаревшими в HTML4. Для получения наилучшего HTML вам следует найти другие решения вместо использования этих атрибутов.
border = "3"
align = "влево"Этот атрибут позволяет размещать изображение внутри текста и обтекать его текстом. Вы можете выровнять изображение по правому или левому краю. Он устарел в пользу платформы. CSS свойство float
hspcace = "10"а также.
vspace = "10"Файл. hspace а также. vspace атрибуты добавляют пробел по горизонтали ( hspace) и по вертикали ( vspace
lowsrc = "/ путь / к / lowres.jpg"Файл. lowsrc Атрибут предоставляет альтернативное изображение, если ваш источник изображения настолько велик, что загружается очень медленно. Например, у вас может быть изображение размером 500 КБ, которое вы хотите отобразить на своей веб-странице, но загрузка 500 КБ займет много времени. Таким образом, вы создаете гораздо меньшую копию изображения, возможно, черно-белую или просто очень оптимизированную, и помещаете ее в файл. lowsrc
В lowsrc Атрибут был добавлен в Netscape Navigator 2.0 к тегу. Он был частью DOM уровня 1, но затем был удален из DOM уровня 2. Поддержка этого атрибута браузерами была отрывочной, хотя многие сайты утверждают, что он поддерживается всеми современными браузерами. Он не является устаревшим в HTML4 и не считается устаревшим в HTML5, потому что он никогда не был официальной частью любой спецификации.
Избегайте использования этого атрибута и вместо этого оптимизируйте изображения, чтобы они загружались быстро. Скорость загрузки страницы - важная часть хорошего веб-дизайна, а большие изображения сильно замедляют страницы, даже если вы используете lowsrc атрибут.