PrepBro
← Назад к вопросам

Как выбираешь формат изображений?

1.2 Junior🔥 121 комментариев
#Оптимизация и производительность

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Выбор формата изображений для веба

Выбор формата — критичный для производительности. Неправильный формат может увеличить размер на 50-200%. Я выбираю на основе типа контента и требований к браузерам.

Форматы и их характеристики

ФорматРазмерКачествоПрозрачностьАнимацияБраузерыЛучше всего для
JPEGСреднийХорошееНетНетВсеФотографии
PNGБольшойОтличноеДаНетВсеЛоготипы, иконки
WebPМалыйОтличноеДаДа94%Всё (если есть fallback)
AVIFСамый малыйОтличноеДаДа60%Будущее (с fallback)
SVGВекторМасштабируетсяДаДаВсеИконки, логотипы, диаграммы
GIFБольшойСлабоеДаДаВсеАнимации (устарел)

Мой алгоритм выбора

1. Это иконка или логотип?

Да → SVG (если можно сделать вектор)
   → PNG (если растр)
   → Готово

Нет → перейти к шагу 2

Почему SVG для иконок:

  • Масштабируется без потери качества
  • Меньше всего код для простых иконок
  • Легко менять цвет через CSS
<!-- SVG иконка с CSS трансформацией -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path d="M12 2L15.09 8.26H22L17.17 12.88L19.34 19.12L12 14.46L4.66 19.12L6.83 12.88L2 8.26H8.91L12 2Z" />
</svg>

<style>
  svg { color: blue; }
  svg:hover { color: red; }
</style>

2. Это фотография или фото-реалистичное изображение?

Да → JPEG (старые браузеры)
   → Или WebP с JPEG fallback (хорошо)
   → Или AVIF с WebP fallback (лучше всего)
   → Готово

Нет → перейти к шагу 3

Сравнение фотографии в разных форматах:

Оригинал: 2000x1300px, Качество High

JPEG (quality 80):   385 KB
WebP (quality 80):   214 KB (-44%)
AVIF (quality 65):   156 KB (-59%)

Код с fallback:

<!-- Современный браузер выберет AVIF, старый — JPEG -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Описание" width="2000" height="1300">
</picture>

3. Нужна прозрачность?

Да → WebP с прозрачностью
   → Или AVIF (если браузеры поддерживают)
   → Или PNG (fallback для старых браузеров)

Нет → перейти к шагу 4

4. Это графика, скриншот или диаграмма?

Да → PNG (безопасный выбор)
   → Или WebP (если браузеры поддерживают)
   → Готово

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

Пример 1: Герой-баннер (фото)

function HeroBanner() {
  return (
    <picture>
      {/* Лучший формат для современных браузеров */}
      <source srcSet="hero.avif 1x, hero@2x.avif 2x" type="image/avif" />
      
      {/* Fallback для браузеров без AVIF */}
      <source srcSet="hero.webp 1x, hero@2x.webp 2x" type="image/webp" />
      
      {/* Fallback для старых браузеров */}
      <img 
        src="hero.jpg" 
        srcSet="hero@2x.jpg 2x" 
        alt="Красивый баннер"
        width={1920}
        height={1080}
      />
    </picture>
  );
}

Пример 2: Логотип

function Logo() {
  return (
    // SVG — идеален для логотипов
    <svg 
      viewBox="0 0 100 100" 
      width="100" 
      height="100"
      aria-label="Логотип компании"
    >
      <circle cx="50" cy="50" r="40" fill="#3b82f6" />
      <text x="50" y="60" textAnchor="middle" fill="white" fontSize="40">LOGO</text>
    </svg>
  );
}

Пример 3: Иконки

// SVG спрайт (самый эффективный)
function IconSprite() {
  return (
    <>
      <svg style={{ display: 'none' }}>
        <defs>
          <symbol id="icon-home">
            <path d="M10 20v-10h4v10h5v-10h4l-8-8-8 8h4z" />
          </symbol>
          <symbol id="icon-search">
            <path d="M15.5 14h-.79l-.28-.27c.98-1.14 1.57-2.61 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5c1.62 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
          </symbol>
        </defs>
      </svg>
      
      {/* Использование иконок */}
      <svg width="24" height="24"><use href="#icon-home" /></svg>
      <svg width="24" height="24"><use href="#icon-search" /></svg>
    </>
  );
}

Пример 4: PNG для скриншотов или графики

function Screenshot() {
  return (
    <picture>
      {/* Новые браузеры */}
      <source srcSet="screenshot.webp" type="image/webp" />
      
      {/* Старые браузеры */}
      <img src="screenshot.png" alt="Скриншот интерфейса" />
    </picture>
  );
}

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

1. Сжатие без потери качества:

# ImageMagick
convert photo.jpg -quality 80 -strip photo-optimized.jpg

# FFmpeg для WebP
ffmpeg -i photo.jpg -vcodec libwebp -quality 80 photo.webp

# FFmpeg для AVIF
ffmpeg -i photo.jpg -vcodec libaom-av1 -crf 35 photo.avif

# PNGQuant для PNG
pngquant --quality=80-90 screenshot.png

2. Использование Next.js Image:

import Image from 'next/image';

export function ProductImage() {
  return (
    <Image
      src="/product.jpg"
      alt="Товар"
      width={400}
      height={400}
      // Автоматически создаёт WebP и AVIF версии
      // Оптимизирует размеры для разных экранов
      // Ленивая загрузка (lazy loading)
      loading="lazy"
      // Placeholder при загрузке
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

3. Responsive Images:

function ResponsiveHero() {
  return (
    <picture>
      {/* Большие экраны */}
      <source 
        srcSet="hero-large.webp" 
        type="image/webp"
        media="(min-width: 1024px)"
      />
      
      {/* Средние экраны */}
      <source 
        srcSet="hero-medium.webp" 
        type="image/webp"
        media="(min-width: 640px)"
      />
      
      {/* Маленькие экраны */}
      <source 
        srcSet="hero-small.webp" 
        type="image/webp"
      />
      
      {/* Fallback */}
      <img src="hero-large.jpg" alt="Герой" />
    </picture>
  );
}

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

# Одна команда для всех форматов (bash скрипт)
for img in *.jpg; do
  # JPEG оптимизация
  convert "$img" -quality 80 "${img%.jpg}-opt.jpg"
  
  # WebP
  cwebp -q 80 "$img" -o "${img%.jpg}.webp"
  
  # AVIF
  avifenc --quality 65 "$img" "${img%.jpg}.avif"
done

Итоговая матрица решений

Тип контента          | Первичный | Fallback 1 | Fallback 2
----------------------|-----------|-----------|----------
Фотография           | AVIF      | WebP      | JPEG
Лого (вектор)        | SVG       | PNG       | -
Иконка               | SVG       | PNG       | -
Скриншот/Диаграмма   | WebP      | PNG       | -
Анимация             | WebP      | GIF       | -
Прозрачное изображение| WebP      | PNG       | -
Светлое изображение  | WebP      | JPEG      | -

Практический чеклист

  • Использую SVG для иконок и логотипов
  • Фотографии в WebP или AVIF (с JPEG fallback)
  • Скриншоты в WebP (с PNG fallback)
  • Всегда указываю width и height (для CLS)
  • Использую <picture> с множественными источниками
  • Оптимизирую размеры для разных экранов (srcset)
  • Ленивая загрузка (loading="lazy")
  • Сжимаю все изображения перед деплоем

Правильный формат может уменьшить размер страницы на 40-60% и значительно улучшить Lighthouse оценку.

Как выбираешь формат изображений? | PrepBro