Как вставить картинку в HTML?

В HTML-разметке картинки добавляют с помощью специального тега <img>. У него есть специальные атрибуты, при помощи которых можно описать, как должна выглядеть картинка на сайте. В статье объясню, как вставить картинку в HTML и правильно всё оформить в коде.

Как добавить изображение в HTML

Чтобы вставить картинку в HTML, необходимо в код страницы добавить тег <img> с нужным содержанием. Вот как это выглядит:

Тег <img> (от англ. image) предназначен для отображения на веб-странице визуальных элементов в графическом формате GIF, PNG, JPEG, SVG, WebP.

Есть два основных атрибута, которые относятся к тегу <img>:

• src — указывает путь к картинке (об этом — ниже);
• alt — содержит текстовое описание.

Атрибут alt — это альтернативный текст, который отображается на странице в случае проблемы с загрузкой изображений. Поисковики считывают alt для лучшего понимания контекста, поэтому рекомендую его заполнять — хотя это и необязательный атрибут. Благодаря альтернативному тексту изображения индексируются и могут попасть в Google Images и Яндекс Картинки.

Вот так выглядит синтаксис строки для добавления картинки в HTML:

<img src=»адрес изображения» alt=»описание изображения»>

Тег <img> со всем его содержанием необходимо добавить в ту часть HTML-кода, где должна находиться картинка.

Например, добавим в пример кода ссылку на изображение с Pixabay и подходящее описание. Тег <img> добавим сразу под заголовком. HTML-код получится таким:

А теперь посмотрим, как будет выглядеть эта же HTML-страница в веб-формате. Картинка отображается точно под заголовком, как и было запланировано.

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

Где хранить картинки для сайта и как правильно прописать путь к изображению в HTML

Есть разные варианты хранения изображений для сайта. Расскажу о некоторых нюансах указания адреса в теге <img>.

На своём сайте

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

Если изображения хранятся в корневой папке вместе с основным HTML-файлом, вы можете указать их имена в атрибуте src тега <img> без указания пути к папке. Структура файлов и папок выглядит так:

— index.html

— image.jpg

Вот пример кода в такой ситуации:

В этом примере изображение image.jpg находится в той же папке, что и файл index.html. Поэтому, для вставки, нам не нужно указывать путь к папке. Достаточно указать только имя файла изображения в атрибуте src.

Если изображения хранятся в отдельной папке/каталоге, то нужно указать путь к этой папке в атрибуте src тега <img>. В этом случае структура файлов и папок будет такой:

— index.html

— images/

   — image.jpg

Добавление изображения будет выглядеть так:

В этом примере изображение image.jpg хранится в папке images. Поэтому мы указываем путь к папке и имя файла в атрибуте src тега <img>. Здесь используется относительный путь, так как изображение находится в отдельной папке в том же каталоге, что и файл index.html.

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

На сторонних ресурсах

Если на собственном хостинге мало места для хранения визуальных элементов, то их можно сохранять на сторонних ресурсах. Например:

Бесплатные сервисы хостинга изображений (Google Photos, Wix, Imgur, ImgBox). Главный риск в этом случае — возможность потери файлов по причинам, которые от вас не зависят. К примеру, сервис прекратит существование или удалит часть материалов.

Платные веб-хостинги (Photobucket, Imgvision). В этом случае гарантия сохранности возрастает, но возникают дополнительные расходы.

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

Когда изображение хранится на стороннем ресурсе, его вставка в HTML будет выглядеть так:

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

Дополнительные атрибуты тега <img>

Кроме основных атрибутов src и alt, тег <img> в HTML поддерживает дополнительные атрибуты. Они позволяют настраивать отображение и поведение визуала. Перечислю некоторые из них.

Ширина и высота: width и height

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

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

Вот как выглядит строка кода с указанием ширины и высоты:

<img src=»адрес изображения» alt=»описание изображения» width=»значение» height=»значение»>

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

Загрузка: loading

Атрибут loading позволяет регулировать загрузку. По умолчанию, когда браузер читает HTML-код страницы, то автоматически ставит в загрузку все найденные изображения. Но если картинок на странице слишком много, то страница будет загружаться медленнее.

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

• eager — немедленно, то есть, как и задумано по умолчанию;
• lazy — лениво, т.е. медленно — картинка загрузится тогда, когда пользователь дойдёт до неё на странице.

Пример использования кода выглядит так:

<img src=»адрес изображения» alt=»описание изображения» loading=»lazy»> 

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

Декодирование: decoding

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

Значения, которые можно задать атрибутом decoding:

• sync — декодировать синхронно для одновременного отображения с другим контентом;
• async — декодировать асинхронно, чтобы уменьшить задержку отображения другого контента;
• auto — режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования.

Пример применения атрибута decoding в теге <img> будет выглядеть так:

<img src=»адрес изображения» decoding=»async» alt=»Описание картинки»>

Как превратить добавленное изображение в ссылку

Изображение на сайте можно сделать кликабельным. При этом можно указать ссылку на любую страницу или внешний ресурс. Чтобы превратить картинку в гиперссылку, нужно вставить тег <img> внутрь открывающего и закрывающего тегов <a>. Также необходимо изменить альтернативный текст, чтобы он описывал назначение ссылки.

Вот так выглядит пример строки кода для картинки-ссылки:

<a href=»ссылка на страницу»>

   <img src=»адрес изображения» alt=»описание изображения»>

</a>

В этом случае, когда пользователь кликнет на картинку, он будет перенаправлен по ссылке, указанной в атрибуте href тега <a>.

Как попрактиковаться во вставке картинок в HTML

Чтобы проверить на практике, как работает тег <img>, не обязательно править код реального сайта. Поучиться можно с помощью онлайн-редакторов HTML.

Например, в HTMLed.it можно добавить любой текст — и сервис преобразует его в HTML-код.

Если добавить в полученный код заполненный тег <img>, то в левом окошке с текстом появится картинка. Попробую добавить изображение. Дополнительно укажу width, чтобы пропорционально уменьшить картинку. И вот что получилось:

По похожему принципу работают и другие онлайн-редакторы HTML-кода. С их помощью можно тренироваться в вёрстке и добавлении изображений с помощью тега <img>. Синтаксис тега достаточно прост и понятен — поэтому вставить картинку в HTML с его помощью сможет даже новичок без опыта в разработке.