Вставка изображений в HTML

Картинки — важная часть веба. Они делают сайты визуально выразительными, помогают передать смысл, иллюстрируют текст и даже играют функциональную роль (например, иконки или изображения товаров). И у HTML есть сразу несколько способов вставки изображений.

Самый очевидный способ вставить изображение — использовать тег <img>:

        
          
          <img  src="kotik.webp"  alt="Кот по кличке Комaру с белой грудкой и серо-чёрными полосками  на теле в очках с жёлтыми линзами смотрит прямо в камеру">
          <img
  src="kotik.webp"
  alt="Кот по кличке Комaру с белой грудкой и серо-чёрными полосками
  на теле в очках с жёлтыми линзами смотрит прямо в камеру"
>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Если нужно подгружать разные изображения в зависимости от устройства или использовать адаптивные форматы, пригодится тег <picture>:

        
          
          <picture>  <source srcset="cat.webp" type="image/webp">  <source srcset="cat.jpg" type="image/jpeg">  <img    src="cat.jpg"    alt="Белый котик смотрит в окно,    на фоне коричневый котик тоже смотрит в окно"  ></picture>
          <picture>
  <source srcset="cat.webp" type="image/webp">
  <source srcset="cat.jpg" type="image/jpeg">
  <img
    src="cat.jpg"
    alt="Белый котик смотрит в окно,
    на фоне коричневый котик тоже смотрит в окно"
  >
</picture>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

<picture> позволяет указать несколько версий изображения. Браузер сам выберет подходящее по поддерживаемому формату.

Изображения можно использовать как фоновые с помощью background-image:

        
          
          .container {  background-image: url("kotik.jpg");}
          .container {
  background-image: url("kotik.jpg");
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Эти способы используются редко, но они позволяют встроить интерактивный SVG или даже PDF:

        
          
          <object data="chart.svg" type="image/svg+xml"></object>
          <object data="chart.svg" type="image/svg+xml"></object>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <embed src="diagram.svg" type="image/svg+xml">
          <embed src="diagram.svg" type="image/svg+xml">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Обычно <img> и <picture> предпочтительнее.

Это уже не просто картинка, а полноценный рисовальный холст:

        
          
          <canvas id="myCanvas" width="259" height="194"></canvas>
          <canvas id="myCanvas" width="259" height="194"></canvas>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На нём можно «рисовать» изображения с помощью JavaScript:

        
          
          const canvas = document.getElementById('myCanvas')const ctx = canvas.getContext('2d')const img = new Image()img.src = 'cat.jpg'img.onload = () => ctx.drawImage(img, 0, 0)
          const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.src = 'cat.jpg'
img.onload = () => ctx.drawImage(img, 0, 0)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

<canvas> используется в играх, графиках, анимации.

• <img> — почти всегда подходит, если нужно просто вставить картинку.
• <picture> — для адаптивности, ретина-дисплеев, .webp и .avif.
• <object> и <embed> — когда нужно вставить PDF или интерактивные медиа.
• <canvas> — когда изображение нужно рисовать динамически.

На практике

Скопировать ссылку "На практике" Скопировано

DrakesWeb советует

Скопировать ссылку "DrakesWeb советует" Скопировано

🛠 В своих проектах я часто использую комбинацию <img> для смысловых изображений, <picture> если нужна адаптивность, а background-image для иконок и фонов.

🛠 Когда работал с электронной библиотекой, использовал <picture> для обложек книг: WebP — по умолчанию, JPEG — как запасной вариант. Это экономило трафик и ускоряло загрузку страниц на мобильных.