Атрибуты тега изображения img — это дополнительные параметры, которые можно использовать для настройки и управления отображением изображений на веб-странице. В этом материале мы рассмотрим несколько наиболее распространенных атрибутов и поговорим о том, как они могут быть полезными в создании визуально привлекательного и функционального веб-сайта.
Изображения добавляются на страницу сайта с помощью html тэга img. Это непарный тэг, он имеет несколько атрибутов, которые и определяют какое изображение будет выводиться и какие характеристики будут у этого изображения.
Тэг img можно увидеть в коде любой страницы, код можно открывать в большинстве браузеров сочетанием клавиш CTRL + F9.
Каждое изображение определяется своим тэгом img, который интегрируется в структуру страницы дополняя текст, заголовки и другие элементы.
Атрибуты тега изображения img
- src:
атрибут src (source) тега img определяет путь к файлу изображения. Он обычно содержит URL-адрес или путь к файлу на сервере с сайтом. Это атрибут, который должен быть обязательным, поскольку он указывает браузеру, какое изображение отобразить на странице. src это единственный обязательный атрибут, всех остальных может не быть. Если в src указывается URL, то может использоваться как домен сайта, так и сторонние домены. При указании стороннего домена на странице будет выводиться изображение, которое подгружается с другого сайта. - alt:
атрибут alt (alternative) тега img предоставляет альтернативный текст, который будет отображаться, если изображение не может быть загружено. Это может произойти, когда файл изображения недоступен или пользователь использует браузер, блокирующий изображения. Также атрибут alt полезен для поисковых систем, которые используют этот текст для анализа содержания страницы. В качестве alt указывается слово или словосочетание, которые максимально точно характеризуют то, что приведено на изображении. - width и height:
Атрибуты width и height указывают ширину и высоту изображения соответственно. Эти атрибуты могут быть полезными при создании сетки или расположении других элементов на странице. Например, атрибуты можно использовать когда изображение нужно выводить в поле таблицы и нельзя допустить чтобы изображение на каких-то устройствах стало больше поля. Лимит для длины и ширины можно задавать в пикселях или процентах относительно исходного размера изображения. Атрибуты подходят для добавления ограничений, масштабировать изначально большие изображения за счет них не стоит, уменьшение самого изображения является лучшим решением. Большие изображения будут увеличивать время загрузки страницы независимо от значений атрибутов, задающих размер. При разработке версий сайтов для различных устройств (ПК, мобильных телефонов) часто задают размер изображений в зависимости от той версии, на которой находится пользователь. - title:
Атрибут title позволяет добавить всплывающую подсказку к изображению. Если пользователь наведет курсор мыши на изображение, он увидит сообщение, которое разработчик указал в качестве значения атрибута title.
Пример, html кода, которым добавляется на страницу изображение:
< img src="image.png" alt="replacement text" width="90%;" />
Важность атрибутов
Для каждого изображения может использовать одного атрибута и больше. Изображение будет выводиться на страницу когда задан атрибут src, альтернативный текст (alt) желательно добавлять в качестве подсказки для пользователей и поисковых систем. Атрибуты задающие размер могут быть полезны когда пользователи заходят на сайт с разных устройств.
Задание размера изображения может обеспечить оптимальное его отображение на разных экранах. Чаще всего размеры указывают в процентах, в этом случае изображение должно пропорционально масштабироваться при изменении размера экрана устройства пользователя. Также размер можно задавать в пикселях, так делают когда для сайта используется не адаптивная верстка с “резиновыми” элементами, а несколько версий для разных разрешений экрана.
Если не указывать дополнительные атрибуты (любые кроме src), то изображение тоже будет выводиться на страницу, но многие аспекты, которые можно контролировать за счет атрибутов, будут контролироваться браузером пользователя. В результате, сайт может иметь отличия во внешнем виде в разных браузерах и на разных устройствах.
Прежде всего, это относится к атрибутам, задающим размер изображения.
Браузеры могут использовать по умолчанию различные настройки выравнивания и масштабирования: на одних устройствах изображения без дополнительных атрибутах могут отображаться на странице нормально, на других будут слишком большие или слишком маленькие. На мобильных устройствах может возникать эффект прокрутки (когда изображение не умещается на одном экране и пользователю предлагается перемещать движок чтобы увидеть всё изображение).
Описанная ситуация создает неудобства при просмотре страницы, также будет негативное влияние на SEO продвижение сайта в случае со слишком большими изображениями и областью прокрутки. Ведь возрастет время на загрузку страницы и снизится её удобство для пользователя.
Главное по теме
Изображения с правильно заданными атрибутами столь же важны при создании страницы, содержимое которой будет восприниматься легко, как заголовки и мета тэги title.
Изображения являются ключевым элементом, которые дополняют текстовое содержимое и делают страницу более простой к восприятию. Всегда следует задавать атрибуты alt и атрибуты, дающие инструкцию браузеру клиента о том какой размер должны иметь изображения. Настройки размера изображений обязательно нужно тестировать на различных устройствах и разным размером экрана (можно использовать для этого физические устройства или эмуляторы).
Также как заголовки и мета тэги изображения положительно сказываются на ранжировании сайтов в результатах поиска, который видят пользователи поисковых систем.
Читайте про адаптацию сайта под мобильные устройства