В отличие от соцсетей — где спецификации фиксированы и хорошо задокументированы — у сайтов разные макеты, адаптивные раскладки и очень разные контексты использования. Баннер на главной странице занимает 100% ширины экрана. Фото товара может отображаться в 400px или 800px в зависимости от устройства. Изображение в блоге показывается внутри текстовой колонки.
Единственно правильного размера для «изображения сайта» не существует — но есть рекомендуемые диапазоны для каждого контекста, и понимание их — это разница между быстрым, хорошо отображающимся сайтом и медленным сайтом с размытыми или слишком тяжёлыми изображениями.
Почему размер изображения влияет на ваш сайт
Возникают две разные проблемы, когда изображения не оптимизированы:
- Изображения слишком велики в пикселях: браузер скачивает фото 4000px, чтобы отобразить его в 800px — 80% переданных данных сразу отбрасываются. Сайт становится медленным без какой-либо визуальной выгоды.
- Изображения слишком тяжёлые в КБ/МБ: даже при правильных размерах несжатое фото может весить 3 МБ, хотя могло бы весить 150 КБ с идентичным визуальным качеством на экране.
У этих двух проблем разные решения: первая требует изменения размера (корректировки пикселей); вторая требует сжатия (уменьшения веса без изменения пикселей). На практике применение обоих последовательно даёт лучший результат.
💡 Общее правило: максимальная ширина любого изображения для веба редко должна превышать 1920px — это ширина монитора Full HD. Для изображений, которые никогда не занимают весь экран (колонки, сетки товаров, превью), лимит ещё меньше. Выше этого вы тратите трафик впустую и вредите загрузке.
Справочная таблица — размеры по типу изображения
| Тип изображения | Рекомендуемые размеры | Идеальный вес | Формат |
|---|---|---|---|
| Баннер / hero (во всю ширину) | 1920 × 600–900 px | 100–200 КБ | WebP / JPG |
| Баннер десктоп (макет в контейнере) | 1200–1440 × 400–600 px | 80–150 КБ | WebP / JPG |
| Баннер мобильный | 768 × 400–600 px | 50–100 КБ | WebP / JPG |
| Фото товара (e-commerce) | 800–1200 × 800–1200 px | 60–150 КБ | WebP / JPG |
| Превью товара | 300–600 × 300–600 px | 20–50 КБ | WebP / JPG |
| Изображение статьи / блога | 1200 × 600–800 px | 60–120 КБ | WebP / JPG |
| Превью поста (список) | 400–600 × 250–400 px | 20–50 КБ | WebP / JPG |
| Логотип в шапке | 200–400 px по ширине | 5–30 КБ | SVG / PNG / WebP |
| Иконки интерфейса | 24–64 px | 1–5 КБ | SVG |
| Фавикон | 16, 32, 180, 192, 512 px | 1–10 КБ каждый | .ico + PNG |
| Open Graph (превью соцсетей) | 1200 × 630 px | 80–150 КБ | JPG / WebP |
| Фон секции | 1920 × переменная высота | 100–300 КБ | WebP / JPG |
| Фото профиля / аватар (сайт) | 200–400 × 200–400 px | 20–50 КБ | WebP / JPG / PNG |
| Изображение отзыва / клиента | 80–150 × 80–150 px | 5–20 КБ | WebP / JPG |
Размеры по типу сайта
Корпоративные сайты и портфолио
Корпоративные сайты обычно имеют максимальную ширину контента от 960px до 1440px. Баннеры или hero-изображения обычно занимают 100% ширины макета — так что 1440–1920px по ширине достаточно для современных мониторов. Изображения секций (фото команды, офиса, услуг) редко нуждаются в ширине больше 800px.
- Главный баннер: 1920 × 700–900px, менее 200 КБ
- Фото команды: 400–600 × 400–600px, менее 60 КБ
- Фото услуги / секции: 800–1200 × 500–700px, менее 100 КБ
Блоги и контентные порталы
В блогах колонка контента редко превышает 760–800px по ширине. Главное изображение (featured image) в 1200px более чем достаточно, чтобы покрыть любой адаптивный макет без лишних затрат. Превью в списке постов ещё меньше — обычно 300–500px.
- Featured image: 1200 × 630px, менее 100 КБ
- Изображения внутри статьи: 800–1200px по ширине, менее 80 КБ каждое
- Превью в списке: 400 × 250px, менее 30 КБ
E-commerce и интернет-магазины
В e-commerce фото товара — самый критичный элемент: это главный инструмент убеждения покупателя. Разрешение должно быть достаточным для зума (если сайт предлагает эту функцию), но вес нужно контролировать, чтобы не вредить скорости страниц-каталогов, которые загружают много изображений одновременно.
- Главное фото товара (квадратное): 800–1200 × 800–1200px, 80–150 КБ в WebP
- Дополнительные фото товара: тот же размер, что и главное
- Превью в сетке товаров: 300–500 × 300–500px, 20–50 КБ
- Баннер категории / акции: 1440 × 400–600px, 80–150 КБ
🛍️ Для e-commerce: всегда используйте белый или нейтральный фон на фото товаров — это не только облегчает сжатие (большие однородные цветовые области сжимаются очень хорошо), но и обеспечивает визуальную согласованность между товарами разных поставщиков и улучшает сравнение в корзине.
Лендинги
Лендинги разрабатываются для одного конверсионного действия — и скорость критична: исследования показывают, что каждая дополнительная секунда загрузки снижает конверсию на 7–12%. Изображения на лендингах нужно оптимизировать максимально агрессивно.
- Hero / фон: 1440–1920px по ширине, менее 150 КБ — максимальный приоритет
- Фото товара / услуги: 600–800px, менее 80 КБ
- Иконки преимуществ: SVG, когда возможно
- Фото отзыва: 80–120px круглое, менее 15 КБ
Влияние фактора 2× (экраны Retina и HiDPI)
Экраны Retina (Apple) и HiDPI (другие производители) имеют удвоенную плотность пикселей — то есть отображают больше пикселей на дюйм, чем обычные мониторы. Чтобы изображения выглядели чёткими на таких экранах, у изображения должно быть вдвое больше пикселей, чем у области отображения.
Пример: изображение, отображаемое шириной 400px на экране Retina, потребует 800px по ширине, чтобы выглядеть чётким. Отправка всего 400px приводит к слегка размытому изображению на iPhone и MacBook.
Самое практичное решение — использовать изображения с удвоенной максимальной шириной отображения, но хорошо сжимать, чтобы вес не удваивался в той же пропорции. Хорошо сжатое изображение 800px в WebP обычно весит меньше, чем неоптимизированный PNG 400px.
Правильный формат для каждой ситуации
| Ситуация | Идеальный формат | Почему |
|---|---|---|
| Фотографии (товар, баннер, команда) | WebP lossy | На 25–35% меньше, чем JPG при том же качестве |
| Логотип в шапке | SVG | Векторный, любой размер без потерь, меньший файл |
| Логотип, когда SVG не поддерживается | PNG с прозрачным фоном | Сохраняет необходимую прозрачность |
| Иконки интерфейса | SVG | Масштабируемый, анимируемый через CSS, крошечный файл |
| Скриншот с текстом | WebP lossless или PNG | Чёткий текст — JPG создаёт артефакты вокруг букв |
| Open Graph / превью соцсетей | JPG или WebP | Максимальная совместимость с платформами превью |
| Фон с прозрачностью | WebP с альфа-каналом или PNG | Единственные форматы с прозрачностью, помимо PNG |
Как подготовить изображения перед загрузкой
Рекомендуемый порядок действий для любого изображения, предназначенного для сайта:
- Определите размеры использования. Какое максимальное пространство займёт это изображение в макете? Используйте справочную таблицу выше или проверьте элемент в браузере (F12 → выбрать область изображения).
- Измените размер до удвоенной области отображения. Чтобы покрыть экраны Retina без чрезмерных затрат. Используйте Изменение размера изображения, чтобы задать точную ширину в пикселях.
- Конвертируйте в WebP. Если ваш сайт или CMS поддерживает WebP (большинство современных поддерживает), конвертируйте перед загрузкой. Используйте Конвертер изображений для быстрой конвертации.
- Сожмите. Примените сжатие, чтобы уменьшить вес в рекомендуемых пределах. Используйте Компрессор изображений, чтобы оптимизировать JPG, PNG и WebP без заметной потери качества.
- Проверьте результат. Откройте сжатое изображение и сравните с оригиналом. Если разница незаметна, результат хороший.
Подготовьте изображения для сайта прямо сейчас
Измените размер и сожмите изображения вашего сайта за секунды — без установки чего-либо, без регистрации.
Проверка текущего размера изображений вашего сайта
Чтобы определить, оптимизированы ли изображения вашего текущего сайта, используйте эти инструменты:
- Google PageSpeed Insights (pagespeed.web.dev): анализирует URL и перечисляет изображения с возможностью уменьшения, показывая оценочную выгоду в КБ для каждого.
- Chrome DevTools → Network → Img: отфильтруйте запросы по типу изображения и посмотрите размер каждого загруженного файла. Отсортируйте по размеру, чтобы найти самые тяжёлые.
- WebPageTest.org: детальный анализ с waterfall-диаграммой, показывающей, какие изображения загружаются первыми и сколько времени это занимает.
Самые частые ошибки размера изображений на сайтах
- Загружать фото прямо с камеры: фото с камеры весят 3–12 МБ и имеют ширину 4000–8000px. Ни одному сайту не нужны такие изображения без предварительного изменения размера и сжатия.
- Использовать PNG для фотографий: фото в PNG получаются в 5–10 раз больше, чем в JPG или WebP, без какой-либо визуальной выгоды. Используйте PNG только для изображений с прозрачностью или графики с чёткими краями.
- Не иметь мобильной версии изображений: отдавать изображение 1920px на телефон с экраном 390px — чистая трата ресурсов. Атрибут
srcsetв HTML решает это автоматически. - Забывать про изображения Open Graph: когда кто-то делится страницей в WhatsApp или LinkedIn без настроенного превью-изображения, платформа показывает общую или пустую миниатюру. Всегда настраивайте мета-тег
og:imageс изображением 1200×630px. - Логотип в JPG: принудительный белый фон JPG проявляется в контекстах с цветным или прозрачным фоном. Логотип всегда должен быть в SVG или PNG.