Оптимальный размер изображений для сайта: первый экран, блог и миниатюры

Оптимальный размер изображения для сайта примерно вдвое больше ширины, в которой оно показывается. Для ориентира: 1920–2560 px в ширину для изображений первого экрана во всю ширину, 1200–1600 px для изображений в блоге и 300–600 px для миниатюр. Сохраняйте в WebP или сжатый JPG и держите вес большинства изображений меньше примерно 200 КБ.

Это практичные отправные точки, а не официальные стандарты. Реальные числа определяют ваша тема и верстка, а способ ниже показывает, как их найти.

Какой оптимальный размер изображений для сайта?

Начните с места, которое каждое изображение занимает в вашей верстке. Откройте страницу в браузере на компьютере, нажмите правой кнопкой на изображение и выберите «Просмотреть код». Инструменты разработчика покажут отображаемую ширину в CSS-пикселях. Удвойте это число, чтобы изображение оставалось четким на телефонах и ноутбуках с экранами высокой плотности.

Краткая шпаргалка по распространенным типам изображений:

• Первый экран или баннер во всю ширину: 1920–2560 px в ширину.
• Изображения внутри статьи блога или колонки контента: 1200–1600 px в ширину.
• Фото товаров: 1000–2000 px по длинной стороне, больше, если в магазине есть увеличение.
• Превью и карточки: от 300 до 600 px в ширину.
• Логотипы и значки: по возможности SVG, ведь он остается четким при любом размере.
• Изображение для соцсетей (Open Graph): 1200 × 630 px, это широко используемый размер.

Самая частая ошибка: загрузить фото в 4000 px с телефона или камеры в колонку шириной 700 px. Браузер скачивает каждый пиксель, а потом выбрасывает большую часть. На мобильном интернете это секунды ожидания впустую.

В вебе важны только размеры в пикселях. Число DPI, записанное в файле, экраны игнорируют, поэтому выставлять 72 или 300 DPI для сайта не нужно. Наша инструкция про 300 DPI объясняет, когда это число действительно важно (при печати).

Размер изображения для первого экрана: какой ширины и высоты?

Изображение первого экрана (hero) это крупный баннер вверху страницы. Поскольку оно растягивается на весь экран, оно должно быть самым широким изображением на сайте.

• Ширина: 1920 px подходит для большинства экранов компьютеров. Поднимите до 2560 px, если хотите четкости на больших дисплеях с высокой плотностью пикселей.
• Высота: зависит от дизайна. Многие изображения первого экрана имеют высоту от 600 до 1000 px при ширине для компьютера.
• Форма: на компьютере хорошо работает широкая обрезка, например 16:9 или 21:9. На телефонах то же изображение часто обрезается по центру, так что держите объект посередине.
• Вес файла: старайтесь держаться меньше примерно 500 КБ, а чем меньше, тем лучше.

Изображение первого экрана часто является элементом Largest Contentful Paint (LCP), тем моментом, по которому Google судит, как быстро появляется ваша страница. Рекомендация Google на web.dev: стремиться к LCP 2,5 секунды или меньше. Тяжелое изображение первого экрана обычная причина, по которой страница в это не укладывается.

Если поверх изображения первого экрана лежит текст, слегка затемненное или размытое изображение сохраняет его читаемым и лучше сжимается, ведь гладкие области занимают меньше байтов, чем мелкие детали.

Размер картинок для статей блога и обложек

Для изображений внутри статьи посмотрите на ширину колонки контента. Большинство тем для блогов используют колонку от 600 до 800 CSS-пикселей. Удвоение дает 1200–1600 px, это и есть диапазон размера картинок для блога выше.

• Изображения в тексте статьи: ширина 1200 px подходит для большинства тем. Используйте 1600 px, если колонка широкая.
• Обложка статьи: проверьте документацию темы. Многие используют широкую обрезку, а 1200 x 630 px заодно отлично подходит как изображение для соцсетей.
• Скриншоты: оставляйте их в естественном размере, если они уже колонки, чтобы текст не размывался от растягивания.
• Вес файла: целитесь в 100–200 КБ для фотографий. Скриншоты в PNG могут быть больше, так что попробуйте для них WebP.

