Как в CSS реализовать поддержку разных форматов изображений?

Поддержка разных форматов изображений в CSS

Использование правильных форматов изображений критически важно для производительности веб-приложения. Разные браузеры и устройства поддерживают разные форматы, поэтому нужно предусмотреть fallback'и.

Основные форматы изображений

1. JPEG (.jpg, .jpeg)

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

• Сжатие: lossy (с потерей качества)
• Поддержка: все браузеры
• Размер файла: маленький
• Лучше всего для: фотографии

.image {
  background-image: url('photo.jpg');
}

2. PNG (.png)

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

• Сжатие: lossless (без потерь)
• Поддержка: все браузеры
• Размер файла: больше чем JPEG
• Лучше всего для: изображения с прозрачностью, графика

.logo {
  background-image: url('logo.png');
}

3. WebP (.webp)

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

• Сжатие: lossy + lossless
• Поддержка: 95% современных браузеров
• Размер файла: меньше чем JPEG и PNG (25-35%)
• Лучше всего для: все типы изображений (когда браузер поддерживает)

.image {
  /* WebP для современных браузеров */
  background-image: url('image.webp');
}

4. AVIF (.avif)

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

• Сжатие: lossy + lossless
• Поддержка: Chrome, Firefox, Safari 16+
• Размер файла: ещё меньше чем WebP (20% меньше)
• Лучше всего для: будущее веб-разработки

.image {
  background-image: url('image.avif');
}

5. SVG (.svg)

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

• Векторный формат
• Поддержка: все браузеры
• Масштабируется без потери качества
• Лучше всего для: логотипы, иконки, графика

.icon {
  background-image: url('icon.svg');
  background-size: 24px 24px;
}

Поддержка форматов в CSS

1. Простой fallback

.image {
  background-image: url('image.jpg');
}

Это самый базовый способ, но без fallback'а на другие форматы.

2. Множественные background-image

/* Не рекомендуется — загружаются оба изображения */
.image {
  background-image: url('image.webp'), url('image.jpg');
}

Проблема: браузер загружает оба файла, даже если поддерживает WebP.

3. @supports правило (правильный способ)

/* Сначала самый старый формат */
.image {
  background-image: url('image.jpg');
}

/* Затем улучшенные форматы */
@supports (background-image: url('image.webp')) {
  .image {
    background-image: url('image.webp');
  }
}

@supports (background-image: url('image.avif')) {
  .image {
    background-image: url('image.avif');
  }
}

Как это работает:

1. По умолчанию загружается JPEG
2. Если браузер поддерживает WebP — загружается WebP вместо JPEG
3. Если браузер поддерживает AVIF — загружается AVIF вместо WebP

4. Picture элемент (рекомендуется)

Для <img> элементов используй <picture>:

<!-- Этот способ загружает ТОЛЬКО нужный формат -->
<picture>
  <!-- Для браузеров с поддержкой AVIF -->
  <source srcset="image.avif" type="image/avif">
  
  <!-- Для браузеров с поддержкой WebP -->
  <source srcset="image.webp" type="image/webp">
  
  <!-- Fallback для старых браузеров -->
  <img src="image.jpg" alt="Image">
</picture>

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

• Загружается только один формат
• Явная поддержка для каждого браузера
• Работает для <img>, не для background-image

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

Пример 1: Background image с поддержкой форматов

.hero-banner {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  
  /* Fallback для старых браузеров */
  background-image: url('banner.jpg');
}

/* WebP для современных браузеров */
@supports (background-image: url('banner.webp')) {
  .hero-banner {
    background-image: url('banner.webp');
  }
}

/* AVIF для самых современных браузеров */
@supports (background-image: url('banner.avif')) {
  .hero-banner {
    background-image: url('banner.avif');
  }
}

Пример 2: Разные размеры изображений (srcset)

<!-- Мобилка: маленькое изображение, десктоп: большое -->
<picture>
  <!-- Mobile WebP -->
  <source
    srcset="image-480.webp 480w, image-768.webp 768w"
    type="image/webp"
    media="(max-width: 768px)"
  >
  
  <!-- Desktop WebP -->
  <source
    srcset="image-1024.webp 1024w, image-1200.webp 1200w"
    type="image/webp"
  >
  
  <!-- Mobile JPEG fallback -->
  <source
    srcset="image-480.jpg 480w, image-768.jpg 768w"
    media="(max-width: 768px)"
  >
  
  <!-- Desktop JPEG fallback -->
  <img
    srcset="image-1024.jpg 1024w, image-1200.jpg 1200w"
    sizes="(max-width: 768px) 100vw, 1200px"
    src="image-1200.jpg"
    alt="Image"
  >
