В чем разница между использованием тега img и свойством background-image?

Разница между <img> и background-image

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

<img> тег

HTML элемент для вывода изображений.

<!-- Базовое использование -->
<img src="/images/hero.jpg" alt="Hero image">

<!-- С атрибутами -->
<img 
  src="/images/product.jpg"
  alt="Product description"
  width="200"
  height="150"
  loading="lazy"
>

Характеристики:

• Это реальный элемент в DOM
• Имеет размер по умолчанию (размер самого изображения)
• Читается скринридерами (важно для accessibility)
• Легко манипулировать CSS (transform, filter, etc)

/* Стилирование img */
img {
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: transform 0.3s;
}

img:hover {
  transform: scale(1.1);
}

/* Responsive */
img {
  max-width: 100%;
  height: auto;
}

background-image

CSS свойство для заполнения фона элемента.

/* Базовое использование */
.hero {
  background-image: url('/images/hero-bg.jpg');
  height: 400px; /* Нужно задать высоту! */
}

/* С параметрами */
.hero {
  background-image: url('/images/hero-bg.jpg');
  background-size: cover;    /* Заполнить весь контейнер */
  background-position: center; /* Отцентрировать */
  background-repeat: no-repeat; /* Не повторять */
  height: 400px;
}

Характеристики:

• Это фоновое оформление элемента
• Нет в DOM (это CSS, не HTML)
• Не читается скринридерами
• Требует явного задания размеров

Comparison Table

Практические примеры

Пример 1: Галерея (используй <img>)

<!-- Правильно -->
<div class="gallery">
  <img src="photo1.jpg" alt="Photo 1" class="gallery-item">
  <img src="photo2.jpg" alt="Photo 2" class="gallery-item">
  <img src="photo3.jpg" alt="Photo 3" class="gallery-item">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gallery-item {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery-item:hover {
  transform: scale(1.05);
}

// Легко обработать клик на изображение
const images = document.querySelectorAll('.gallery-item');
images.forEach(img => {
  img.addEventListener('click', () => {
    openModal(img.src);
  });
});

Пример 2: Hero section (используй background-image)

<!-- Правильно -->
<div class="hero">
  <h1>Welcome to our site</h1>
  <p>Best products ever</p>
  <button>Shop Now</button>
</div>

.hero {
  background-image: url('/images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax effect -->
  
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  
  /* Overlay для темноты -->
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

Пример 3: Product card (используй <img>)

<div class="product-card">
  <div class="product-image">
    <img 
      src="product-thumb.jpg" 
      alt="Nike Running Shoes"
      loading="lazy"
    >
  </div>
  <h3>Nike Running Shoes</h3>
  <p class="price">$120</p>
  <button>Add to Cart</button>
</div>

.product-image {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.product-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.1);
}

Пример 4: Texture/Pattern (используй background-image)

/* Повторяющийся паттерн как фон -->
.container {
  background-image: url('/images/pattern.png');
  background-repeat: repeat;
  background-size: 20px 20px;
  padding: 20px;
}

/* Или градиент с изображением -->
.special-section {
  background: 
    linear-gradient(45deg, rgba(255,0,0,0.1), rgba(0,0,255,0.1)),
    url('/images/texture.jpg');
  background-size: cover;
  padding: 40px;
}

Performance

<img> преимущества:

<!-- Браузер знает размер до загрузки (если указано) -->
<img src="photo.jpg" width="400" height="300">
<!-- Можно использовать srcset для Retina -->
<img 
  src="photo.jpg"
  srcset="photo-2x.jpg 2x"
  alt="Description"
>
<!-- Ленивая загрузка -->
<img src="photo.jpg" loading="lazy">

background-image преимущества:

/* Можно использовать media queries для разных фонов -->
@media (max-width: 768px) {
  .hero {
    background-image: url('/images/hero-mobile.jpg');
  }
}

@media (min-width: 1920px) {
  .hero {
    background-image: url('/images/hero-4k.jpg');
  }
}

Accessibility

<img> доступнее:

<!-- Скринридер прочитает alt text -->
<img src="logo.png" alt="Company logo">

<!-- Плохо (не описано для слепых) -->
<img src="logo.png" alt="image">

<!-- Для декоративных изображений -->
<img src="decoration.png" alt="" aria-hidden="true">

background-image менее доступен:

/* Скринридер не видит это изображение -->
.button {
  background-image: url('/icons/play.svg');
  width: 50px;
  height: 50px;
}

/* Нужно добавить aria-label -->
<button aria-label="Play video"></button>

/* Или использовать content -->
.button::before {
  content: 'ᐳ'; /* Символ play -->
}

SEO

<img> лучше для SEO:

<!-- Гугл индексирует изображения -->
<img src="product.jpg" alt="Red Nike Shoes Size 10">
<!-- Alt text важен для поиска по картинкам -->

background-image хуже:

/* Гугл может не индексировать background-image -->
.hero {
  background-image: url('/hero.jpg');
}

Выводы

Используй <img> когда:

• Изображение — контент (фото, икона, логотип)
• Нужна доступность (alt text для слепых)
• Нужна ленивая загрузка
• Нужен srcset для Retina
• Нужно обработать события мыши

Используй background-image когда:

• Это декоративный фон
• Нужна сложная укладка (gradient, overlay)
• Нужны media queries для разных фонов
• Нужен parallax effect
• Это текстура или паттерн

Правило

Семантично: Если изображение имеет значение для контента → <img>. Если это просто оформление → background-image.

<!-- Content image -->
<article>
  <img src="main-photo.jpg" alt="Article thumbnail">
  <h2>Article Title</h2>
  <p>Content...</p>
</article>

<!-- Background decoration -->
<div class="hero" style="background-image: url(/bg.jpg)">
  <h1>Headline</h1>
</div>