HTML тег
Для вставки графических изображений в HTML-документ используется HTML тег (img сокращение от англ. слова image — изображение). Изображения не вставляются напрямую на веб-страницу, тег содержит лишь ссылку на изображение и создает требуемого размера пространство, в котором отображается картинка в графическом формате GIF, JPEG или PNG:
- JPG — наиболее распространенный формат для фотографий. Изображения с расширением .jpg отображают миллионы цветов, что особенно важно для точного отображения различных оттенков и градиентов в фотографиях. Однако, такие изображения не могут содержать прозрачные области.
- GIF используется для простой графики, например, такой как логотипы. Изображения в формате GIF не используются для фотографий, потому что они не могут содержать столько цветовой информации как JPG-изображения. Однако GIF-изображения могут иметь прозрачные области и могут быть сжаты в файлы очень маленьких размеров. Также формат GIF поддерживает анимацию.
- PNG — формат изображений, позволяющий, также как и JPG, отображать миллионы цветов и содержать прозрачные области. Однако, как правило, изображения с расширением .png имеют несколько больший размер, чем JPG или GIF.
HTML тег имеет два обязательных атрибута: src и alt .
Атрибут src выполняет важную роль в отображении графики на странице — задает путь (относительный или абсолютный) к изображению, которое технически не вставляется на страницу: браузер отображает изображение на которое ведет ссылка.
Атрибут alt задает альтернативный текст для изображения, который будет отображен только в том случае, когда изображение не может быть отображено (указан не правильный путь или картинка была удалена).
При необходимости изображение можно сделать ссылкой, для этого нужно всего лишь поместить тег внутрь элемента . При этом вокруг изображения появится рамка, которая легко убирается с помощью CSS:
Изображения также могут быть использованы в качестве карт-изображений — это когда одно изображение содержит несколько активных областей разной формы, каждая из которых является отдельной ссылкой. Такая карта по внешнему виду ничем не отличается от обычного изображения.
Примечание: для добавления изображений на веб-страницу вы также можете воспользоваться CSS свойством background-image, которое позволяет обычный задний фон элемента заменить на картинку.
Атрибуты
src: Указывает браузеру расположение (URL-адрес) нужного изображения. Пример » alt: Предоставляет текстовое описание картинки, выводимое на экран только в случае, если картинка по каким-либо причинам не может быть отображена.
Примечание: для создания всплывающей подсказки, при наведении курсора мыши на картинку, нужно использовать глобальный атрибут title. В качестве значения атрибута выступает произвольная строка, в которой можно сообщить дополнительную информацию о картинке.
Пример » Если картинка используется в качестве украшения веб-страницы и не несет в себе никакой смысловой нагрузки, то вместо описания картинки в качестве значения можно оставить пустую строку (alt=»»). height: Указывает высоту изображения в пикселях. ismap: Атрибут ismap является атрибутом булева типа. Его присутствие указывает браузеру, что картинка является частью карты-изображения расположенной на сервере (карта-изображение — изображение с интерактивными областями). Допустимые значения логического атрибута ismap:
При нажатиии на интерактивную область карты-изображения, координаты клика отправляются на сервер в строке запроса URL-адреса.
Примечание: атрибут ismap используется только если элемент является дочерним элементом тега , содержащего атрибут href.
usemap: Определяет изображение в качестве карты-изображения. Значение (обязательно должно начинаться с символа » # «), указанное в данном атрибуте, ассоциируется со значением атрибута name или id тега и создает связь между элементами и . Пример »
Примечание: атрибут usemap нельзя использовать, если элемент является потомком элемента или .
width: Указывает ширину изображения в пикселях.
Примечание: всегда указывайте атрибуты width и height для изображения. В этом случае пространство требуемое для изображения будет заранее резервироваться браузером при загрузке страницы. Поскольку браузер сам не может заранее вычислить размер изображения, без этих атрибутов разметка страницы во время загрузки может отображаться некорректно, до тех пор пока изображение не будет загружено. Это будет особенно ощутимо для тех пользователей, у которых медленный интернет.
Стиль по умолчанию
Пример
Результат данного примера в окне браузера:
HTML — Урок 8. Работа с изображениями — тег img
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.
Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите здесь.
Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.
Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге атрибут background=»fon.gif», рисунком fon.gif будет залито все окно браузера.
Изображения¶
Декоративные изображения, такие как фоновые градиенты на кнопках или фоновые изображения на участках контента или всей странице, являются презентационными и должны применяться с помощью CSS. Когда изображение добавляет контекст в документ, оно является контентом и должно быть встроено в HTML.
Основным способом включения изображений является тег с атрибутом src , ссылающимся на ресурс изображения, и атрибутом alt , описывающим изображение.
img src="images/eve.png" alt="Eve" /> 1 2 3 4 5 6
img src="images/eve.png" alt="Eve" srcset="images/eve.png 400w, images/eve-xl.jpg 800w" sizes="(max-width: 800px) 400px, 800px" /> 1 2 3 4 5 6 7 8
picture> source src="images/eve.png" media="(max-width: 800px)" /> source src="images/eve-xl.jpg" /> img src="images/eve.png" alt="Eve" /> picture> В HTML также поддерживается включение SVG-изображений с помощью напрямую, хотя SVG-изображения с расширением .svg (или в виде data-uri) могут быть встроены с помощью элемента .
Как минимум, каждое изображение переднего плана должно содержать атрибуты src и alt .
Файл src — это путь и имя файла встроенного изображения. Атрибут src используется для указания URL-адреса изображения. Затем браузер получает актив и отображает его на странице. Этот атрибут необходим для ; без него нечего рендерить.
Атрибут alt содержит альтернативный текст для изображения, представляющий собой описание изображения для тех, кто не может видеть экран (вспомните поисковые системы и вспомогательные технологии, и даже Alexa, Siri и Google Assistant), и может быть показан браузером, если изображение не загружается. Помимо пользователей с медленными сетями или ограниченной пропускной способностью, текст alt невероятно полезен в HTML-сообщениях, поскольку многие пользователи блокируют изображения в своих почтовых приложениях.
img src="path/filename" alt="descriptive text" /> Если изображение имеет тип файла SVG, включите также role=»img» , что необходимо в связи с VoiceOver ошибками.
img src="switch.svg" alt="light switch" role="img" /> Эти примеры включают косую черту в конце, также ошибочно называемую самозакрывающимся тегом; это свойство XML, включая SVG и XHTML, но не HTML. Подробнее об этом см. примечание в модуле forms.
Написание эффективных описаний изображений alt .¶
Атрибуты Alt должны быть краткими и лаконичными, содержать всю необходимую информацию, которую передает изображение, и исключать информацию, избыточную по отношению к другому содержимому документа или иную бесполезную. При написании текста тон должен отражать тон сайта.
Чтобы написать эффективный альтернативный текст, представьте, что вы читаете всю страницу человеку, который не может ее видеть. С помощью элемента semantic пользователи и боты, читающие с экрана, получают информацию о том, что данный элемент является изображением. Включать в alt фразу «This is an image/screenshot/photo of» является излишним. Пользователю не нужно знать, что это изображение, но ему нужно знать, какую информацию передает изображение.
Обычно вы не говорите: «Это зернистое изображение собаки в красной шапке». Скорее, вы передадите то, что передает изображение в контексте остальной части документа, а то, что вы передадите, будет меняться в зависимости от контекста и содержания окружающего текста.
Например, фотография собаки будет описана по-разному, в зависимости от контекста. Если Пушистик — это аватарка рядом с отзывом о корме для собак Yuckymeat, то достаточно alt=»Пушистик» .
Если фотография является частью страницы усыновления Пушистика на сайте приюта для животных, то целевой аудиторией является потенциальный родитель собаки. Текст должен описывать информацию, переданную на изображении, которая важна для усыновителя и не дублируется в окружающем тексте. Уместно более длинное описание, например, alt=»Пушистик, трехцветный терьер с очень короткой шерстью, с теннисным мячиком во рту» . В тексте страницы, посвященной усыновлению, обычно указываются вид, порода, возраст и пол усыновляемого животного, поэтому их не нужно повторять в тексте alt. Но в письменной биографии собаки, скорее всего, не будет указана длина шерсти, цвет и предпочтения в игрушках. Обратите внимание, что мы не описывали изображение: потенциальному владельцу собаки не нужно знать, находится ли она в помещении или на улице, или что у нее красный ошейник и синий поводок.
При использовании изображений для иконографии, поскольку атрибут alt обеспечивает доступное имя, передавайте смысл пиктограммы, а не описание изображения. Например, атрибут alt значка лупы — search . У пиктограммы, похожей на дом, alt-текстом является home . Описание значка 5-дюймовой дискеты — save . Если есть две иконки Пушистика, используемые для обозначения лучших практик и антипаттернов, то у улыбающейся собаки в зеленом берете может быть установлен атрибут alt=»good» , а у рычащей собаки в красном берете — alt=»bad» . При этом следует использовать только стандартную иконографию, а при использовании нестандартных пиктограмм, таких как «хороший» и «плохой» пушистик, включать легенду и гарантировать, что пиктограммы не являются единственным способом расшифровки значения элементов пользовательского интерфейса,
Если изображение представляет собой скриншот или график, напишите, что можно узнать из этого изображения, а не описывайте его внешний вид. Хотя изображение, безусловно, может стоить тысячи слов, описание должно кратко передавать все, что можно узнать.
Опускайте информацию, которую пользователь уже знает из контекста и которая иным образом осведомлена в контенте. Например, если вы находитесь на обучающей странице по изменению настроек браузера, а страница посвящена щелчку по значкам в браузере chrome, то URL страницы на снимке экрана не важен. Ограничьте alt темой: как изменить настройки. В качестве alt можно написать: «Значок настроек находится в навигационной панели под полем поиска». Не указывайте «screenshot» или «machinelearningworkshop», так как пользователю не нужно знать, что это скриншот, и не нужно знать, где был технический писатель, когда писал инструкцию. Описание изображения основывается на контексте того, зачем оно было включено.
Если изображение показывает, как найти номер версии браузера по адресу chrome://version/ , включите URL в содержимое страницы в качестве инструкции, а в качестве атрибута alt укажите пустую строку, поскольку изображение не дает никакой информации, которая не содержится в окружающем тексте.
Если изображение не несет никакой дополнительной информации или является чисто декоративным, то атрибут alt все равно должен присутствовать, но в виде пустой строки.
img src="svg/magazine.svg" alt="" role="none" /> На сайте MachineLearningWorkshop.com имеется семь изображений переднего плана, следовательно, семь изображений с атрибутами alt: выключатель пасхального яйца, значок руководства, две биографические фотографии Хэла и Евы и три аватара блендера, пылесоса и тостера. Изображение переднего плана, похожее на журнал, является единственным чисто декоративным. На странице также есть два фоновых изображения, которые также являются декоративными и, поскольку добавлены с помощью CSS, недоступны.
Журнал, будучи чисто декоративным, имеет пустой атрибут alt и role = none , поскольку изображение является чисто презентационным SVG. SVG-изображения, если они имеют смысл, должны содержать атрибут role=»img» .
img src="svg/magazine.svg" alt="" role="none" /> В нижней части страницы расположены три обзора, каждый из которых содержит изображение плаката. Обычно текст alt — это имя человека, изображенного на плакате.
1 2 3 4 5
img src="images/blender.svg" alt="Blendan Smooth" role="img" /> Вместо этого, поскольку это шуточная страница, следует передать то, что может быть неочевидным для слабовидящих пользователей, чтобы они не пропустили юмор; мы используем оригинальную функцию машины в качестве alt , вместо того чтобы использовать имя персонажа:
img src="images/blender.svg" alt="blender" role="img" /> Фотографии преподавателей — это не просто аватары, это биографические изображения, поэтому они требуют более подробного описания.
Если бы это был реальный сайт, вы бы дали минимальное описание того, как выглядит преподаватель, чтобы будущий студент мог узнать его при входе в аудиторию.
1 2 3 4 5
img src="svg/hal.svg" role="img" alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." /> Поскольку это шуточный сайт, вместо этого предоставьте информацию, которая уместна в контексте шутки:
1 2 3 4 5
img src="svg/hal.svg" role="img" alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." /> Если бы вы читали эту страницу другу по телефону, ему было бы все равно, как выглядит красная точка. В данном случае важна история создания ссылки на фильм.
При написании описательного текста подумайте, какую важную и значимую для пользователя информацию передает изображение, и включите ее в текст. Помните, что содержание атрибута alt для изображения зависит от контекста. Вся информация, передаваемая на изображении, которая доступна зрячему пользователю и соответствует контексту, — это то, что необходимо передать, и ничего более. Будьте краткими, точными и полезными.
Атрибуты src и alt являются минимальными требованиями для встраиваемых изображений. Есть еще несколько атрибутов, которые мы должны обсудить.
Отзывчивые изображения¶
Существует огромное количество размеров области просмотра. Существуют также различные разрешения экранов. Вы не захотите тратить полосу пропускания мобильного пользователя, предоставляя ему изображение, достаточно широкое для большого экрана монитора, но, возможно, захотите предоставлять изображения с более высоким разрешением для миниатюрных устройств, разрешение экрана которых в четыре раза меньше обычного. Существует несколько способов предоставления различных изображений в зависимости от размера области просмотра и разрешения экрана.
![]()
srcset атрибут¶
Атрибут srcset позволяет предлагать несколько файлов изображений, причем браузер выбирает, какое изображение запрашивать, на основе нескольких медиа-запросов, включая размер области просмотра и разрешение экрана.
Для элемента может использоваться один атрибут srcset , но этот srcset может ссылаться на несколько изображений. Атрибут srcset принимает список значений, разделенных запятыми, каждое из которых содержит URL-адрес актива, за которым следует пробел, а затем дескрипторы для данного варианта изображения. Если используется дескриптор ширины, то для каждого параметра srcset , кроме последнего, необходимо также включить атрибут sizes с медиазапросом или размером источника. Стоит ознакомиться с разделами, посвященными отзывчивым изображениям с srcset и описательным синтаксисам.
При совпадении изображений srcset будет иметь приоритет над изображением src .
и ¶
Браузер будет рассматривать каждый дочерний элемент и выбирать среди них наиболее подходящий. Если совпадений не найдено, то выбирается URL атрибута src элемента . Доступное имя берется из атрибута alt вложенного элемента
. Стоит также ознакомиться с разделами Learn, посвященными элементу и прескриптивные синтаксисы.
Дополнительные возможности производительности¶
Ленивая загрузка¶
Атрибут loading указывает браузеру, поддерживающему JS, как загружать изображение. Значение по умолчанию eager означает, что изображение загружается сразу же после разбора HTML, даже если оно находится за пределами видимой области просмотра. При установке значения loading=»lazy» загрузка изображения откладывается до тех пор, пока оно, скорее всего, не попадет в область просмотра. «Вероятность» определяется браузером на основе расстояния, на котором изображение находится от области просмотра. Это значение обновляется по мере прокрутки изображения пользователем. Ленивая загрузка позволяет экономить полосу пропускания и процессор, повышая производительность для большинства пользователей. Если JavaScript отключен, то в целях безопасности все изображения по умолчанию будут иметь значение eager .
img src="switch.svg" alt="light switch" loading="lazy" /> Соотношение сторон¶
Браузеры начинают рендеринг HTML с момента его получения и делают запросы к активам по мере их появления. Это означает, что когда браузер встречает тег и делает запрос, он уже отрисовывает HTML. А загрузка изображений может занять некоторое время. По умолчанию браузеры не резервируют место для изображений, кроме размера, необходимого для отображения текста alt .
Элемент всегда поддерживал атрибуты height и width , не имеющие единицы измерения. Эти свойства вышли из употребления в пользу CSS. В CSS можно определять размеры изображения, часто задавая одно измерение, например max-width: 100%; , чтобы обеспечить сохранение соотношения сторон. Поскольку CSS обычно включается в , он разбирается до того, как встретится какой-либо
. Однако без явного указания height или соотношения сторон, зарезервированное место является высотой (или шириной) текста alt . Поскольку большинство разработчиков указывают только ширину, получение и отрисовка изображений приводит к кумулятивному сдвигу макета, что вредит web vitals. Для решения этой проблемы браузеры поддерживают соотношение сторон изображения. Включение атрибутов height и width в
действует как подсказки по размерам, сообщая браузеру соотношение сторон, что позволяет зарезервировать необходимое количество места для последующего рендеринга изображения. Указывая в изображении значения высоты и ширины, браузер узнает соотношение сторон этого изображения. Когда браузер сталкивается с одним измерением, как в нашем примере с 50%, он сохраняет место для изображения, придерживаясь CSS-измерения, а другое измерение сохраняет соотношение сторон по ширине и высоте.
1 2 3 4 5 6 7
img src="switch.svg" alt="light switch" role="img" width="70" height="112" /> Изображения по-прежнему будут отзывчивыми, если CSS был настроен правильно, чтобы сделать их отзывчивыми. Да, включенные в состав атрибуты height и width будут переопределены с помощью CSS. Цель включения этих атрибутов — зарезервировать пространство с правильным соотношением сторон, что повышает производительность за счет уменьшения смещения макета. Страница будет загружаться примерно столько же времени, но пользовательский интерфейс не будет перескакивать при отображении изображения на экране.
Другие возможности изображения¶
Элемент также поддерживает атрибуты crossorigin , decoding , referrerpolicy и, в браузерах на базе Blink, fetchpriority . Редко используется, если изображение является частью карты на стороне сервера, то для пользователей, не имеющих указательных устройств, следует включить булевский атрибут ismap и вложить
в ссылку.
Атрибут ismap не нужен и даже не поддерживается для , поскольку координаты x и y места щелчка передаются во время отправки формы, добавляя значения к имени ввода, если таковое имеется. Например, что-то вроде &imageSubmitName.x=169&imageSubmitName.y=66 будет передано вместе с формой, когда пользователь щелкнет на изображении, отправив его. Если изображение не имеет атрибута name , то отправляются значения x и y: &x=169&y=66 .
Какой html элемент отображает изображение
Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src . Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег
.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
Атрибуты
align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. alt Альтернативный текст для изображения. border Толщина рамки вокруг изображения. height Высота изображения. hspace Горизонтальный отступ от изображения до окружающего контента. ismap Говорит браузеру, что картинка является серверной картой-изображением. longdesc Указывает адрес документа, где содержится аннотация к картинке. lowsrc Адрес изображения низкого качества. src Путь к графическому файлу. vspace Вертикальный отступ от изображения до окружающего контента. width Ширина изображения. usemap Ссылка на тег , содержащий координаты для клиентской карты-изображения.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег IMG 
Lorem ipsum dolor sit amet.