# Разрешение, размеры и DPI: как не промахнуться с картинкой

Источник / Source: https://picwin.co/blog/razreshenie-razmery-i-dpi
Язык / Language: ru
Рубрика / Topic: Технологии
Автор / Author: Редакция Picwin
Опубликовано / Published: 2026-03-10T00:00:00.000Z
Обновлено / Updated: 2026-09-03T11:17:26.468Z
Слов / Words: 1336 · Чтение / Reading: 7 min
Обложка / Cover: https://picwin.co/api/picwin/blog-images/8aacb65e004041a575dfde577fa3dcc609c61eb728ead24019e0f1e19c63fbd7.webp
Переводы / Translations: en: https://picwin.co/en/blog/image-size-resolution-and-dpi, kk: https://picwin.co/kk/blog/suret-olshemi-jane-dpi, pt: https://picwin.co/pt/blog/tamanho-resolucao-e-dpi, uz: https://picwin.co/uz/blog/tasvir-olchami-va-dpi

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

---

**Кратко**

Размер изображения — это пиксели, и только они. Точки на дюйм появляются в тот
момент, когда пиксели ложатся на бумагу: физический размер равен пикселям,
делённым на ppi. Для экрана считайте ширину слота в пикселях с учётом плотности
экрана, для печати — миллиметры, делённые на 25,4 и умноженные на 300.

Половина вопросов о размере изображения снимается одной мыслью: у файла нет
сантиметров. В файле лежит сетка пикселей — например, 4000 × 3000. Сантиметры
и дюймы появляются позже, когда эту сетку показывают на конкретном устройстве
или переносят на конкретную бумагу.

## Чем разрешение отличается от размера?

Разрешение файла — это количество пикселей по горизонтали и вертикали.
4000 × 3000 — это 12 миллионов пикселей, те самые «12 мегапикселей». Больше в
файле ничего о величине не сказано.

Точки на дюйм (dpi) и пиксели на дюйм (ppi) — это не свойство картинки, а
плотность, с которой её собираются печатать или показывать. Строго говоря, ppi
относится к изображению и экрану, dpi — к печатающему устройству, но в быту
и в требованиях типографий эти буквы используют как синонимы.

Внутри JPEG или TIFF действительно записано число ppi, но это всего лишь
подсказка редактору. Смена подсказки с 72 на 300 не добавляет в файл ни одного
пикселя: меняется только размер, который редактор напечатает на бумаге.

Как проверить за десять секунд

Откройте свойства файла и найдите строку с двумя числами через знак умножения.
Это и есть всё, чем вы располагаете. Число «300 dpi» без пикселей рядом не
значит ничего.

## Как перевести миллиметры в пиксели?

Формула одна, и она короткая:

**пиксели = миллиметры ÷ 25,4 × ppi**

Двадцать пять и четыре десятых — это количество миллиметров в дюйме, величина
постоянная. Отсюда получается вся таблица размеров под печать при стандартных
300 ppi.

Формат
Миллиметры
Пиксели при 300 ppi

Визитка
85 × 55
1004 × 650

Фото 10 × 15
100 × 150
1181 × 1772

A6, открытка
105 × 148
1240 × 1748

A5, флаер
148 × 210
1748 × 2480

A4, лист
210 × 297
2480 × 3508

A3, афиша
297 × 420
3508 × 4961

Обратная задача решается так же: делите пиксели на ppi и получаете дюймы,
умножаете на 25,4 — миллиметры. Кадр 2000 × 1500 при 300 ppi — это
169 × 127 мм, чуть меньше A5. Тот же кадр при 150 ppi — уже 339 × 254 мм,
почти A4, но с вдвое меньшей плотностью деталей. Подробный разбор того, когда
150 ppi достаточно, а когда нет, — в статье
[о подготовке изображения к печати](/blog/podgotovka-izobrazheniya-k-pechati).

## Сколько пикселей нужно экрану?

Столько, сколько занимает картинка на странице, умноженное на плотность экрана.

