Перевод изображения для сайта: таблицы, формулы и онлайн-конвертер

Пиксельная плотность дисплеев (DPR) — это коэффициент, показывающий, сколько физических пикселей приходится на один CSS-пиксель. Для обычного экрана DPR=1, для Retina (iPhone, многие мониторы 4K) — чаще 2 или 3.

Пример: контейнер 400px, DPR 2 → изображение должно быть 800px по ширине. Если поставить 400px, на Retina оно будет размытым. Если 1200px — избыточный вес.

Для автоматического подбора используйте атрибут srcset в теге <img>:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="описание">

Подводный камень: браузер использует не только DPR, но и размер окна (viewport). Указывайте sizes — без него браузер возьмёт 100vw и скачает самое большое.

Для совместимости используйте тег <picture> с несколькими источниками:

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

Важно: порядок источников определяет приоритет — ставьте AVIF первым, WebP вторым, JPEG последним.

Допустим, у нас есть исходное фото товара (6000×4000 px, 12 МБ, JPEG). Хотим показать его на странице товара и в карусели.

1. Определите максимальные размеры контейнеров: детальная карточка — 800px, миниатюра — 200px.
2. Рассчитайте размеры для Retina: для детальной 800×2=1600px, для миниатюры 200×2=400px.
3. Сконвертируйте в WebP: используйте cwebp или онлайн-конвертер. Пример команды:

   cwebp -q 80 source.jpg -o product-1600.webp
   cwebp -q 80 source.jpg -resize 400 0 -o thumb-400.webp

4. Создайте fallback в JPEG тех же размеров:

   convert source.jpg -resize 1600x1600 product-1600.jpg
   convert source.jpg -resize 400x400 thumb-400.jpg

5. Вставьте в HTML с :

   <picture>
     <source srcset="product-1600.webp" media="(min-width: 800px)">
     <source srcset="product-1600.jpg" media="(min-width: 800px)">
     <img src="product-800.jpg" alt="Товар">
   </picture>

Результат: вес загрузки уменьшился с 12 МБ до ~350 КБ (WebP). Если нужно быстро перевести несколько файлов, используйте наш Конвертер изображения для сайта.

• Цветовой профиль (ICC): если изображение содержит встроенный профиль (например, Adobe RGB), при конвертации цвета могут исказиться. Рекомендуется конвертировать в sRGB и удалить профиль: cwebp -noalpha -metadata none src.jpg -o out.webp.
• EXIF-данные: ориентация, дата, GPS — обычно не нужны на сайте. Удаляйте: cwebp -metadata none или jpegtran -copy none.
• Размеры в srcset: не используйте разные пропорции (aspect ratio) в одном srcset — браузер решит, что изображения разные, и может скачать все. Сохраняйте одинаковое соотношение сторон.
• Lazy loading: загрузка изображений при прокрутке экономит трафик. Добавьте атрибут loading="lazy" для всех картинок ниже сгиба.

Для быстрого сжатия без потери качества попробуйте Сжать изображение онлайн — он автоматически удаляет метаданные и подбирает степень сжатия.

Даже после конвертации изображение может отображаться некорректно. Используйте эти методы:

• DevTools (Chrome/Firefox): во вкладке Network фильтр «Img» — увидите реальный размер загруженного файла. Если грузится оригинал (12 МБ) вместо WebP (350 КБ) — неверно настроен <picture>.
• Check format support: на странице chrome://gpu проверьте поддержку WebP и AVIF («Decode image»).
• Pixel density test: в DevTools переключитесь на Device Toolbar и выберите iPhone 12 (DPR=3). Проверьте, что ширина загружаемого изображения >= контейнера × 3.
• Lighthouse: отчёт покажет «Serve images in next-gen formats» и «Properly size images». Стремитесь к 100 баллам.

Если после всех проверок изображение всё ещё тормозит — проверьте сервер. Возможно, не включено сжатие Brotli или gzip для самого HTML.

Для анализа цветовой палитры загруженного изображения пригодится Палитра из изображения онлайн.

Вручную конвертировать каждое изображение — долго. Настройте автоматическую обработку при пуше в репозиторий.

Пример на Node.js (sharp):

const sharp = require('sharp');
const fs = require('fs');

async function convert(input, outputBase) {
  const image = sharp(input);
  await image
    .resize(1600)
    .webp({ quality: 80 })
    .toFile(`${outputBase}-1600.webp`);
  await image
    .resize(800)
    .toFile(`${outputBase}-800.webp`);
  await image
    .jpeg({ quality: 85 })
    .toFile(`${outputBase}-800.jpg`);
}
convert('photo.jpg', 'product');

Для CI (GitHub Actions): установите sharp и запускайте скрипт перед деплоем. Не забудьте добавить cache: sharp для ускорения.

Edge-case: если изображений много (>100), используйте очередь (Bull, RabbitMQ) — иначе сборка упадёт по таймауту.

Для логотипов, иконок и иллюстраций с чёткими краями используйте SVG. Преимущества:

• Не зависит от DPR — всегда чётко.
• Меньший размер (часто <1 КБ).
• Можно анимировать и менять цвета через CSS.

Когда SVG плох: для фотографий и сложных растровых изображений — размер SVG будет огромным.

Если у вас уже есть PNG-логотип, конвертируйте его в SVG через трейсер (например, Potrace), но лучше попросите исходник у дизайнера.

Каждая секунда загрузки страницы снижает конверсию в среднем на 7% (данные Akamai на 2026). Оптимизация изображений — самый быстрый способ ускорить сайт.

Чтобы посчитать экономию:

1. Измерьте текущее время загрузки (LCP в Lighthouse).
2. Примените оптимизацию (конвертация в WebP, сжатие, srcset).
3. Замерьте новое время — обычно сокращение на 30–50%.
4. Умножьте процент улучшения на коэффициент конверсии.

Пример: сайт зарабатывает 1 000 000 ₽ в месяц, конверсия 2%. Ускорение на 1 сек (улучшение загрузки на 40%) даёт прирост конверсии на ~2,8% (0,4*7%). Итого: + 28 000 ₽/мес.

Посчитать точнее поможет Калькулятор конверсии сайта.

Фоновые изображения в CSS тоже должны быть адаптивными. Используйте image-set():

.hero {
  background-image: url('hero-800.jpg');
  background-image: image-set(
    'hero-800.webp' 1x,
    'hero-1600.webp' 2x,
    'hero-2400.webp' 3x
  );
}

Внимание: image-set() пока не поддерживает все браузеры, поэтому обязательно указывайте fallback через обычный background-image.

Для сложных проектов лучше всё же использовать <picture> внутри <div> с position: absolute.