Изменение размера пикселей изображений на Mac: 3 способа

Шаблон блога отображает героев с шириной 960 px в CSS, но экспорт из дизайн-систем часто приходит с размером 2880 px. Читатели не видят этих дополнительных пикселей, но скачивают их при каждой загрузке страницы. Изменяйте размер до реального размера отображения перед сжатием или конвертацией формата.

Правило размера отображения

Экспортируйте примерно в 2 раза шире CSS-размера для экранов с высокой плотностью пикселей, а не в исходном размере захвата монитора или камеры. Пиксельные размеры не равны метаданным DPI. Изображение шириной 1920 px с тегом 72 или 300 DPI всё равно занимает 1920 px, когда макет использует пиксельную ширину.

Проверьте фрейм в Figma, шаблон CMS или конструктор email перед пакетной обработкой. Выбор формата после изменения размера описан в статье как сжимать изображения на Mac .

Способ 1: GetCompress

Лучше всего подходит для: Смешанных папок, повторяющихся ширин и конвертации с изменением размера за один проход.

1. Перетащите одно изображение или папку в GetCompress .
2. Установите максимальную ширину или максимальную высоту (например, 1920 px для героев блога).
3. Выберите выходной формат, если CMS ожидает JPEG или WebP.
4. Предпросмотрите скриншот интерфейса с новой шириной, затем экспортируйте рядом с оригиналами.
5. Сохраните пресет, например “blog 1920px”, чтобы использовать его в следующий раз.

Обработка происходит на вашем Mac. Для пакетных рабочих процессов с папками см. пакетное изменение размера изображений на Mac .

Способ 2: Изменение размера в Preview

Лучше всего подходит для: Одного или нескольких файлов со встроенными инструментами.

1. Откройте изображение в Preview.
2. Инструменты → Изменить размер…
3. Установите Ширину или Высоту в пикселях; оставьте флажок Сохранять пропорции включённым, если не нужно обрезать изображение намеренно.
4. Файл → Экспорт… и выберите JPEG, PNG или сохраните текущий формат.
5. Сохраните как новый файл и проверьте размеры в Инструменты → Показать инспектор.

После изменения размера увеличьте масштаб текста и мелких линий. Уменьшение скриншота ниже его ширины отображения делает текст нечитаемым.

Ограничение: Нет сохранённых пресетов для десятков файлов.

Способ 3: Пакетная обработка с sips

Лучше всего подходит для: Циклов терминала в папке с JPEG или PNG.

mkdir out
for f in *.jpg; do sips -Z 1920 "$f" --out "out/$f"; done

Точная ширина (высота масштабируется):

sips --resampleWidth 1920 input.jpg --out output.jpg

Ограничение: Смешанные папки PNG, JPEG и HEIC всё ещё требуют отдельных команд или выделенного приложения. Онлайн-инструменты изменения размера загружают ваши активы; для неопубликованных макетов оставляйте обработку локальной. См. безопасны ли онлайн-компрессоры файлов .

Соотношение сторон и увеличение

Никогда не увеличивайте JPEG и не сжимайте его снова в надежде получить более чёткие детали. Вы добавляете артефакты, не восстанавливая информацию, которой изначально не было в файле.

Когда достаточно Preview

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

GetCompress также полезен, когда одна и та же ширина возвращается для десятков файлов или когда вы одновременно конвертируете формат. Зафиксируйте выбранную пиксельную ширину в README проекта, чтобы следующий разработчик не вернул экспорт в 4000 px. Для доставки WebP после изменения размера см. PNG в WebP на Mac .