День 29 | Работа с изображениями

Форматы изображений

Разные форматы изображений подходят для разных задач:

JPG (JPEG)

Когда использовать: Фотографии, изображения с множеством цветов

• ✅ Хорошее сжатие
• ✅ Поддержка миллионов цветов
• ❌ Не поддерживает прозрачность
• ❌ Потеря качества при сжатии

PNG

Когда использовать: Логотипы, иконки, изображения с прозрачностью

• ✅ Поддерживает прозрачность
• ✅ Без потери качества
• ❌ Большой размер файла

SVG

Когда использовать: Иконки, логотипы, простые иллюстрации

• ✅ Векторный формат (масштабируется без потери качества)
• ✅ Маленький размер
• ✅ Можно редактировать в коде
• ❌ Не подходит для фотографий

WebP

Когда использовать: Современная альтернатива JPG/PNG

• ✅ Лучшее сжатие, чем JPG/PNG (на 25-35% меньше)
• ✅ Поддерживает прозрачность
• ✅ Хорошая поддержка браузерами (Chrome, Firefox, Safari 14+)
• ❌ Нужен fallback для старых браузеров

AVIF (самый современный)

Когда использовать: Самый современный формат (2024-2026)

• ✅ Ещё лучшее сжатие, чем WebP (на 50% меньше JPG)
• ✅ Поддерживает прозрачность
• ✅ Отличное качество при меньшем размере
• ❌ Поддержка меньше, чем WebP (Chrome 85+, Firefox 93+, Safari 16+)
• ❌ Обязательно нужен fallback

Рекомендация: Используйте AVIF с fallback на WebP, затем JPG/PNG.

Оптимизация изображений

Большие изображения замедляют загрузку сайта. Важно оптимизировать их:

Способы оптимизации:

1. Сжатие — уменьшить размер файла без сильной потери качества
   • Инструменты: TinyPNG, ImageOptim, Squoosh
   • Цель: баланс между качеством и размером
2. Правильный размер — не загружать изображение 2000px для блока 300px
   • Подготавливайте изображения нужного размера
   • Используйте CSS для изменения размера только если нужно
3. Правильный формат — выбирайте подходящий формат для задачи

Responsive images (адаптивные изображения)

На разных устройствах нужны изображения разных размеров. Для этого используют srcset и sizes:

<img 
  src="image-small.jpg"
  srcset="image-small.jpg 400w,
          image-medium.jpg 800w,
          image-large.jpg 1200w"
  sizes="(max-width: 768px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  alt="Описание изображения"
>

Разберём:

• src — изображение по умолчанию (для старых браузеров)
• srcset — список изображений с их шириной
  • 400w — ширина изображения 400px
• sizes — размер изображения на экране
  • На экранах до 768px — 100% ширины viewport
  • На экранах до 1024px — 50% ширины viewport
  • На больших экранах — 33% ширины viewport

Браузер выберет подходящее изображение автоматически!

Picture элемент

Для более сложных случаев (разные форматы, арт-дирекшн) используют <picture>:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание">
</picture>

Браузер выберет первый поддерживаемый формат. Порядок важен — от самого современного к самому старому.

Picture с responsive images

<picture>
  <source 
    media="(min-width: 1024px)"
    srcset="image-large.avif" type="image/avif">
  <source 
    media="(min-width: 768px)"
    srcset="image-medium.avif" type="image/avif">
  <source srcset="image-small.avif" type="image/avif">
  <img src="image-small.jpg" alt="Описание">
</picture>

Комбинирует разные форматы и размеры для оптимальной загрузки.

aspect-ratio (соотношение сторон)

aspect-ratio — это современное CSS свойство, которое задаёт соотношение сторон элемента. Это стандарт 2021+!

.image-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* Ширина к высоте */
  /* или */
  aspect-ratio: 1; /* Квадрат (1:1) */
  /* или */
  aspect-ratio: 4 / 3; /* 4:3 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

• ✅ Резервирует место до загрузки изображения (уменьшает CLS)
• ✅ Не нужно указывать height вручную
• ✅ Автоматически адаптируется к ширине

object-fit и object-position

Когда нужно, чтобы изображение заполняло контейнер определённым образом:

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Заполняет контейнер, сохраняя пропорции */
  object-position: center; /* Позиционирование */
}

Значения object-fit:

• cover — заполняет контейнер, может обрезаться
• contain — помещается целиком, могут быть пустые области
• fill — растягивает на весь контейнер (может исказиться)
• none — оригинальный размер

Lazy loading (ленивая загрузка)

Изображения загружаются только когда пользователь прокрутил до них. Это ускоряет первоначальную загрузку страницы.

<img src="image.jpg" alt="Описание" loading="lazy">

Браузер загрузит изображение, когда оно появится в viewport (видимой области).

Blur placeholder (размытый placeholder)

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

<img 
  src="image.jpg"
  srcset="image-small.jpg 400w, image-large.jpg 1200w"
  loading="lazy"
  style="background-image: url('image-blur.jpg'); background-size: cover;"
  alt="Описание"
>

Или используйте специальные библиотеки для создания blur placeholder из base64.

Атрибут alt

Всегда указывайте alt! Это важно для:

• Доступности (скринридеры для слепых)
• SEO (поисковые системы)
• Отображения, если изображение не загрузилось

<img src="cat.jpg" alt="Рыжий кот сидит на подоконнике">

Alt должен описывать содержимое изображения, а не быть просто "изображение" или "картинка".

Практическое задание

1. Оптимизируйте изображения для вашего сайта (сожмите, выберите правильный формат)
2. Создайте responsive изображение с srcset
3. Используйте object-fit для карточек с изображениями
4. Добавьте lazy loading к изображениям ниже первого экрана
5. Убедитесь, что у всех изображений есть alt

Что дальше?

Отлично! Теперь вы знаете, как работать с изображениями. В следующем уроке мы верстаем footer (подвал сайта).