Изменение размера изображений: пиксели, пропорции и DPI

Пиксели, размеры и размер файла

Цифровое изображение — это сетка пикселей. Его размеры, например 4000 × 3000, показывают число пикселей по горизонтали и по вертикали; их произведение — количество пикселей, в данном случае 12 миллионов (12 мегапикселей). При изменении размера эта сетка заменяется новой, и каждый новый пиксель вычисляется по старым. Этот процесс называется передискретизацией (ресемплингом).

Количество пикселей растёт пропорционально квадрату длины сторон: если уменьшить ширину и высоту вдвое, останется четверть пикселей. Поэтому уменьшение размеров в пикселях часто сильнее всего сокращает файл, хотя роль играют и формат, и настройка качества, и количество мелких деталей. Чтобы показать или отредактировать изображение, программы декодируют его в несжатые пиксели — обычно по 4 байта на пиксель, — поэтому фотографии на 12 мегапикселей требуется около 48 МБ памяти, каким бы маленьким ни был файл.

Сохраняйте пропорции или сначала обрезайте

Соотношение сторон — это отношение ширины к высоте: у 4000 × 3000 оно 4:3, у 1920 × 1080 — 16:9. Если его сохранять, вы задаёте одну сторону, а вторая подстраивается, поэтому фотография 4000 × 3000, уменьшенная до ширины 1200 пикселей, станет 1200 × 900. Если же задать обе стороны произвольно, изображение с другим соотношением сторон растянется или сплющится, и круги превратятся в овалы.

Чтобы получить точный размер другой формы без искажений, сначала обрежьте изображение до нужного соотношения сторон, а затем измените размер. При пакетной обработке вертикальных и горизонтальных фотографий с фиксированной шириной вертикальные снимки получатся высокими: фотография 3000 × 4000 при ширине 1200 пикселей станет 1200 × 1600.

Уменьшение и увеличение изображений

При уменьшении изображения каждый новый пиксель должен обобщать несколько исходных. Быстрый метод, который берёт лишь несколько соседних пикселей, при сильном уменьшении пропускает детали, и это проявляется в виде зубчатых краёв и мерцающих узоров (алиасинга или муара) на ткани, тонких линиях и тексте. Более качественная передискретизация учитывает больше исходных пикселей. Инструмент LeedyBox «Изменение размера изображений» уменьшает изображение средствами браузера пошагово, каждый раз вдвое, и на каждом шаге усредняет соседние пиксели — так результат получается более гладким. Сильно уменьшенные изображения всё равно могут выглядеть слегка мягкими; LeedyBox не повышает их резкость.

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

DPI, PPI и размер при печати

DPI (точек на дюйм), а точнее PPI (пикселей на дюйм), — это число, которое хранится в некоторых файлах изображений. Оно сообщает программам печати и вёрстки, каким размером печатать пиксели, но сами пиксели не меняет. Размер при печати в дюймах = пиксели ÷ PPI (для перевода в сантиметры умножьте на 2,54).

Если изменить только значение DPI, изменится размер при печати, но пиксели останутся прежними, поэтому на экране изображение будет выглядеть так же. Для чёткой печати нужно достаточно пикселей: для отпечатка 6 × 4 дюйма при 300 PPI требуется 1800 × 1200 пикселей. Для фотографий, которые рассматривают вблизи, часто рекомендуют около 300 PPI; для больших отпечатков, на которые смотрят издалека, можно меньше. LeedyBox не сохраняет значение DPI оригинала, поэтому задайте размер отпечатка при печати.

Как выбрать размеры для веб-страниц и экранов

На веб-странице важна ширина, с которой изображение отображается. Макеты измеряются в CSS-пикселях, а экраны высокой плотности используют два и более физических пикселя на один CSS-пиксель в каждом направлении. Поэтому изображению, показанному шириной 600 CSS-пикселей, нужно около 1200 пикселей, чтобы выглядеть полностью чётким на дисплее «2×», а фотография шириной 4000 пикселей на том же месте впустую расходует трафик и память.

Измерьте наибольшую ширину отображения в вашем макете, например с помощью инструментов разработчика в браузере. Атрибуты srcset и sizes позволяют предложить одну и ту же картинку в нескольких вариантах ширины, например 600, 1200 и 1800 пикселей, и браузер загрузит тот, что подходит экрану. Если форма загрузки, интернет-магазин или социальная сеть требует определённых размеров, сверьтесь с их актуальной документацией, потому что такие требования различаются и меняются.

Выбор формата и пакетное изменение размера в LeedyBox

После изменения размера выберите формат в зависимости от содержимого. Фотографии обычно занимают меньше всего места в JPG или WebP. Скриншотам, логотипам и изображениям с прозрачностью подходит PNG или WebP, который тоже поддерживает прозрачность. JPG не умеет хранить прозрачность, поэтому прозрачные области становятся белыми, а фотография, сохранённая в PNG, может оказаться больше исходного JPG. Подробнее — в руководстве JPG, PNG, WebP или AVIF.

Инструмент «Изменение размера изображений» от LeedyBox обрабатывает сразу много изображений в вашем браузере, не загружая их на сервер:

• Выберите «В пикселях» или «В процентах» (от 1 до 400%). Если включён параметр «Сохранять пропорции», каждое изображение сохраняет собственные пропорции.
• Изображения меньше целевого размера не увеличиваются, если вы не отключите этот параметр.
• Вариант «Как у оригинала» сохраняет JPG, PNG и WebP в исходном формате, а GIF, BMP и AVIF сохраняет в PNG. Для JPG и WebP используется качество 90, если вы его не измените.
• Ориентация, записанная камерой, применяется к изображению, метаданные не копируются, а два и более результата можно скачать одним ZIP-файлом.

Чтобы сделать файлы ещё меньше, воспользуйтесь инструментом «Сжатие изображений» и прочитайте руководство «Как работают настройки сжатия изображений».

Часто задаваемые вопросы