Вёрстка меряется в CSS-пикселях, а физических точек в экране обычно больше:
телефоны и ноутбуки с «ретиной» показывают две или три точки на один
CSS-пиксель. Эту величину браузер называет `devicePixelRatio`. Если картинка
занимает 800 CSS-пикселей ширины, то на экране с плотностью 2 её реальная
ширина — 1600 пикселей.

Отсюда практическое правило: **ширина файла = ширина слота × 2**. Дальше
второго множителя гнаться незачем — разница между 2× и 3× глазом почти не
ловится, а вес растёт как площадь, то есть в 2,25 раза. Что делать с этим
весом, разобрано в статье
[о быстрых картинках для сайта](/blog/bystrye-kartinki-dlya-sayta).

## Какие пропорции выбирать?

Пропорция важнее абсолютного размера: размер уменьшить легко, а вот сменить
пропорцию можно только обрезкой, и обрезка съедает композицию.

Пропорция
Где встречается

1:1
превью каталога, аватары, карточки товара

4:5
вертикальная лента, мобильный пост

3:2
классический кадр камеры, фотопечать

16:9
обложки, слайды, видеокадр

1,91:1
ссылка в соцсетях (og:image)

9:16
вертикальное видео и сторис

Посчитайте, сколько теряется при пересборке кадра. Снимок 3:2 в формате 4:5
сохраняет по ширине долю 0,8 ÷ 1,5 = 0,53 — то есть уходит почти половина
ширины кадра. Поэтому сюжет, который заведомо пойдёт и в ленту, и на обложку,
снимают или генерируют с запасом по краям.

![Таблица-шкала: задача, пропорция кадра и нужное число пикселей](/api/picwin/blog-images/9d323793024efdff8a4f5dda8bef7b20dfa5fe1b5cfe1db0a532d409c0adc95d.webp)

Пиксели считаются от задачи, а не наоборот: сначала слот, потом плотность.

## Какие размеры просят площадки?

Требования площадок меняются, поэтому единственный надёжный источник —
их собственная справка. На момент публикации официальные документы говорят
следующее.

Площадка
Требование

Ссылка в соцсетях
от 1200 × 630, минимум 200 × 200, файл до 8 МБ

Обложка YouTube
3840 × 2160, минимальная ширина 640, JPG или PNG

Обложка статьи Picwin
1200 × 675

Превью работы Picwin
квадрат 1024 × 1024

