Html тег

Содержание:

Изображения, хранящиеся в других директориях/папках
Недостатки
Что такое атрибут alt?
- Для чего нужен данный атрибут?
Image Modal (Advanced)
- Example
Цены
Responsive Image Gallery
- Example
Тег
- Форматы файлов для WEB:
HTML5 Учебник
Рисунок на поле
- Применение таблиц
- Использование стилей
Размеры изображения и CSS
Распространённые ошибки
Атрибут картинки ALT у изображений
Использование атрибутов
Базовый синтаксис
Image Maps или карта изображения
Как CSS работает с шириной и высотой элемента
Как вставить картинку с ссылкой, назначение Alt и Title в Img?
Атрибуты

Изображения, хранящиеся в других директориях/папках

Если путь не задан, то браузер будет искать наше изображение в той же папке, где находится наш веб документ. Однако принято хранить все картинки и медиафайлы в специальной папке с названием или images или img.

Чтобы браузер правильно и корректно отобразил вашу картинку до нее нужно указать правильный путь (т.е src).

1	<img src=»/images/html5.gif»alt=»HTML5 Иконка»style=»width:128px;height:128px;»>

Немного проясню. В примере выше наше изображение находится относительно папки с названием images.

Недостатки

Как вставить картинку в html

1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных
областей. Альтернативный текст позволяет получить текстовую информацию о рисунке
при отключенной в браузере загрузке изображений. Поскольку загрузка изображений
происходит после получения браузером информации о нем, то замещающий рисунок
текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Для карт-изображений эта особенность является актуальной, ведь если отключить
просмотр изображений, что делают многие пользователи, то в итоге увидим лишь
один пустой прямоугольник.

2. При сложной форме области ссылки увеличивается объем кода HTML. Контур
аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует
задать две координаты, а общее количество таких точек может быть достаточно
велико. Справедливости ради, следует отметить, что сложные формы являются частным
случаем и применяются достаточно редко.

3. С картами-изображениями нельзя сделать разные эффекты, которые доступны
при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная
анимация, индивидуальная оптимизация картинок для их быстрой загрузки.

Что такое атрибут alt?

Html формы

Атрибут alt=»» (от англ. alternative) тега img представляет собой альтернативный текст или проще говоря — описание изображения. Для каждой картинки он прописывается отдельно и вкратце рассказывает, что на ней изображено. Синтаксис его крайне прост. Внутри тега img необходимо прописать атрибут alt=»», внутри кавычек которого и располагается описание.

Ниже приведен пример использования атрибута alt в теге img у нас на сайте.

Для чего нужен данный атрибут?

На заре развития Интернета, когда скорость передачи данных была крайне низка, не все пользователи при просмотре сайтов загружали фотографии. Была даже такая функция у браузеров — не загружать изображения. Для тех времен они «весели» слишком много и могли открываться по 10 минут. Как раз в этом случае на помощь приходил атрибут alt=»», который описывал изображенное на фотографии текстом. (Вместо рисунка отображался пустой квадрат, в котором находилось описание незагруженного изображения)

Но эти времена прошли, и сейчас alt используется, в основном, для поисковой оптимизации. Об этом мы поговорим ниже.

Image Modal (Advanced)

Как создать кнопку html, которая действует как ссылка?

This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by
default.

Then, use a JavaScript to show the modal window and to display the
image inside the modal, when a user clicks on the image:

Example

// Get the modalvar modal = document.getElementById(‘myModal’);// Get the image and insert it
inside the modal — use its «alt» text as a captionvar img =
document.getElementById(‘myImg’);var modalImg = document.getElementById(«img01»);
var captionText = document.getElementById(«caption»);img.onclick =
function(){ modal.style.display = «block»; modalImg.src = this.src; captionText.innerHTML = this.alt;}
// Get the <span> element that closes the modalvar span =
document.getElementsByClassName(«close»);// When the user clicks
on <span> (x), close the modalspan.onclick = function() { modal.style.display = «none»;}

❮ Previous
Next ❯

Цены

Responsive Image Gallery

CSS can be used to create image galleries. This example use
media queries to re-arrange the images on different screen sizes. Resize the
browser window to see the effect:

Add a description of the image here

Example