Используйте одну и ту же форму обложек во всем блоге. Разные формы делают страницы архива и рубрик неровными.

Какого веса должны быть изображения на сайте?

Официального лимита нет, но примерные ориентиры сохраняют страницы быстрыми:

• Большинство изображений в контенте: меньше примерно 200 КБ.
• Крупные изображения первого экрана: меньше примерно 500 КБ.
• Миниатюры: часто 20–50 КБ.

Если путаетесь в КБ и МБ, наша инструкция о том, сколько КБ в МБ, все прояснит.

Правильные размеры делают большую часть работы. Остальное делает сжатие. Фото в 1600 px, сохраненное в JPG с качеством 75–85 или в WebP, обычно попадает в диапазон. Если изображение все еще тяжелое, используйте инструмент сжатия с желаемым размером, например Сжатие фото от ConvertorLab. Перед публикацией сравните результат с оригиналом в полном размере.

Какой формат использовать?

• WebP для фотографий и графики. По данным Google, WebP с потерями на 25–34% меньше сопоставимого JPEG, а WebP без потерь на 26% меньше PNG. Его поддерживают все актуальные основные браузеры.
• SVG для логотипов, значков и простых иллюстраций.
• JPG как запасной вариант или когда платформа не принимает WebP.
• PNG только когда нужны качество без потерь или прозрачность, а WebP использовать нельзя.

Наше объяснение о том, что такое файл WebP, рассказывает о поддержке в браузерах и приложениях. Чтобы сконвертировать существующие файлы, используйте конвертер изображений в WebP.

Как изменить размер изображений для сайта, шаг за шагом

1. Храните исходные файлы в высоком разрешении в отдельной папке. Никогда не редактируйте единственную копию.
2. Обрежьте каждое изображение под форму, которую использует ваш макет, например 16:9 для баннеров или 1:1 для карточек.
3. Измените размер до целевой ширины. Инструмент «Изменить размер фото» задает точную ширину или длинную сторону для всей пачки и может сохранять в WebP или JPG.
4. Сожмите до целевого веса файла, затем проверьте несколько изображений в полном размере на пятна и полосы.
5. Дайте файлам короткие понятные имена строчными буквами, например oak-dining-table.webp.
6. Загрузите, затем добавьте в CMS описательный alt-текст.

Многие платформы меняют размер и конвертируют изображения при загрузке. Все равно загружайте файл разумного размера. Это экономит место и дает платформе чистую отправную точку.

Адаптивные изображения, отложенная загрузка и проверка скорости

Как изображения загружаются, важно не меньше их размера. Большую часть работы делают несколько привычек в HTML:

• Добавляйте loading="lazy" для изображений ниже по странице, чтобы браузер ждал, пока читатель до них долистает.
• Не используйте отложенную загрузку для изображения первого экрана. В руководстве web.dev по оптимизации LCP сказано никогда не откладывать загрузку LCP-изображения и вместо этого предлагается fetchpriority="high" для него.
• Всегда задавайте атрибуты width и height для изображений. Браузер заранее резервирует место, поэтому текст не прыгает при загрузке страницы.
• Для изображений, которые показываются в очень разных размерах на телефонах и компьютерах, предлагайте несколько версий с помощью srcset и sizes. В материале MDN руководстве MDN по адаптивным изображениям разобран синтаксис.

Чтобы найти главных нарушителей, проверьте страницу в PageSpeed Insights или на панели Lighthouse в инструментах разработчика Chrome. Они отмечают изображения больше их отображаемого размера, изображения, которым подошел бы современный формат, и изображения за пределами экрана, которые стоит загружать отложенно. Можно также открыть вкладку Network, отфильтровать по Img и отсортировать по размеру. Все, что вверху списка весит больше нескольких сотен КБ, стоит уменьшить в первую очередь.

Частые вопросы