Коротко
- Считайте от блока: ширина, в которой картинка показывается на экране, × 2 = ширина исходника.
- Фото на весь экран: 1920–2560 px по ширине на компьютере и отдельная вертикальная версия для телефона.
- Держите одну пропорцию для однотипных картинок: все карточки 4:3 или 1:1, все обложки статей 16:9.
- Ориентир по весу: главная картинка первого экрана — до 200–300 КБ, остальные — меньше.
- Логотипы и иконки — в SVG, фото — в WebP.
Как рассчитать размер изображения для сайта
Браузер показывает картинку в той ширине, которую ей отводит вёрстка. Если загрузить меньше — изображение растянется и станет мыльным. Если сильно больше — страница будет грузиться дольше без видимой пользы.
Почему умножать на два: у большинства современных телефонов и многих ноутбуков на один «пиксель вёрстки» приходится два-три физических пикселя экрана. Картинка шириной 600 px в блоке шириной 600 px на таком экране выглядит размытой. Картинка 1200 px — чёткой.
Пошагово:
- Откройте страницу на компьютере и на телефоне.
- Узнайте ширину блока, где будет картинка. Проще всего спросить у дизайнера или посмотреть в макете. Можно и самому: правая кнопка мыши → «Просмотреть код» → навести на картинку, браузер покажет её размеры.
- Умножьте ширину на 2.
- Высоту посчитайте из нужной пропорции: для 16:9 — ширина × 9 / 16.
- Если картинка на телефоне занимает весь экран, проверьте и мобильную ширину: 390 px × 2 = 780 px, лучше брать с запасом 1080 px.
Таблица размеров изображений для сайта
Размеры — практический ориентир для типичных сайтов малого бизнеса. Если у вашего шаблона или конструктора есть свои рекомендации, приоритет за ними.
| Где на сайте | Размер на компьютере | Размер для телефона | Пропорция | Формат |
|---|---|---|---|---|
| Фото на весь первый экран | 1920 × 1080 – 2560 × 1440 px | 1080 × 1350 – 1080 × 1920 px, отдельная картинка | 16:9 и 4:5 или 9:16 | WebP, JPEG |
| Фото в половину первого экрана (текст слева, фото справа) | 1200 × 1200 – 1600 × 1600 px | Та же, кадр по центру | 1:1 или 4:5 | WebP, JPEG |
| Картинка в тексте страницы или статьи | 1200–1600 px по ширине | Та же | 16:9, 3:2 | WebP, JPEG |
| Обложка статьи блога | 1600 × 900 px | Та же | 16:9 | WebP |
| Карточка услуги или товара в сетке | 800 × 600 – 1000 × 1000 px | Та же | 4:3 или 1:1 | WebP |
| Фото товара на странице товара | 1500–2000 px по длинной стороне | Та же | 1:1 или 3:4 | WebP, JPEG |
| Фото сотрудника, отзыв с фото | 600 × 600 – 800 × 800 px | Та же | 1:1 | WebP, JPEG |
| Галерея работ, портфолио | 1600–2000 px по длинной стороне | Та же | Как снято, но единообразно | WebP |
| Фоновая текстура или паттерн | 1920 px по ширине или маленькая плитка с повтором | Та же | — | WebP, SVG |
| Логотип в шапке | Векторный, отображается на 32–60 px высотой | Та же | Своя | SVG |
| Иконки преимуществ | Векторные, 24–64 px | Та же | 1:1 | SVG |
| Фавиконка | SVG или 120 × 120 px | — | 1:1 | SVG, PNG, ICO |
| Иконка для экрана «Домой» на iPhone | 180 × 180 px | — | 1:1 | PNG |
| Превью ссылки в мессенджерах и соцсетях | 1200 × 630 px | — | около 1,91:1 | JPEG, PNG |
Отдельно о баннерах: главный баннер, всплывающее окно, баннеры акций и их размеры для компьютера и телефона подробно разобраны в статье баннер для сайта. Рекламные картинки для Рекламной сети Яндекса — другая история со своими требованиями, о ней — в материале изображения для РСЯ.
Первый экран: самая важная картинка на сайте
Фото первого экрана видят все посетители, и именно оно чаще всего грузится дольше остального. Здесь важны три вещи.
Две версии под разные экраны. Горизонтальное фото 16:9 на телефоне превращается в узкую полоску или обрезается так, что от бригады остаются только ноги. Готовьте отдельную вертикальную версию 4:5 или 9:16 и подставляйте её на мобильных. Большинство конструкторов и любая нормальная вёрстка это умеют.
Безопасная зона. Главный объект (человек, продукт, результат работы) держите ближе к центру кадра. При разных пропорциях экранов края обрезаются.
Текст поверх фото или рядом. Если заголовок лежит на фото, нужна спокойная область без деталей или затемнение. На телефоне надёжнее ставить фото сверху, а текст под ним, а не поверх.
Что ещё должно быть на первом экране, кроме картинки, разобрано в статье первый экран сайта.
Если вы готовите картинки для нового сайта и не уверены, как будет выглядеть первый экран на компьютере и телефоне, это проще увидеть на готовом эскизе.
Пропорции: почему картинки в сетке выглядят неряшливо
Самая частая проблема каталогов и страниц услуг — фото разных пропорций в одной сетке. Одна карточка вытянутая, другая квадратная, третья горизонтальная, и строка выглядит разорванной.
| Пропорция | Где использовать | Пример размера |
|---|---|---|
| 1:1 | Товары, сотрудники, отзывы, квадратные галереи | 1000 × 1000 px |
| 4:3 | Карточки услуг, фото работ, интерьеры | 1200 × 900 px |
| 3:2 | Фото в тексте, кадры с фотоаппарата | 1500 × 1000 px |
| 16:9 | Первый экран на компьютере, обложки статей, видео | 1920 × 1080 px |
| 4:5 | Первый экран на телефоне, вертикальные карточки | 1080 × 1350 px |
| 9:16 | Полноэкранные вертикальные фото, сторис | 1080 × 1920 px |
Правило: выберите одну пропорцию на каждый тип блока и обрежьте все фото под неё до загрузки. Обрезать заранее лучше, чем доверять автоматике сайта: она не знает, где на фото лицо, а где пустая стена.
Сколько должна весить картинка на сайте
Размер в пикселях и вес в килобайтах — разные вещи. Фото 1920 px шириной может весить и 150 КБ, и 5 МБ в зависимости от формата и сжатия.
Ориентиры, на которые мы опираемся на практике:
- главная картинка первого экрана — до 200–300 КБ;
- фото в тексте и галерее — 100–250 КБ;
- карточки в сетке — 50–150 КБ;
- иконки и логотип в SVG — единицы килобайт.
Это не требование поисковиков, а рабочий ориентир, при котором страница быстро открывается на мобильном интернете. Скорость загрузки страницы и главного изображения входит в показатели, которые Google описывает в рекомендациях по Core Web Vitals. Как сжимать фото, какой формат выбрать (WebP, AVIF, JPEG) и как настроить ленивую загрузку, подробно разобрано в статье SEO-оптимизация изображений.
Логотип, иконки и фавиконка
Логотип загружайте в SVG — векторном формате, который остаётся чётким на любом экране и почти ничего не весит. Если SVG нет, PNG с прозрачным фоном высотой в 2–3 раза больше, чем логотип показывается в шапке.
Иконки преимуществ и услуг — тоже SVG, в одном стиле и одной толщине линий.
Фавиконка — значок во вкладке браузера и в результатах поиска. По справке Яндекс Вебмастера рекомендуемые размеры — 120 × 120, 32 × 32 или 16 × 16 px, предпочтительный формат — SVG, анимация не поддерживается. Значок 120 × 120 или SVG выглядит заметнее в сервисах Яндекса. Для экрана «Домой» на iPhone дополнительно готовят PNG 180 × 180 px.
Превью ссылки в мессенджерах и соцсетях
Когда ссылку на сайт отправляют в мессенджер, подтягивается картинка-превью. Если её не задать, мессенджер возьмёт случайное изображение со страницы или не покажет ничего.
- Размер: 1200 × 630 px, это стандартная пропорция для превью в большинстве соцсетей и мессенджеров.
- Важное — в центре: края на разных площадках обрезаются по-разному.
- Текст на картинке — крупно и коротко, 3–6 слов, или без текста вовсе.
- Для каждой важной страницы (услуги, статьи блога) — своё превью.
Картинка превью указывается в коде страницы специальным тегом. На конструкторах это поле обычно есть в настройках страницы.
Как подготовить изображения для сайта: пошагово
- Соберите исходники в максимальном качестве. Фото с фотоаппарата или оригиналы с телефона, а не скриншоты и не картинки из мессенджеров: мессенджеры сжимают.
- Определите, куда пойдёт каждое фото, и выпишите нужный размер и пропорцию по таблице.
- Обрежьте под пропорцию в любом редакторе. Для первого экрана сделайте две версии: горизонтальную и вертикальную.
- Уменьшите до нужной ширины. Не загружайте фото 6000 px туда, где нужно 1200.
- Сохраните в WebP с качеством 75–85%. На глаз разницы с оригиналом не будет, а вес упадёт в разы.
- Назовите файлы по смыслу латиницей:
uborka-kvartiry-kazan.webp. - Загрузите и проверьте на телефоне: не обрезан ли главный объект, читается ли текст, нет ли «мыла».
- Проверьте скорость страницы в бесплатных сервисах проверки скорости и посмотрите, не выделяются ли картинки как тяжёлые.
Если своих фото нет, где их взять законно, разобрано в статье где взять фото для сайта. Если фото есть, но плохого качества, помогут нейросети — об этом в материале улучшить качество фото нейросетью.
Условный пример: страница услуг клининга
Пример условный, не кейс студии. Клининговая компания из Казани готовит страницу «Генеральная уборка».
| Блок | Сколько картинок | Размер и пропорция | Вес каждой |
|---|---|---|---|
| Первый экран | 2 версии | 2400 × 1350 px (16:9) и 1080 × 1350 px (4:5) | 250 КБ и 150 КБ |
| «До и после» | 6 | 1200 × 900 px (4:3) | 120 КБ |
| Команда | 4 | 800 × 800 px (1:1) | 70 КБ |
| Отзывы с фото | 5 | 600 × 600 px (1:1) | 50 КБ |
| Иконки «что входит» | 8 | SVG | 2 КБ |
| Превью для мессенджеров | 1 | 1200 × 630 px | 120 КБ |
Итого около 1,6 МБ на все изображения страницы, при этом на первом экране телефона грузится только одна картинка на 150 КБ. Для сравнения: если загрузить те же фото прямо с телефона без обработки, по 3–5 МБ каждое, страница весила бы больше 60 МБ.
Частые ошибки с размерами изображений
- Загружать фото прямо с телефона. 4000 px и 5 МБ там, где нужно 1200 px и 150 КБ.
- Брать картинки из мессенджеров и соцсетей. Они уже сжаты, и на сайте станут мыльными.
- Одна горизонтальная картинка на все экраны. На телефоне главный объект обрезается.
- Разные пропорции в одной сетке. Каталог выглядит неряшливо.
- Текст, вшитый в картинку. На телефоне он становится нечитаемо мелким, поисковик его не видит. Текст лучше делать текстом поверх изображения.
- Логотип в JPEG с белым фоном. На цветной шапке появляется белый прямоугольник.
- Нет картинки превью. Ссылка в мессенджере выглядит пустой или с чужим изображением.
Мы делаем сайты, где под каждый блок готовят свои версии изображений для компьютера и телефона, а страницы быстро грузятся на мобильном интернете. Если хотите проверить свой сайт или обсудить новый, оставьте контакты.
Частые вопросы
Какой размер фото нужен для сайта?
Зависит от места на странице. Для фото на весь экран — 1920–2560 px по ширине, для картинки в тексте — 1200–1600 px, для карточки в сетке — 800–1000 px. Правило: ширина блока на экране × 2.
Какой размер картинки для первого экрана сайта?
На компьютере — 1920 × 1080 – 2560 × 1440 px в пропорции 16:9. Для телефона нужна отдельная вертикальная версия 1080 × 1350 или 1080 × 1920 px, иначе главный объект обрежется.
Почему картинки на сайте размытые?
Чаще всего исходник меньше, чем блок, в котором он показывается, или картинку брали из мессенджера, где она уже сжата. Загрузите изображение примерно в два раза шире блока и из оригинала, а не из пересланного файла.
Сколько должна весить картинка на сайте?
Ориентир — до 200–300 КБ для главной картинки первого экрана и 50–250 КБ для остальных. Сохраняйте фото в WebP с качеством 75–85%, это обычно уменьшает вес в несколько раз без заметной потери качества.
Какой размер фавиконки нужен для Яндекса?
Яндекс рекомендует 120 × 120, 32 × 32 или 16 × 16 px, а лучше SVG. Значок 120 × 120 px или в SVG выглядит чётче в результатах поиска и сервисах Яндекса.
Какой размер картинки для превью ссылки?
Стандарт — 1200 × 630 px. Важное держите в центре, потому что разные мессенджеры и соцсети обрезают края по-разному.
10+ лет делаю сайты и запускаю рекламу, вместе с командой запустили больше 500 проектов. Пишу о том, что проверили на практике.
Задать вопрос в Telegram →
