Изображения на html-странице

Изображения на html-странице используются  повсеместно - для оформления статьи или в качестве фона для раздела, заголовка, блока.  В этой статье мы рассмотрим добавление изображений на страницу с помощью тега <img>

Тег <img>

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

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

Форматы файлов для 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. Файлы с таким форматом не изменяются при увеличении или уменьшении их размера, т.к. по сути своей являются масштабируемыми.

WEBP (.webp) ― относительно новый формат графических файлов, разработанный компанией Google в 2010 году, который обеспечивает отличное сжатие изображений при сохранении качества. Он является замечательной альтернативой JPEG и PNG: в формате WEBP при хорошем качестве вес изображения меньше на 25-30%, даже до 50%.

AVIF (.avif) - позволяет добиться еще более высокого уровня сжатия изображения, и качество преобразованных изображений после оптимизации изображения лучше, чем в WEBP. Уже имеет довольно хорошую поддержку браузерами.

Атрибуты тега <img>

В HTML5 используются такие атрибуты для изображений:

• width - ширина картинки;
• height - высота картинки

Оба атрибута предусматривают, что задать размеры изображения можно в px или %. Пиксели подразумеваются, когда атрибуты записываются так:

Стоит отметить, что, если вы задаете и ширину, и высоту изображения, вы не только сообщаете браузеру, сколько места он должен оставить под картинку, но и указываете ее пропорции. В идеале, атрибуты width и height должны совпадать с реальными размерами изображения, но так бывает не всегда. И если вы укажете один из размеров без соблюдения пропорций, браузер отобразит ее сплющенной или растянутой по одной из сторон.

Открыть пример в новой вкладке.

В этом случае, чтобы избежать пересчета, имеет смысл указывать только один из атрибутов - либо width, либо height в зависимости от того, какой из размеров важнее. Браузер сам выполнит масштабирование изображения по второму параметру.

Если вы указываете размеры изображения в %, то должны четко понимать, что % берутся не от размера самой картинки, а от размеров родительского контейнера, в который она помещена. Родительским контейнером может быть как body, так и любой div, article, header, footer и т.д.

Примечание: в HTML5 указывать значение width или height в % нельзя, это будет невалидный код, т.е. не соответствующий стандартам. Тем не менее вы можете указать % в css-свойствах для изображения - и получить аналогичный результат.

Открыть пример в новой вкладке.

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

Дело в том, что если фото не помещается в своем родительском элементе, оно будет выходить за его пределы, а это редко бывает красиво. Поэтому либо нужно спрятать часть фото, задав родительскому элементу свойство overflow: hidden, либо назначить для изображения такие css-правила:

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

Открыть пример в новой вкладке.

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

Еще один момент для особо внимательных - в последнем блоке отступ от картинки до нижнего края блока-контейнера меньше, чем в предыдущих блоках. Связано это с тем, что встроенный html-элемент в виде картинки является строчным (inline), и перевод строки после того, как вы нажали клавишу Enter добавляет к нему пробельный символ. Именно этот пробельный символ и создает дополнительные отступ после картинки. Для того чтобы избавится от этого отступа, необходимо задать для тега img css-свойство display: block.

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

• title - всплывающая подсказка, поясняющая смысл изображения. Часто используется в jQuery-плагинах для вывода подписи под изображением;
• class - класс для выравнивания изображения или для визуальных эффектов (например, для анимации);
• id - уникальный идентификатор, для того чтобы выделить изображение из массы других на странице или использовать его в коде JavaScript.

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

Выравнивание изображений

По левому краю: необходимо использовать какой-то класс, в котором будет задано свойство float:left. Как правило, необходим еще отступ справа с помощью свойства margin-right:

По правому краю: аналогично выравниванию слева стоит использовать другой класс, но с похожими свойствами:

По центру можно выравнять изображение двумя способами: превратив img в блочный элемент с margin: auto или поместить изображение в блочный элемент (div, p, header), для которого задать свойство text-align: center:

Открыть пример в новой вкладке.

CSS-свойства object-fit и object-position для изображений

Для изображений также можно задать свойства object-fit и object-position, которые будут управлять размещением изображения в каком-либо контейнере. Чаще всего это нужно тогда, когда вы формируете колонки для каких-либо элементов с изображениями.

Для свойства object-fit можно использовать такие значения:

Самыми используемыми являются первые 2 значения. Они похожи на значения для свойства background-size.

Значения свойства object-position предполагают, что вы можете смещать изображение внутри его контейнера аналогично тому, как с фоновыми картинками это делают с помощью свойства background-position.

Варианты значений свойства object-position:

Как правило, для изображения, которое подгоняется под размер контейнера (родительский элемент для тега <img>), задают 100% в виде ширины и высоты, для того чтобы картинка полностью заполняла контейнер:

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

В примере ниже можно посмотреть, как выглядят изображения внутри контейнера с применением свойств object-fit и object-position. Кстати, в нем также использованы 100% для свойств ширины и высоты тега img.

See the Pen object properties by Jordan (@DeyJordan) on CodePen.