</picture>

Пример 3: Логотип с поддержкой SVG

<!-- Для логотипов используй SVG, с PNG fallback -->
<picture>
  <source srcset="logo.svg" type="image/svg+xml">
  <img src="logo.png" alt="Logo">
</picture>

<!-- Или в CSS -->
<style>
  .logo {
    background-image: url('logo.svg');
  }
  
  @supports not (background-image: url('logo.svg')) {
    .logo {
      background-image: url('logo.png');
    }
  }
</style>

Пример 4: Оптимизация для мобильных Retina

<!-- Разные изображения для обычных и Retina экранов -->
<img
  src="image.jpg"
  srcset="image.jpg 1x, image@2x.jpg 2x"
  alt="Image"
>

<!-- С WebP поддержкой -->
<picture>
  <!-- WebP для обычного экрана -->
  <source
    srcset="image.webp 1x, image@2x.webp 2x"
    type="image/webp"
  >
  
  <!-- JPEG fallback -->
  <img
    srcset="image.jpg 1x, image@2x.jpg 2x"
    src="image.jpg"
    alt="Image"
  >
</picture>

Проверка поддержки браузером

// JavaScript для проверки поддержки форматов

// Проверка WebP
function supportsWebP() {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = 1;
  return canvas.toDataURL('image/webp').indexOf('webp') === 5;
}

// Проверка AVIF
function supportsAVIF() {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = 1;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 1, 1);
  
  return new Promise((resolve) => {
    canvas.toBlob(
      (blob) => resolve(blob?.type === 'image/avif'),
      'image/avif'
    );
  });
}

// Использование
if (supportsWebP()) {
  document.body.classList.add('webp-support');
}

// Для AVIF нужна асинхронная проверка
await supportsAVIF().then((supports) => {
  if (supports) {
    document.body.classList.add('avif-support');
  }
});

// Потом в CSS
.body.webp-support .image {
  background-image: url('image.webp');
}

Оптимизация размеров файлов

// Примерные размеры одного изображения 1200x600:
// - JPEG: 150 KB
// - PNG: 300 KB
// - WebP: 100 KB (33% меньше)
// - AVIF: 80 KB (47% меньше)

// Экономия: WebP может сэкономить мегабайты на странице
// AVIF может дополнительно сэкономить 15-25%

Автоматизация с Next.js

// Next.js Image компонент автоматически оптимизирует изображения

import Image from 'next/image';

export default function MyImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Image"
      width={1200}
      height={600}
      // Next.js автоматически создаёт WebP и AVIF версии
      // Серверно-генерируемые форматы
    />
  );
}

Инструменты для конвертации

# ImageMagick
convert image.jpg image.webp
convert image.jpg image.avif

# FFmpeg
ffmpeg -i image.jpg -c:v libaom-av1 -crf 30 image.avif

# Online tools
# - cloudconvert.com
# - online-convert.com
# - squoosh.app (от Google)

Таблица поддержки браузерами

Best Practices

/* 1. Всегда начинай с самого совместимого формата */
.image {
  background-image: url('image.jpg');
}

/* 2. Добавляй улучшенные форматы через @supports */
@supports (background-image: url('image.webp')) {
  .image {
    background-image: url('image.webp');
  }
}

/* 3. Для <img> используй <picture> элемент */
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="">
</picture>

/* 4. Оптимизируй размеры файлов */
/* WebP: 60-80% от JPEG размера */
/* AVIF: 20-30% меньше чем WebP */

/* 5. Используй srcset для разных разрешений */
<img srcset="image-400.jpg 400w, image-800.jpg 800w">

Вывод

Поддержка разных форматов изображений в CSS и HTML реализуется через:

1. @supports — для background-image в CSS
2. <picture> элемент — для <img> в HTML
3. srcset — для разных разрешений
4. Fallback'и — для старых браузеров

Использование правильных форматов может уменьшить размер файлов на 30-50%, что значительно улучшает производительность и скорость загрузки страницы.