Для вставки изображения в веб-страницу используется одинарный тег <img> вместе с рядом атрибутов.
Обязательные атрибуты тега <img>
Атрибут src является обязательным, так как он указывает путь к изображению. Значением атрибута src может быть как имя файла, так и его URL.
<img src="example.jpg">
или
<img src="https://www.example.com/images/example.jpg">Атрибут alt также является обязательным для тега <img>. Его значением является поясняющий текст, который показывается в браузере до загрузки изображения. Браузер также показывает этот текст при наведении мыши на изображение.
Синтаксис тега <img> с обязательными атрибутами src и alt будет выглядеть так:
<img src="https://ru.w3docs.com/" alt="Самоучитель HTML">Мы рекомендуем использовать атрибут alt и включать в альтернативный текст ключевые слова. Это позволит улучшить ранжирование веб-сайта в поисковых системах.
Рекомендуемые атрибуты тега <img>
С тегом <img> рекомендуется использовать атрибуты width и height, которые определяют ширину и высоту изображения соответственно. Браузер сначала загружает текст на странице, а потом уже изображения. Когда указана высота и ширина изображения, браузер резервирует место для изображения (на странице мы видим пустой квадрат). Если же эти параметры не указаны, то браузер не будет знать размеры изображения и покажет маленький квадратик. После того, как изображение загрузится, это приведет к перемещению текста и других объектов на странице, что скажется на скорости загрузки сайта и приведет к неудобствам.
<img src="https://ru.w3docs.com/" alt="HTML tutorial" width=”200” height=”120”>Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Место для заголовка</h1>
<p>Это фото малыша</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Результат
Обтекание изображения текстом
Положение изображения относительно текста можно регулировать при помощи CSS свойства float.
Для того, чтобы разместить изображение слева, а текст справа, необходимо добавить к тегу <img> style="float:left".
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Место для заголовка </h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Это фото малыша</p>
</body>
</html>Результат
Если добавить style="float:right" к тегу <img>, то текст будет размещен слева, а изображение справа.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Место для заголовка</h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Это фото малыша</p>
</body>
</html>Результат
Как добавить к изображению гиперссылку.
В предыдущей главе мы узнали, как использовать элемент <a> для добавления гиперссылок. Если вы хотите сделать изображение кликабельным, то его необходимо поместить в тег <a>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<a href="https://ru.w3docs.com/" aria-label="w3docs homepage">
<img src="/uploads/media/default/0001/01/910a300bcc9d9885ea035805ac6cac5d719bc43e.jpeg" alt="logo" width="200" height="150"/>
</a>
</body>
</html>Результат
Давайте посмотрим, как это работает. Кликните на картинку внизу, и вы будете перенаправлены на домашнюю страницу нашего сайта.
Форматы изображений
На веб-сайтах обычно используются цифровые изображения трех форматов:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Формат GIF поддерживает только 256 уникальных цветов. Для получения остальных оттенков соседние пиксели смешиваются так, чтобы человеческим глазом они воспринимались как нужный цвет. Именно поэтому этот формат не подходит для полноцветных фотографий. Его используют для создания простых изображений (диаграммы, кнопки, простая графика и т.д. ), которые быстро загружаются и не тормозят сайт.
Формат JPEG поддерживает более 16 миллионов цветов. Он подходит для сжатия и хранения полноцветных фотографий, однако при сжатии теряется их качество. Главное при работе с этим форматом - найти баланс между уровнем качества и оптимальным весом изображений.
Формат PNG сочетает преимущества форматов JPEG и GIF. Он поддерживает миллионы цветов и позволяет сжимать изображения без потери качества. Этот формат подходит для сохранения изображений, где требуется предельная четкость (чертежи, графики, сложные диаграммы и т.д.)
Современные форматы
Кроме классических форматов изображений существуют современные форматы, которые постепенно завоевывают популярность.
Разработанный Google формат WebP приходит на смену JPEG: при такой же степени сжатия он обеспечивает лучшее качество.
Еще один формат, который превосходит классический JPEG в сохранении лучшего качества при том же уровне сжатия, BPG (Better Portable Graphics).
Apple в 11-ой версии iOS вместо JPEG использует формат HEIC, который позволяет сохранять изображения высокого качества, которые при этом не занимают много места.
Практикуйте свои знания