.responsive {
padding: 0 6px;  float: left;  width: 24.99999%;}@media only screen and
(max-width: 700px){  .responsive {
width: 49.99999%;    margin: 6px
0;  }}@media only screen and (max-width: 500px){  .responsive {    width: 100%;
  }}

Tip: Read more about Responsive Web Design in our
CSS RWD Tutorial.

Тег

С точки зрения html добавить изображение на страницу можно с помощью тега <img>, который имеет 2 обязательных атрибута:

src — для указания пути к файлу изображения. Если путь указан неверно или изображение было удалено с сервера, то картинку вы не увидите.
alt — для указания альтернативного текста, который поясняет, что изображено на картинке. Этот атрибут нужен для индексации поисковиками (поиск по картинке) и для программ-скринридеров. Увидеть текст этого атрибута можно, когда путь к изображению в атрибуте src написан неверно.

Тег img

1	<img src=»images/nature.jpg»alt=»Природа»>

Форматы файлов для WEB:

JPEG (.jpg) — позволяет сохранять файлы фотографического качества с миллионами цветов, градиентными переходами в хорошем качестве при небольшом весе файла.

GIF (.gif) — индексированное изображение, в котором можно сохранить не более 256 цветов. GIF поддерживает прозрачность и анимацию. Плохо сохраняет градиенты, зато области сплошного цвета сохраняет хорошо.

PNG (.png) — делится на 2 формата: png-8 и png-24, где цифра указывает на количество бит, с помощью которого можно сохранить изображение. PNG-8 — этот тот же GIF по настройкам, но без возможности сохранять анимацию. А PNG-24, как и JPG позволяет описать изображение с миллионами цветов, но также сохраняет прозрачность. Соответственно, и размеры файлов в PNG-8 и PNG-24 будут отличаться: последний всегда будет больше весить. Но и качество у него будет лучше.

SVG (.svg) — от англ. Scalable Vector Graphics — масштабируемая векторная графика — позволяет сохранять файлы, созданные в Adobe Illustrator (векторной графической программе) в текстовом виде, похожем на XML. Файлы с таким форматом не изменяются при увеличении или уменьшении их размера, т.к. по сути своей являются масштабируемыми.

HTML5 Учебник

HTML СТАРТHTML ВведениеHTML РедакторыHTML Основные примерыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитатыHTML КомментарииHTML ЦветаHTML CSSHTML СсылкиHTML Изображения
Изображения
Карта изображений
Фоновое изображение
Элемент Picture

HTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Пути файловHTML Голова веб-страницыHTML МакетыHTML АдаптивностьHTML Компьютерный кодHTML СемантикаHTML Гид по стилюHTML Символьные объектыHTML СимволыHTML ЭмоджиHTML КодировкаHTML URL кодированиеHTML XHTML

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем
его обтекание происходит только с одной стороны. Фактически это напоминает две
колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два
из них — использование таблицы и применение стилевого свойства margin.

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью
ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение,
во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также
обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью
атрибута width тега <td>.
В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

Результат примера показан на рис. 4.

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где
он располагается — 110 пикселов. Разница между ними и обеспечивает нужное
расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing
и cellpadding не вмешивались в процесс, их значения
лучше обнулить

Обратите внимание, что в ячейках задается выравнивание по высоте

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через
CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя,
в слой text. Теперь для слоя piс следует установить свойство float
со значением left, а для text — margin-left.
Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста
(пример 5).

Пример 5. Использование margin

Свойство float в данном примере нужно, чтобы верхний
край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float
меняем на right, а свойство margin-left
на margin-right.

Размеры изображения и CSS

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения.
Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства.
В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров.
В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

Обратите внимание, как будет отображаться изображение при изменении размеров окна браузера. Если у вас достаточно большой экран, изображение должно отображаться в разных измерениях

Распространённые ошибки

Не нужно масштабировать изображения с использованием атрибутов width и height – ни к чему хорошему это не приводит. Если вы пытаетесь увеличить маленькую картинку – сильно падает её качество и становятся видна пиксельная структура.

Ещё хуже – когда огромную (в пикселях) картинку пытаются уменьшить атрибутами width и height. «Вес» изображения в килобайтах (или мегабайтах?) – остается прежним и она очень долго может грузиться.

