Как любой элемент страницы, картинки добавляются с помощью специального тега. Для картинок это тег <img>, с помощью этого тега можно не только вставить картинку, но так же и отформатировать ее по ширине.
Основной синтаксис этого тега выглядит так:
<img src="путь к изображению" alt="альтернативный текст" height="высота изображения" width="ширина изображения" title="описание картинки">
src (путь к изображению) — это атрибут, который указывает место откуда нужно взять изображение, он может находится непосредственно на сервере или в папке, в таком случае он прописывается как src="/folder/img.png". Если же он находится на другом сайте, то к нему приписывается протокол и домен, выглядит это так src="https://example.com/folder/img.png".
alt (альтернативный текст) — это атрибут, который должен кратко и четко описать что изображено на картинке. Это важный атрибут, для индексирования в поиске и в случае если у пользователя не загружается картинка, оставлять его пустым не следует, однако если картинка, которую вы вставили не имеет никакой смысловой нагрузки или изображение уже подробно расписано окружающим текстом. Синтаксис выглядит так alt="Картинка с котиками".
title (описание картинки) — это необязательный атрибут, при наведении курсора на картинку, спустя какое-то время всплывет текст его описания, вместо альтернативного текста.
width и height — это атрибуты которые изменяют ширину и соответственно высоту изображения. По умолчанию размер указывается в пикселях, но его можно задать с помощью и других величин, например проценты. Синтаксис для них выглядит следующим образом width="800" height="70%".