Картинки HTML

Когда мы говорили про верстку сайта, то упоминали один из важных тегов, который позволяет разместить картинки HTML. Это тег IMG. Если кратко описать его функцию, то он позволяет видеть ссылку на изображение не просто строкой текста, но полноценной картинкой. 

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

1. src + URL изображения

Задает путь к изображению. Это обязательный атрибут.
Пример:

<img src="image.jpg" alt="Описание изображения">

Результат: Загружает изображение из указанного пути.

2. alt + текстовое описание

Указывает текст, который отображается, если изображение не может быть загружено. Также полезен для SEO и доступности.
Пример:

<img src="image.jpg" alt="Красивая природа">

Результат: Показывает текст "Красивая природа", если изображение не загружается.

3. width + значение в пикселях/процентах

Устанавливает ширину изображения. Может быть указано в пикселях или процентах.
Пример:

<img src="image.jpg" width="300">

Результат: Отображает изображение шириной 300 пикселей. Высота будет пропорциональна исходному размеру, если не задан атрибут height.

4. height + значение в пикселях/процентах

Устанавливает высоту изображения. Может быть указано в пикселях или процентах.
Пример:

<img src="image.jpg" height="200">

Результат: Отображает изображение высотой 200 пикселей. Ширина будет пропорциональна, если не задан атрибут width.

5. title + текст подсказки

Задает текст всплывающей подсказки при наведении курсора на изображение.
Пример:

<img src="image.jpg" title="Нажмите, чтобы увеличить">

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

6. loading + lazy | eager

Указывает, как браузер должен загружать изображение.

• lazy — откладывает загрузку, пока изображение не появится в области видимости.

• eager — загружает сразу.

Пример:

<img src="image.jpg" loading="lazy">

Результат: Изображение загружается только при прокрутке к нему.

7. decoding + sync | async | auto

Указывает, как браузер должен обрабатывать декодирование изображения.

• sync — декодирует синхронно.

• async — декодирует асинхронно.

• auto — выбор браузера.

Пример:

<img src="image.jpg" decoding="async">

Результат: Браузер декодирует изображение асинхронно.

8. crossorigin + anonymous | use-credentials

Определяет, требуется ли использовать CORS (междоменные запросы).

• anonymous — для запросов без учетных данных.

• use-credentials — включает учетные данные.

Пример:

<img src="https://example.com/image.jpg&quot; crossorigin="anonymous">

Результат: Загружает изображение без отправки учетных данных на сервер.

9. referrerpolicy + значение политики

Определяет, какую информацию о реферере браузер отправляет при загрузке изображения. Возможные значения:

• no-referrer, origin, origin-when-cross-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url.

Пример:

<img src="image.jpg" referrerpolicy="no-referrer">

Результат: Браузер не отправляет информацию о реферере при загрузке изображения.

10. usemap + ID карты

Связывает изображение с картой изображений (image map), определенной с помощью <map>.
Пример:

<img src="image.jpg" usemap="#map1">

<map name="map1">

<area shape="rect" coords="34,44,270,350" href="https://example.com&quot;&gt;

</map>

Результат: Области изображения становятся интерактивными.

11. ismap (без значения)

Делает изображение интерактивным при использовании в качестве ссылки. Используется с <a>.
Пример:

<a href="handler.php"><img src="image.jpg" ismap></a>

Результат: Координаты клика на изображении отправляются на сервер через указанный URL.

12. alt для SVG

Описание: Используется, если <img> вставляет SVG. Пример:

<img src="vector.svg" alt="Описание графики">

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

Часть параметров облегчает работу сервера, распределяя на него нагрузку. В том случае, если одновременно будет много запросов, то поздняя загрузка изображения позволяет избежать пиковой нагрузки. Это полезно знать, хотя в заданиях ЕГЭ такого может и не встретиться. 

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

Тем не менее, подготовка к ЕГЭ включает в себя порой сложные вопросы, требующие дополнительной глубины знаний по теме верстки и языка разметки HTML.

Давайте посмотрим на примерные задания и попробуем ответить на них, используя материал выше.

1. Какой атрибут является обязательным для тега <img>?

a) alt
b) src
c) title
d) width
2. Какой атрибут задает текст, который отображается, если изображение не загружено?

a) title
b) alt
c) decoding
d) loading
3. Какое значение атрибута loading используется для отложенной загрузки изображений?

a) sync
b) eager
c) lazy
d) auto
4. Какой атрибут используется для указания ширины изображения?

a) width
b) height
c) size
d) dimension
5. Что делает атрибут usemap?

a) Делает изображение интерактивным.
b) Связывает изображение с картой изображений.
c) Задает текст подсказки для изображения.
d) Определяет политику отправки данных о реферрере.
6. Какое значение атрибута decoding указывает на асинхронное декодирование изображения?

a) sync
b) async
c) auto
d) lazy
7. Какой атрибут определяет, будет ли отправляться информация о реферере при загрузке изображения?

a) referrerpolicy
b) crossorigin
c) loading
d) decoding
8. Какой атрибут используется для загрузки изображения без отправки учетных данных на сервер?

a) referrerpolicy="no-referrer"
b) crossorigin="anonymous"
c) decoding="async"
d) loading="lazy"
9. Что делает атрибут ismap?

a) Позволяет создавать интерактивные области изображения.
b) Делает изображение ссылкой для отправки координат на сервер.
c) Устанавливает политику безопасности CORS.
d) Указывает путь к карте изображений.
10. Какой атрибут задает текст всплывающей подсказки при наведении на изображение?

a) alt
b) title
c) referrerpolicy
d) usemap