Все изменения физических размеров картинки проводятся в Adobe Photoshop, например. И значения width и height в HTML документе должны совпадать с её реальным размером в пикселях.

Не используйте в ALT тексте двойные кавычки и знаки препинания и не пишите слишком длинно.

Атрибут картинки ALT у изображений

ALT — это альтернативный текст к нашим изображениям или проще говоря, мы описываем нашу графику с помощью текста, благодаря этому атрибуту

Напоминаю про его важность в SEO продвижении. Поскольку поиск документов также осуществляется по картинкам, ваше изображение должно быть подписано, чтобы ваш ресурс или статью с данным изображением нашли пользователи мировой паутины

Также использование альтернативного текста с помощью атрибута alt необходимо, если у человека в браузере отключены картинки, или ошибочно задан путь к картинки (когда она оказалась «битой»), с целью экономии трафика или по каким-то другим причинам. Тогда вместо картинки, будет блок с альтернативным текстом.

1	<img src=»img_chania.jpg»alt=»Цветы в Ханье»>

Если браузер пользователя не сможет найти картинку, он возьмет ее описание и покажет:

1	<img src=»wrongname.gif»alt=»Цветы в Ханье»>

Кроме этого в изображениях html зачастую используются также и эти атрибуты width (ширина) и height (высота), которые задают размеры картинки в пикселях.

1	<img src=»img_girl.jpg»alt=»Девочка в жакете»width=»500″height=»600″>

Использование атрибутов

Любую картинку можно как увеличивать, так и уменьшать в размерах, задавая значение высоты или ширины в пикселях или процентах от размера родителя. Если установлена только ширина или высота, то вторая величина вычисляется автоматически исходя из пропорций картинки. Два заданных значения могут исказить пропорции, особенно если они заданы неверно. В примере 1 показаны разные варианты задания размеров в пикселях.

Пример 1. Размеры в пикселях

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
</head>
<body>
<img src=»image/redcat.jpg» alt=»Размеры не заданы»>
<img src=»image/redcat.jpg» alt=»Задана ширина» width=»400″>
<img src=»image/redcat.jpg» alt=»Задана ширина и высота» width=»400″ height=»400″>
</body>
</html>

В примере использовалась одна и та же фотография, для первого <img> размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).

Рис. 1. Размеры фотографии

Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.

Пример 2. Размеры в процентах

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
figure {
width: 27%; /* Ширина */
float: left; /* Выстраиваем элементы по горизонтали */
margin: 0 0 0 3.5%; /* Отступ слева */
background: #f0f0f0; /* Цвет фона */
border-radius: 5px; /* Радиус скругления */
padding: 2%; /* Поля */
}
figure:first-child {
margin-left: 0; /* Убираем отступ для первого элемента */
}
</style>
</head>
<body>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
</body>
</html>

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left. Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

Базовый синтаксис

Понятие «синтаксис» относится как к русскому языку («правильно-писание», как говаривал Винни-Пух), так и к языкам разметки и программирования.

HTML как язык разметки требует следовать определённым правилам — синтаксису. Для картинки они такие: Тег IMG обязательно имеет атрибут SRC — в нём указан путь и название файла-картинки, которую нужно вставить в HTML документ.

<img src="gift_box.png" alt="" width="120" height="120" />

В данном случае — файл картинки — gift_box.png, и находится он в том же каталоге, что и сам HTML документ.

Атрибут width — задает ширину картинки в пикселях, атрибут height — задает высоту рисунка. Хотя они и не строго обязательны – их наличие позволить браузеру не тратить время на вычисление физических размеров картинки и он отобразит её гораздо быстрее.

Атрибут ALT – задаёт альтернативный текст для картинки. Если посетитель в браузере отключит показ картинок, он увидит прямоугольник (размерами с картинку), и в нём – этот альтернативный текст. Поэтому, в нём нужно кратко дать знать посетителю – что на картинке.

Задавать текст в атрибуте ALT – КРАЙНЕ рекомендуется к любому изображению на странице, несущий хоть какой-то смысл. А чисто декоративные картинки (виньетки), могут иметь пустой атрибут ALT.

ALT=""

Содержание атрибута ALT активно используется поисковыми системами и произносится голосовыми браузерами

