Скорость важнее пикселей: практическое руководство по подготовке изображений

Форматы

• AVIF — минимальный вес при хорошем качестве; держите fallback.

• WebP — золотая середина для большинства кейсов.

• JPEG/PNG — только как резерв: фото → JPEG, графика с прозрачностью → PNG.

Размеры и плотность

• Готовьте две версии: 1x и 2x для ретины.

• Для баннеров шириной 1200 px: рендерите 1200 и 2400 px, указывайте srcset + sizes.

• Не загружайте «плакаты» 4000 px на мобильный — режьте по контейнеру.

Качество (ориентиры)

• WebP: 65–80; JPEG: 70–85 (визуально проверять в 100% масштабе).

• Экспортируйте в sRGB, удаляйте лишние метаданные (EXIF).

Соцсети и OG

• Частые герои: 1200×630 (OG), 1200×675 (X/Twitter), 1080×1350 (вертикаль для Instagram*).

• Держите безопасные поля 8–10% от краёв, чтобы авто-кроп не «съел» текст.

Код-минимум

• loading="lazy" для картинок ниже первого экрана.

• aspect-ratio или резервное соотношение через CSS, чтобы не прыгала вёрстка.

• CDN + кеш заголовки.

Пример пресета экспорта

«Соцсети-баннер»: 1600×900, WebP качество 70, sRGB, резкость по снижению (0,3–0,5).
«Лендинг-герой»: 2400×1000 (2x), WebP 70 + JPEG 80 fallback.

Частые ошибки

• CMYK-картинки в веб — «грязные» цвета.

• Текст зашит в JPG без ретины — мыло на телефонах.

• Слишком агрессивное сжатие градиентов — «полосит».

Внутренние ссылки: /categories/banners, /categories/social, /categories/presentations
ALT для обложки: «Схема оптимизации изображений: форматы, размеры, sRGB»

*Соцсети и их кропы меняются — проверяйте актуальные гайды при планировании кампаний.