Подключение изображений §

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

<img src="logo.png"/>

Форматы изображений §

Существует несколько основных форматов изображений:#JPEG,#PNG,#WebP,#SVG и#GIF.

SVG §

Формат SVG переводится как масштабируемая векторная графика. Качество таких изображений не меняется при изменении размеров, да и вес у них небольшой. Отлично подходит для малоцветных схем, логотипов и иконок. Чаще всего используется в случаях, когда необходимо масштабировать изображение без потерь, изменять цвет элементов изображения, анимировать части изображения.

SVG бесконечно масштабируем, отзывчив, имеет очень маленький размер файла, перспективен для следующего поколения экранов с неисчислимой плотностью пикселей и может быть стилизован, анимирован и оживлён при помощи известных веб-технологий — CSS и JavaScript.

JPEG §

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

PNG §

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

GIF §

Формат GIF используется для простейших анимаций. В последнее время GIF-изображения становятся всё менее используемыми и заменяются на другие, более оптимальные форматы.

webP §

Формат WebP был разработан Google. Ключевые особенности формата , что картинки с расширением webP занимают на 30% меньше места на странице благодаря особому сжатию. WebP поддерживает различные степени прозрачности.

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

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

<img src="logo.png" width="200" height="100"/>

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

Атрибут alt §

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

Альтернативный текст изображения задаётся с помощью атрибута alt.

Например:

<img src="cat.png" alt="Кот, который гуляет сам по себе"/>

Figure и figcaption §

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

Для разъясняющего комментария к такому иллюстративному материалу существует тег#figcaption, который размещается первым или последним элементом внутри#figure. Например:

Картинка-заглушка §

Изображение-ссылка §

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

Контентное изображение §

Слово контент происходит от английского слова «content» — содержимое.

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

Декоративное изображение §

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

Такие изображения содержат информацию о внешнем виде товара. Если они по какой-либо причине не отобразятся, то пользователь потеряет часть информации о товаре.

Реализация: img

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

Реализация:

background-image для псевдоэлемента §