Тег IMG – непарный и должен быть обязательно закрыт слешем (<IMG…/>).

Image Maps или карта изображения

Есть такой тег в html и называется он
<map> . Его миссия в интернете, а конкретно для картинок — выделить нужную область изображения по координатам. Карта изображения — это некоторая выделенная интерактивная область. В примере ниже мы выделили область компьютера, чашки с кофе и телефоном:

1
2
3
4
5
6
7

</map>

Можете создать отдельный пустой веб документ с расширение .html с помощью программы Блокнот рядом скопируйте данную картинку, скопируйте код и вы получите результат в браузере.

Атрибут name тега
<map> связан с атрибутом usemap
<img> и создает связь между изображением и картой. Внутри него содержится несколько тегов
area , которые определяют области, на которые можно навести курсом мышки и покликать.

Как CSS работает с шириной и высотой элемента

При попытке менять ширину и высоту изображения с помощью CSS, могут возникать неожиданные проблемы. Например, если нужно ограничить ширину, может использоваться следующий код:

Когда в этом возникает потребность, значение переопределяется и ширина изображения ограничивается. Но если для тега через атрибут также задана и высота, она не будет переопределена и изображение в итоге получится вытянутым по высоте и сжатым по ширине, поскольку соотношение сторон картинки больше не сохраняется.

На самом деле, это очень легко исправить, добавив в CSS свойство , чтобы также переопределить значение заданного в HTML атрибута .

Однако, не для всех этот факт является очевидным и думаю, что порой именно из-за такого поведения разработчики избегают задания размеров через HTML. Если в атрибутах изображения размеры не заданы, в CSS можно просто указать , при этом явно не указывая , и браузер сам рассчитает нужную высоту, как только изображение загрузится.

Следовательно, если мы добавляем размеры через HTML-атрибуты и при этом используем трюк , то получаем лучшее из обоих миров, так? Раскладка страницы не смещается, но остаётся возможность менять размер через CSS. Что ж, возможно вы будете удивлены (я был удивлён, поэтому и решил написать эту статью), но до недавнего времени это было не так.

Для примера, рассмотрим код ниже:

В данной ситуации загрузка будет происходить следующим образом:

Погодите-ка, что здесь происходит? Мы вернулись к первой проблеме. Я же говорил, что указывая размеры изображения в HTML, можно избежать проблем со смещением элементов страницы. Становится интересно. Мы переходим к основной части данной статьи.

Проблема в том, что если в CSS в свойствах и задаётся не фиксированное значение (а в наше время адаптивности фиксированные значения и не используются), при рендеринге страницы возникает потребность получить размеры изображения из самого файла, прежде чем размеры сторон смогут быть посчитаны. При этом атрибуты и , заданные в HTML, игнорируются.

Следствием всего этого является то, что на деле задавать атрибуты для изображений нередко оказывается не настолько важным. Да, когда изображение показывается в полный размер без изменения его размеров с помощью CSS, полезно решить проблему смещения раскладки. Однако, когда используется CSS-код, целью которого является, например, предотвращение переполнения изображением доступного пространства, вы столкнётесь с проблемами.

Это влияет на любую страницу, на которой мы ограничиваем размер изображения адаптивным образом — например, устройства с маленьким экраном. Именно эти пользователи больше всего пострадают от смещения раскладки, поскольку используют менее мощные устройства и интернет с низкой скоростью. Конечно, в идеале мы должны для экрана каждого размера предоставить соответствующее изображение, но охватить все варианты не получится, поэтому изображения будут нуждаться в изменении размера браузером, в особенности для мобильных устройств.

На многих веб-сайтах атрибуты и для тегов не указываются. Это может происходить из-за того, что разработчики не знают об их пользе, или наоборот знали о том, что в большинстве случае в этом мало смысла. Какова бы не была причина, это встречается. Но как мы можем агитировать за это, если даже популярный инструмент аудита Lighthouse не считает данный момент ошибкой (хотя в свете некоторых моментов, о которых мы поговорим, уже обсуждается добавление данной оценки).

Как вставить картинку с ссылкой, назначение Alt и Title в Img?

