Как в разметке будешь загружать картинку?

Загрузка изображений в разметке: лучшие практики

Этот вопрос проверяет знание HTML, оптимизации производительности и best practices современного веб-развития. Есть несколько подходов, и каждый имеет свои применение.

1. Базовый тег img

Это самый простой и универсальный способ:

<img src="/images/profile.jpg" alt="User profile picture" />

Когда использовать:

• Для базовых изображений
• Когда размер известен
• Для контентных изображений

Проблемы:

• Нет оптимизации разных размеров под разные экраны
• Нет поддержки современных форматов
• Может быть медленно на мобильных

2. Отзывчивые изображения с srcset

Для адаптации под разные размеры экрана:

<img 
  src="/images/profile-medium.jpg"
  srcset="
    /images/profile-small.jpg 480w,
    /images/profile-medium.jpg 768w,
    /images/profile-large.jpg 1200w
  "
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="User profile picture"
/>

Что это делает:

• На мобиле (480px) загружает маленькую версию
• На планшете (768px) загружает среднюю
• На десктопе (1200px+) загружает большую
• sizes подсказывает браузеру, какой размер нужен

Преимущества:

• Оптимизация трафика
• Быстрая загрузка на мобильных
• Один тег img

3. Picture element для полного контроля

Для максимальной гибкости и поддержки разных форматов:

<picture>
  <!-- Современные браузеры получат WEBP (меньший размер) -->
  <source type="image/webp" srcset="/images/profile.webp">
  
  <!-- Поддержка разных размеров -->
  <source 
    srcset="
      /images/profile-small.jpg 480w,
      /images/profile-medium.jpg 768w,
      /images/profile-large.jpg 1200w
    "
  >
  
  <!-- Fallback для старых браузеров -->
  <img src="/images/profile-medium.jpg" alt="User profile picture" />
</picture>

Когда использовать:

• Для критичных изображений
• Когда нужна оптимизация форматов
• Для art direction (разные изображения на разных размерах)

Пример art direction:

<picture>
  <!-- На мобиле показать портретную версию -->
  <source media="(max-width: 480px)" srcset="/images/hero-portrait.jpg">
  
  <!-- На десктопе показать широкую версию -->
  <source media="(min-width: 768px)" srcset="/images/hero-landscape.jpg">
  
  <!-- Fallback -->
  <img src="/images/hero.jpg" alt="Hero banner" />
</picture>

4. Next.js Image (для React)

Если вы используете Next.js, есть специальный компонент:

import Image from 'next/image';

export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      alt="User profile"
      width={400}
      height={300}
      priority  // Загружать с высоким приоритетом (для LCP)
      quality={80}  // Сжать до 80% качества
    />
  );
}

Преимущества:

• Автоматическая оптимизация
• Поддержка WEBP автоматически
• Lazy loading по умолчанию
• Предотвращение Cumulative Layout Shift (CLS)

5. Lazy loading для производительности

Native lazy loading:

<img 
  src="/images/profile.jpg" 
  alt="User profile"
  loading="lazy"  <!-- Загружать только когда видно в viewport -->
/>

Поддерживается всеми современными браузерами - это лучший выбор для изображений ниже сгиба.

JavaScript lazy loading (для старых браузеров):

const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
});

images.forEach(img => imageObserver.observe(img));

<!-- Используется -->
<img data-src="/images/profile.jpg" alt="User profile" />

6. Web Vitals и оптимизация

Для хорошей производительности следите за:

// LCP (Largest Contentful Paint) - главное изображение должно загружаться быстро
<img 
  src="/hero.jpg" 
  alt="Hero"
  width="1200"
  height="600"
  fetchpriority="high"  // Загружать с высоким приоритетом
/>

// CLS (Cumulative Layout Shift) - всегда указывайте размеры
<img 
  src="/profile.jpg"
  alt="Profile"
  width="400"  // ОБЯЗАТЕЛЬНО!
  height="300" // ОБЯЗАТЕЛЬНО!
/>

// INP (Interaction to Next Paint) - lazy load изображения ниже сгиба
<img 
  src="/card.jpg"
  alt="Card"
  loading="lazy"
/>

7. Практический пример: Реальная система

<!-- Hero изображение - критичное, загружать с высоким приоритетом -->
<picture>
  <source 
    type="image/webp"
    srcset="/images/hero-small.webp 480w, /images/hero-medium.webp 768w, /images/hero-large.webp 1200w"
    sizes="100vw"
  >
  <img
    src="/images/hero-large.jpg"
    alt="Hero banner"
    width="1200"
    height="400"
    fetchpriority="high"
  />
</picture>

<!-- Изображение карточки продукта - ниже сгиба, lazy load -->
<img
  src="/images/product.jpg"
  alt="Product image"
  width="300"
  height="300"
  loading="lazy"
/>

<!-- Иконка - очень маленькая, можно inline -->
<img
  src="data:image/svg+xml,..."
  alt="Star icon"
  width="20"
  height="20"
/>

8. Форматы файлов

JPEG - для фотографий:

<img src="/photo.jpg" alt="Photo" />

PNG - для графики с прозрачностью:

<img src="/logo.png" alt="Logo" />

WEBP - современный формат, меньше размер:

<picture>
  <source type="image/webp" srcset="/image.webp">
  <img src="/image.jpg" alt="Image" />
</picture>

SVG - для иконок и логотипов:

<img src="/icon.svg" alt="Icon" />

9. Доступность (Accessibility)

ВАЖНО: Всегда добавляйте alt текст!

<!-- Плохо - нет alt -->
<img src="/profile.jpg" />

<!-- Хорошо - описательный alt -->
<img 
  src="/profile.jpg" 
  alt="John Smith, Frontend Developer"
/>

<!-- Для декоративных изображений - пустой alt -->
<img src="/decoration.jpg" alt="" />

Полная рекомендация для production

<picture>
  <source 
    type="image/webp"
    srcset="
      /images/image-small.webp 480w,
      /images/image-medium.webp 768w,
      /images/image-large.webp 1200w
    "
    sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  />
  <img
    src="/images/image-large.jpg"
    srcset="
      /images/image-small.jpg 480w,
      /images/image-medium.jpg 768w,
      /images/image-large.jpg 1200w"
    sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
    alt="Descriptive text about image"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>

Вывод

Выбор способа загрузки изображения зависит от контекста:

• Простое img - для базовых случаев
• srcset - для адаптации под размеры
• picture - для полного контроля
• Next.js Image - для React проектов
• Lazy loading - для производительности
• Всегда указывайте alt, width и height