Кратко

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

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

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

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

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

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

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

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

пиксели = миллиметры ÷ 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 достаточно, а когда нет, — в статье о подготовке изображения к печати.

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

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

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

Отсюда практическое правило: ширина файла = ширина слота × 2. Дальше второго множителя гнаться незачем — разница между 2× и 3× глазом почти не ловится, а вес растёт как площадь, то есть в 2,25 раза. Что делать с этим весом, разобрано в статье о быстрых картинках для сайта.

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

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

Пропорция Где встречается
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 — то есть уходит почти половина ширины кадра. Поэтому сюжет, который заведомо пойдёт и в ленту, и на обложку, снимают или генерируют с запасом по краям.

Таблица-шкала: задача, пропорция кадра и нужное число пикселей

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

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

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

Площадка Требование
Ссылка в соцсетях от 1200 × 630, минимум 200 × 200, файл до 8 МБ
Обложка YouTube 3840 × 2160, минимальная ширина 640, JPG или PNG
Обложка статьи Picwin 1200 × 675
Превью работы Picwin квадрат 1024 × 1024

Первые две строки взяты из требований к изображениям Open Graph и справки YouTube о значках видео; там же названы ограничения по весу файла — 8 МБ для превью ссылки и 2 МБ для значка, загружаемого с телефона. Две последние строки — наши собственные размеры, они объявлены в разметке сайта.

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

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

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

  2. Измерьте слот

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Техника

Кадры про технику, интерфейсы и данные — там, где чаще всего нужны и широкий, и квадратный варианты.

Смотреть работыМокапы и шаблоны

Мокапы и подложки: для них пропорция критичнее всего, потому что кадр потом режут под макет.

Смотреть работы

Главное

  • Размер файла — это пиксели; ppi появляется только вместе с физическим носителем.
  • Миллиметры в пиксели: разделить на 25,4 и умножить на плотность.
  • Для экрана берите ширину слота, умноженную на 2.
  • Пропорцию выбирают заранее: сменить её можно только обрезкой.
  • Увеличение не добавляет деталей — ни обычное, ни нейросетевое.
Какой размер нужен для баннера на сайте?

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

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

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

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

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

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

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

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

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

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

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

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

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

Дальше по теме: форматы файлов и что когда выбирать и подготовка картинок для быстрого сайта. Готовые работы — в каталоге.