Если Img по своей сути является строчным элементом, то его можно просто считать большой буквой, а значит нам ничто не мешает сделать изображение ссылкой, заключив этот тег внутрь гиперссылки. Вообще, про это я уже достаточно подробно писал в недавней статье про создание гиперссылки в Html коде, но немного повториться будет не грех.

<a href="https://ktonanovenkogo.ru"><img src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

В браузере IE вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать, вам нужно будет добавить в тэг Img атрибут Border со значением ноль:

<a href="https://ktonanovenkogo.ru"><img border=0 src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

Для всех тех случаев, когда графический файл по каким-либо причинам не может подгрузиться вместе с Html документом (путь до него прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt.

Alt выполняет роль альтернативного представления изображения. Что происходит в том случае, когда графика не грузится? Браузер все равно, обнаружив в коде элемент Img, формирует под него область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.

Но чтобы пользователь имел представление, что на этом месте страницы должна быть картинка, вы и прописываете Alt в Img, где и вводите текст с описанием того, что здесь должно быть изображено. Содержимое Alt будут выводиться в области неподгрузившейся фотографии.

<img src="путь до файла изображения" width="545"  height="50" >

Ну, и кроме этого, для картинок в Html коде, а так же и для других элементов языка гипертекстовой разметки (например, все для тех же гиперссылок) имеется возможность при наведении пользователем на них курсором мыши показывать ему какой-либо сопровождающий текст.

Делается это с помощью специального атрибута Title, который в нашем случае вставляется в Img. Он по сути является всплывающей подсказкой и его можно использовать практически для всех видимых на странице элементах Html кода, когда вам нужно что-то дополнительно пояснить.

Раньше, кстати, к всплывающей подсказке приводило и добавление текста Alt, но сейчас от такого поведения отказываются и этот атрибут теперь в основном выполняет только роль альтернативного текста, а Title используется исключительно для всплывающих подсказок.

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.pngя" height="71" width="90" alt="" title="">

На самом деле содержимое Alt и Title тега Img не только служит для удобства посетителей вашего сайта, но и может оказывать очень существенную роль на успешность продвижения вашего проекта.

Для этого нужно не забывать употреблять в них ключевые слова, как я об этом неоднократно писал, например, в статье про продвижение сайта своими силами или же в публикации про то, как раскрутить сайт самому.

Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить ранжирование вашего сайта, а так в сервисах поиска по изображениям (картинкам) Яндекса или Google. Однако с этим нужно быть осторожным, ибо довольно легко можно попасть под фильтр за спам от Яндекса или Гугла.

Атрибуты

Атрибут	Значение	Описание
align	leftrighttopbottommiddle	Не поддерживается в HTML5.Определяет выравнивание изображения в соответствии с окружающими элементами.
alt	text	Определяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). Является обязательным атрибутом.
border	pixels	Не поддерживается в HTML5.Определяет ширину границы вокруг изображения.
crossorigin	anonymoususe-credentials	Атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах <canvas>, при этом функциональность последних не ограничивается. У этого атрибута есть 2 допустимых значения:anonymous В этом случае перед загрузкой изображения выполняется кросс-доменный запрос (`Origin: HTTP header`), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок `Access-Control-Allow-Origin: HTTP header`, иначе, использование изображения в <canvas> ограничивается.use-credentials Перед загрузкой изображения выполняется кросс-доменный запрос (`Origin: HTTP header`) с указанием параметров доступа (в виде — cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок `Access-Control-Allow-Origin: HTTP header`, иначе, использование изображения в <canvas> ограничивается. Если данный атрибут не задан, то CORS при загрузке изображения не используется (отсутствует заголовок `Origin: HTTP header`), и как следствие, использование изображения в <canvas> ограничивается всегда. При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
height	pixels	Определяет высоту изображения.
hspace	pixels	Не поддерживается в HTML5.Определяет пробелы слева и справа от изображения.
ismap	ismap	Сообщает браузеру, что изображение является серверной картой-изображением.
longdesc	URL	Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt, описания изображения).
src	URL	Задает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом.
usemap	#mapname	Ссылается на элемент <map>, содержащий координаты для клиентской части карты-изображения.
vspace	pixels	Не поддерживается в HTML5.Определяет пробелы сверху и снизу изображения.
width	pixels	Определяет ширину изображения.