Первые две строки взяты из
[требований к изображениям Open Graph](https://developers.facebook.com/docs/sharing/webmasters/images/)
и
[справки YouTube о значках видео](https://support.google.com/youtube/answer/72431);
там же названы ограничения по весу файла — 8 МБ для превью ссылки и 2 МБ для
значка, загружаемого с телефона. Две последние строки — наши собственные
размеры, они объявлены в разметке сайта.

## Как выбрать размер под задачу?

-

### Определите конечную поверхность

Экран, печать или и то и другое. Пока это не решено, число пикселей взять
неоткуда.

-

### Измерьте слот

Для экрана — ширина области в CSS-пикселях. Для печати — ширина изделия в
миллиметрах.

-

### Умножьте на плотность

Для экрана — на 2. Для печати — переведите миллиметры по формуле выше при
300 ppi, а для крупных форматов возьмите меньшую плотность.

-

### Округлите вверх до разумного

Лишние двести пикселей ничего не стоят, а вот нехватка двухсот заставит
увеличивать картинку.

-

### Выберите пропорцию под самую тесную из площадок

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

-

### Сохраните исходник

Оригинал в максимальном размере — единственный способ выпустить потом другой
размер без потерь.

## Что происходит при уменьшении?

Уменьшение — тоже пересчёт, просто менее болезненный. Из четырёх соседних
пикселей получается один, и мелкие детали усредняются: тонкие линии бледнеют,
текст на вывеске в кадре перестаёт читаться, шум превращается в равномерную
серость.

Отсюда два правила. Первое: уменьшать всегда лучше в один шаг, а не лесенкой
по 10 % — каждый шаг усредняет заново. Второе: после сильного уменьшения кадру
нужна лёгкая резкость, иначе он выглядит вялым; но резкость добавляется
последней операцией, уже в конечном размере, иначе сжатие превратит её в ореолы
вдоль контуров.

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

## Можно ли увеличить маленькую картинку?

Увеличить — да, добавить деталей — нет. Обычная интерполяция вычисляет новые
пиксели из соседних: границы становятся мягче, текстура превращается в кашу.
Нейросетевой апскейл выглядит лучше, но он не восстанавливает утраченное, а
дорисовывает правдоподобное: волосы, буквы и мелкие узоры он выдумывает.

Практический предел — примерно двукратное увеличение для экрана, при условии
что картинку не будут рассматривать вплотную. Для печати любое увеличение
проверяйте на 100 %: экран показывает картинку уменьшенной и врёт о резкости.

Три ошибки, которые стоят дороже всего

Выставить в свойствах файла «300 dpi» и решить, что картинка готова к печати.
Обрезать единственный исходник под одну площадку. Заказать генерацию квадратом,
когда нужна обложка 16:9.

## Что это значит для работы с фотостоком

Когда вы берёте готовое изображение, размер уже определён за вас — поэтому
смотреть на него нужно до покупки, а не после. Работы Picwin создаются
нейросетями по брифам каталога; сторона превью на витрине — 1024 пикселя, а
конечный размер работы указан на её странице.

[ТехникаКадры про технику, интерфейсы и данные — там, где чаще всего нужны и широкий, и
квадратный варианты.
Смотреть работы](/category/technology)[Мокапы и шаблоныМокапы и подложки: для них пропорция критичнее всего, потому что кадр потом
режут под макет.
Смотреть работы](/category/mockups)

**Главное**

- Размер файла — это пиксели; ppi появляется только вместе с физическим носителем.

- Миллиметры в пиксели: разделить на 25,4 и умножить на плотность.

- Для экрана берите ширину слота, умноженную на 2.

- Пропорцию выбирают заранее: сменить её можно только обрезкой.

- Увеличение не добавляет деталей — ни обычное, ни нейросетевое.

Нужен кадр в нужном размере

В мини-аппе Picwin изображение создаётся под задание с заранее известной
пропорцией — и приходит сразу пригодным для витрины.

[Открыть мини-апп](/partners)

### Какой размер нужен для баннера на сайте?

Ширину баннера в CSS-пикселях умножьте на 2. Баннер во всю ширину экрана
ноутбука — это примерно 1440 CSS-пикселей, то есть файл 2880 пикселей шириной.

### Что такое 300 dpi и всегда ли они нужны?

Это 300 пикселей на дюйм бумаги — стандарт для изданий, которые рассматривают
с расстояния вытянутой руки. Для плаката, который смотрят с трёх метров,
хватает заметно меньшей плотности.

### Сколько мегапикселей нужно для печати A4?

2480 × 3508 = 8,7 мегапикселя при 300 ppi. Любая современная камера и почти
любая генерация в высоком разрешении это перекрывают.

### Почему картинка на телефоне выглядит мыльной?

Скорее всего, файл отдан в размере CSS-слота без учёта плотности экрана:
телефон растягивает 400 пикселей на 800 физических точек.

### Можно ли поменять пропорцию без потерь?

Нет. Пропорция меняется обрезкой или дорисовкой полей. Обрезка теряет часть
кадра, дорисовка добавляет то, чего не было.

### В каком размере хранить оригинал?

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

### Какой размер выбрать, если площадка не названа?

Возьмите 2000 пикселей по длинной стороне: этого хватает и на полноэкранный
показ, и на печать до A5, а вес остаётся умеренным.

Дальше по теме: [форматы файлов и что когда
выбирать](/blog/formaty-izobrazheniy-jpeg-png-webp-avif) и [подготовка картинок
для быстрого сайта](/blog/bystrye-kartinki-dlya-sayta). Готовые работы —
в [каталоге](/catalog).