Вы здесь: Главная » HTML » Изображения на html-странице

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

Атрибуты тега <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.

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

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

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

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


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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *