Форматы и размеры изображений для соцсетей: полное руководство (2025)
Почему форматы и размеры важны
Правильные формат и размер сокращают загрузку, сохраняют качество и предотвращают неудачную обрезку или размытые миниатюры. При мобильных лентах и разной плотности экранов (Retina / 2x) подготовка изображений влияет на вовлечённость и конверсию.
Распространённые форматы: когда использовать каждый
- JPEG (JPG) — Лучший выбор для фото и сложных изображений, где допустимо сжатие с потерями. Небольшие файлы с хорошим качеством после настройки сжатия.
- PNG — Используйте, когда нужны качество без потерь или прозрачность. PNG занимает больше места; подходит для логотипов и графики с однотонными областями.
- WebP — Современный формат со сжатием с потерями и без них. Хороший баланс качества и размера; поддерживается большинством современных браузеров и соцсетей.
- AVIF — Отличные сжатие и качество; файлы меньше WebP, но поддержка ещё расширяется. Используйте на совместимых платформах или как исходник для создания запасных форматов.
- GIF — Только для простой анимации; файлы больше, чем у современных форматов на основе видео.
- SVG — Векторный формат для логотипов и значков. Масштабируется без потери качества и обычно занимает мало места при простой графике.
Краткое сравнение форматов
| Формат | Лучшее применение | Прозрачность | Анимация | Размер файла |
|---|---|---|---|---|
| JPEG | Фото, изображения ленты | Нет | Нет | Небольшой (с потерями) |
| PNG | Логотипы, значки, изображения с альфа-каналом | Да (альфа-канал) | Нет | Большой (без потерь) |
| WebP | Фото и графика — оптимальный баланс | Да | Да (анимированный WebP) | Меньше PNG/JPEG |
| AVIF | Передовое сжатие фотографий | Да | Ограниченно | Очень небольшой (лучший) |
| SVG | Логотипы, значки, масштабируемая графика | Да (векторная) | Возможна с SMIL/CSS | Очень небольшой для простой графики |
Справочник рекомендуемых размеров изображений для соцсетей
Ниже приведены распространённые рекомендуемые размеры. Для лучшего результата экспортируйте в указанных размерах в пикселях и при возможности создавайте версии 2x для экранов с высокой плотностью пикселей.
| Платформа | Тип изображения | Рекомендуемый размер (пкс) | Формат |
|---|---|---|---|
| Лента (квадрат) | 1080 x 1080 | JPEG/WebP | |
| Истории / Reels | 1080 x 1920 | JPEG/WebP | |
| Публикуемое изображение | 1200 x 630 | JPEG/WebP | |
| Twitter / X | Изображение ленты / предпросмотр | 1200 x 675 | JPEG/WebP |
| Публикуемое изображение | 1200 x 627 | JPEG/WebP | |
| Пин | 1000 x 1500 (2:3) | JPEG/WebP | |
| YouTube | Миниатюра видео | 1280 x 720 | JPEG/PNG |
| TikTok | Миниатюра / обложка | 1080 x 1920 | JPEG/WebP |
Советы по оптимизации
- Экспортируйте в точных рекомендуемых размерах или немного больше и предоставляйте версии 2x для Retina (например, 2160x2160 для отображения 1080x1080 с использованием srcset).
- Предпочитайте WebP (или AVIF при наличии поддержки), чтобы уменьшить файлы с сохранением качества. При необходимости добавляйте запасные JPEG/PNG.
- Сжимайте изображения с учётом воспринимаемого качества (например, качество JPEG 72–85) и визуально проверяйте результат.
- Используйте
srcsetи атрибуты адаптивных изображений, чтобы подавать подходящий размер под область просмотра устройства. - Используйте SVG для логотипов и значков: он масштабируется и занимает мало места для простых фигур.
Пример разметки адаптивного изображения
<img src="hero-1080.jpg"
srcset="hero-540.jpg 540w, hero-1080.jpg 1080w, hero-2160.jpg 2160w"
sizes="(max-width: 600px) 540px, (max-width:1200px) 1080px, 2160px"
alt="Your caption here">
Визуальные примеры
Краткий процесс публикации
- Создайте дизайн в рекомендуемом размере или больше с безопасными отступами для обрезки.
- Экспортируйте в WebP со сжатием с потерями и качеством около 80, создайте запасную версию JPEG/PNG.
- Перед публикацией проверьте результат на устройстве и в режимах предпросмотра каждой платформы.
- Автоматизируйте создание разных размеров с помощью пакетных инструментов или процесса обработки изображений.
Частые вопросы
Для фото обычно подходят JPEG или WebP. Для логотипов и изображений с прозрачностью используйте PNG или SVG. Если платформа автоматически поддерживает WebP, выбирайте его ради меньшего размера файлов.
Да, многие платформы повторно сжимают, а иногда и уменьшают изображения. Загружайте файлы рекомендуемого размера с высоким воспринимаемым качеством, чтобы снизить артефакты повторного сжатия.
Для сайтов и приложений предоставляйте изображения высокого разрешения через srcset. Для соцсетей загружайте рекомендуемый размер в пикселях: платформа обычно сама масштабирует под устройство.
AVIF даёт отличное соотношение качества и размера, но нужно учитывать поддержку браузеров и платформ. Используйте AVIF как оптимизированный источник, а WebP/JPEG — как запасной вариант для совместимости.
Итоговый список проверок
- Для фото выбирайте WebP или JPEG; для логотипов — PNG/SVG.
- Экспортируйте в рекомендуемых размерах и предоставляйте Retina-версии 2x, если управляете интерфейсом сайта.
- Проверяйте сжатие визуально: добивайтесь минимального размера без заметной потери качества.
- Используйте
srcsetи современные форматы с запасными вариантами для оптимального баланса качества и совместимости.
Нужно быстро конвертировать файлы или автоматически получить нужные размеры? Попробуйте наш конвертер: он пакетно экспортирует в WebP/JPEG/PNG и меняет размер для разных соцсетей.