Оптимальные размеры изображений для поубликации на сайте с точки зрения СЕО в 2026 году

Основные правила на 2025-2026:

1. Главный принцип:

• Ширина: 1200-2500 пикселей — золотая середина для большинства случаев.

• Размер файла: менее 500 КБ, а лучше 100-300 КБ. Для фоновых/героев — до 1 МБ.

2. Ключевое понятие: «2х» или «ретина».
Если у вас ширина изображения 1200px, то на ретине (современные экраны) она будет отображаться как 600px. Поэтому всегда делайте с запасом по ширине.

---

Конкретные размеры под разные задачи:

А. Контентные изображения (в статьях, каталоге)

• Горизонтальные (обложки, превью): 1200 x 630px (соотношение 1.91:1). Идеально для Open Graph и соцсетей.

• Вертикальные (мобильные): 1080 x 1350px (4:5).

• Квадратные (для товаров, аватарки): 1000 x 1000px или 1200 x 1200px.

• Баннеры/шапки: 1920 x 600px (широкий), но с важным контентом в центре 1200px.

Б. Фоновые изображения (fullscreen, герой-секция)

• Полноэкранные: 1920 x 1080px (Full HD) или 2560 x 1440px (2K). Но важно сильно сжимать!

• Для Retina 4K: 3840 x 2160px, но только если это критично (люксовые сайты, фотографы).

В. Иконки, логотипы, элементы интерфейса

• В SVG! — всегда, когда можно. Без потерь и любом размере.

• Растровые иконки: 100 x 100px для обычных, 200 x 200px для ретины, в PNG-24 с прозрачностью.

---

Чек-лист по оптимизации (обязательно!):

1. Сначала подбирайте размер под область вывода:

   • Узнайте ширину контейнера (например, 800px) → делайте картинку в 2 раза больше (1600px).

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

   • Инструменты: TinyPNG, Squoosh.app, ImageOptim (для Mac).

   • Для WordPress: плагины Smush, ShortPixel.

   • Форматы:

     • JPG — для фотографий.

     • PNG — для графики с прозрачностью.

     • WebP — современный формат, меньше вес на 25-35%. Используйте его как основной!

     • AVIF — новейший и самый эффективный, но поддержка не везде.

3. Название файла и alt-текст:

   • Не IMG_12345.jpg, а krasivaya-kofeynya-v-moskve.jpg.

   • Всегда заполняйте alt — для SEO и доступности.

4. Lazy loading: Включайте отложенную загрузку для изображений ниже первого экрана.

---

Практические примеры для сайта:

1. Блог:

   • Обложка статьи: 1200 x 630px, WebP, ~150 КБ.

   • Картинки внутри: 800 x 500px (или пропорционально), WebP, ~80-100 КБ.

2. Интернет-магазин:

   • Основное фото товара: 1200 x 1200px, WebP, ~150 КБ.

   • Галерея товара: 800 x 800px, WebP, ~100 КБ.

3. Лендинг:

   • Фоновый герой-баннер: 1920 x 1080px, сжатый JPG (60-70%), ~300 КБ.

   • Иконки преимуществ: SVG или PNG 200x200px.

---

Как проверить:

1. Откройте сайт в браузере → F12 (Инструменты разработчика) → вкладка Network → обновите страницу.

2. Отфильтруйте по Img.

3. Посмотрите Size (вес файла) и можно навестись, чтобы увидеть природные размеры.

Простой лайфхак: Залейте на Unsplash, скачайте в нужном размере — они дают хорошие готовые варианты.

И помни главное: современный тренд — это не максимальный размер, а оптимальный. Лучше чуть меньше, но быстрее.