Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка
содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему
виду ничем не отличается от обычного изображения, но при этом оно может быть
разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
| HTML | <img src="URL" alt="альтернативный текст"> |
| XHTML | <img src="URL" alt="альтернативный текст" /> |
Атрибуты
- align
- Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
- alt
- Альтернативный текст для изображения.
- border
- Толщина рамки вокруг изображения.
- height
- Высота изображения.
- hspace
- Горизонтальный отступ от изображения до окружающего контента.
- ismap
- Говорит браузеру, что картинка является серверной картой-изображением.
- longdesc
- Указывает адрес документа, где содержится аннотация к картинке.
- lowsrc
- Адрес изображения низкого качества.
- src
- Путь к графическому файлу.
- vspace
- Вертикальный отступ от изображения до окружающего контента.
- width
- Ширина изображения.
- usemap
- Ссылка на тег <map>, содержащий координаты
для клиентской карты-изображения.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег IMG</title> </head> <body> <p><a href="lorem.html"><img src="images/girl.png" alt="lorem"></a> Lorem ipsum dolor sit amet...</p> </body> </html>
Изображения
- Альтернативный текст
- Добавление рисунка
- Изменение размеров рисунка
- Изображение в качестве ссылки
- Изображения
- Изображения в тексте
- Карты-изображения
- Плавающие элементы
- Почти стандартный режим
- Применение таблиц
- Строчные элементы
- Управление историей для пользы и развлечения
HTML img src Attribute
❮ HTML тег
Пример
Изображение размечено следующим образом:
jpg» alt=»Девушка в куртке»>
Попробуйте Себя »
Определение и использование
Обязательный атрибут src указывает URL-адрес изображения.
Существует два способа указать URL-адрес в src атрибут:
1. Абсолютный URL — Ссылки на внешнее изображение, которое размещено на другом сайте. Пример: src=»https://www.w3schools.com/images/img_girl.jpg».
Примечания:
2. Относительный URL-адрес — Ссылки на изображение, размещенное внутри
веб-сайт. Здесь URL-адрес не включает доменное имя. Если URL-адрес начинается
без косой черты, это будет относительно текущей страницы.
Пример: src=»img_girl.jpg».
Если URL-адрес начинается с косой черты, он будет относиться к домену. Пример: src=»/images/img_girl.jpg».
Совет: Почти всегда лучше использовать относительные URL-адреса. Они не сломается, если вы смените домен.
Примечание: A сломан
значок ссылки и текст alt
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| источник | Да | Да | Да | Да | Да |
Синтаксис
Значения атрибутов
| Значение | Описание |
|---|---|
| URL-адрес | URL изображения. Возможные значения:
|
example.com/image.gif») ❮ HTML-тег
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
CSS Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Нужны ли нам библиотеки отложенной загрузки и `data-src` в 2022 году?
Раньше, когда браузерная поддержка встроенной ленивой загрузки не была широко распространена, как сегодня, лучшей практикой было разметить наши изображения атрибутами данных, такими как data-src , и использовать библиотеку JavaScript, такую как моя vanilla-lazyload, чтобы начать загрузку их, когда они вошли в видимую часть страницы.
Является ли это лучшей практикой сегодня?
Что такое ленивая загрузка?
Ленивая загрузка изображений — это метод, откладывающий загрузку изображений ниже сгиба до того момента, когда они вошли в область просмотра или близки к этому, область просмотра означает видимую часть страницы. Это позволяет вам сэкономить трафик и деньги (если вы платите за свои изображения через CDN), уменьшить углеродный след вашего веб-сайта и, что не менее важно, сократить время рендеринга вашей страницы, повысить производительность сети и, в частности, Самая большая содержательная краска.
Отложенная загрузка изображений с помощью JavaScript
Для отложенной загрузки изображений очень распространена практика их разметки путем замены надлежащего атрибута src на аналогичный атрибут данных, data-src , а затем полагаться на решение JavaScript для: а) определения, когда изображения приближаются к видимой части веб-сайта (обычно из-за того, что пользователь прокрутил вниз), б) для копирования атрибутов 
<изображение данные-источник = "черепаха.jpg" alt="Ленивая черепаха" />
Встроенная отложенная загрузка
При встроенной отложенной загрузке или отложенной загрузке на уровне браузера для отложенной загрузки изображений вам просто нужно добавить атрибут loading="lazy" в тег .
<изображение источник = "черепаха.jpg" alt="Ленивая черепаха" загрузка = "ленивый" />
Это обеспечивает встроенную ленивую загрузку в браузерах, которые ее поддерживают, то есть почти во всех браузерах, кроме нашего старого 9.0183 «друг» Internet Explorer.
Нужна ли нам по-прежнему отложенная загрузка на основе JavaScript?
Короткий ответ: нет, если только вы не хотите большего контроля над обработкой ленивой загрузки.
Итак, в каких случаях можно использовать отложенную загрузку с помощью JavaScript вместо простого использования loading='lazy' ?
1. Вы заботитесь о пользователях с медленным или неисправным соединением (подсказка: вы должны это делать)
Что произойдет, если у вас есть несколько страниц с большим количеством изображений, а некоторые пользователи с медленным соединением прокручивают страницу вниз быстрее, чем потребовалось бы их соединению для загрузки изображений?
Встроенная отложенная загрузка заставит браузеры загружать ваши отложенные изображения в следующем порядке: от первого, появившегося на странице, до последнего.
С библиотеками на основе Javascript, такими как vanilla-lazyload, которые отменяют загрузку изображений, выходящих за пределы видимой части страницы во время загрузки, пропускная способность ваших пользователей всегда будет сосредоточена на загрузке изображений, находящихся в видимой части страницы. .
Кроме того, если загрузка изображений прерывается из-за сетевой ошибки, т.е. если соединение пользователя прерывается на некоторое время, vanilla-lazyload повторит попытку загрузки этих изображений, когда сеть снова станет доступной.
Все это значительно повышает удобство работы пользователей. Вы можете попробовать эти функции в любой из демонстраций vanilla-lazyload, например, в базовой демонстрации, а также регулировать или отключать скорость вашего соединения в инструментах разработчика вашего браузера.
2. Вам нужны расширенные обратные вызовы или классы CSS для ваших изображений
Встроенная ленивая загрузка откладывает загрузку изображений, и вы по-прежнему можете отслеживать такие события, как loaded , но у вас нет возможности отслеживать другие события на ваши изображения, такие как начало загрузки, ошибка, выход из области просмотра и т.
д.
Отложенная загрузка, управляемая JavaScript, будет запускать обратные вызовы и применять классы CSS в различных случаях: когда изображения начинают загружаться, когда изображения входят в область просмотра или выходят из нее, когда все они завершили загрузку и даже когда их загрузка не удалась из-за сетевой ошибки.
Эти обратные вызовы и классы CSS могут быть очень полезны для создания визуальных эффектов на вашей странице.
Узнайте больше о обратных вызовах и классах в vanilla-lazyload API/options.
3. Вы хотите оптимизировать веб-производительность и, в частности, самую большую отрисовку контента на вашей странице
При встроенной отложенной загрузке вы не можете контролировать, какие изображения загружаются из браузера.
Могут быть некоторые изображения, которые едва появляются в видимой части страницы, или они находятся ниже сгиба, но недалеко, и браузеры будут загружать их, даже если они не являются основным изображением страницы, то есть тем, который запускает самую большую краску на вашей странице.