Resize Image Pixels on Mac

The blog template displays heroes at 960 px CSS width, yet every export from design arrives at 2880 px. Readers never see those extra pixels, but they download them on every page load. Resize image pixels to match real display size before you compress or convert format.

Why pixel dimensions matter

Image file size scales with pixel count. Doubling width and height roughly quadruples the area, and lossy formats like JPEG and WebP encode every one of those pixels.

Mistake	Result
Export at artboard 3x	File 9x heavier than 1x display need
Keep camera full resolution	Email and portals reject uploads
Resize only height in CSS	Browser still downloads full width
Upscale a small export	Soft edges without real detail gain

Pixel dimensions are not the same as DPI metadata. A 1920 px wide image tagged at 72 or 300 DPI still occupies 1920 px on screen when the layout uses pixel width. See how to compress images on Mac for format choice after you settle on size.

The display-size rule

Export at roughly 2x the CSS width for high-DPI screens, not at the raw capture size of your monitor or camera.

Where it shows	Export width hint
Blog hero at 960 px CSS	1600 to 1920 px
Email inline	600 to 800 px
Open Graph / social card	Match platform spec, often 1200 px wide
Thumbnail in deck	1280 to 1920 px

Check the frame in Figma, the CMS template, or the email builder before you batch export. One saved width per project beats guessing each sprint.

When you need both smaller bytes and modern delivery, resize first then convert. PNG to WebP on Mac assumes you already matched pixel width to layout.

Resize in Preview

Preview is the fastest built-in path for one or a few files:

1. Open the image in Preview.
2. Choose Tools → Adjust Size…
3. Set Width or Height in pixels; leave Scale proportionally checked unless you intentionally crop.
4. Choose File → Export… and pick JPEG, PNG, or keep the current format.
5. Save as a new file and compare dimensions in Tools → Show Inspector.

For HEIC from an iPhone, Preview opens many files directly. Photos export works well for camera rolls when you need JPEG at a fixed width.

Zoom on text and fine lines after resize. Shrinking a screenshot below its display width makes type unreadable.

Batch resize with sips

Open Terminal, cd to your folder, and resize every JPEG to a max edge of 1920 px:

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

Resize PNG without touching originals:

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

Set exact width (height scales proportionally):

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

sips is built in and fast. It does not remember presets, and mixed folders of PNG, JPEG, and HEIC still need separate commands or a dedicated app.

Resizing reduces pixel count but does not always shrink lossless PNG as much as recompression. Read lossy vs lossless compression when you choose between keeping PNG and converting to JPEG after resize.

Online resize tools upload your assets. For unreleased mockups and location photos, keep processing local. See are online file compressors safe for what upload actually means.

Aspect ratio and upscaling

Lock aspect ratio unless the layout requires a fixed crop. Distorted logos and product shots erode trust faster than a few extra kilobytes.

Task	Safer approach
Fit a hero slot	Crop in design tool, then export at target width
Fix wrong orientation	Rotate in Preview before resize
Need larger than source	Re-export from vector or RAW master; avoid upscaling
Mixed portrait and landscape	Separate presets per orientation

Never upscale a JPEG and re-compress hoping for sharper detail. You add artifacts without recovering information that was never in the file.

Using GetCompress

GetCompress handles mixed image folders on your Mac without upload. Useful when handoff folders mix PNG, JPEG, HEIC, and WebP at different sizes.

• Drop a folder and set max width or max height in one panel.
• Apply a saved preset (for example “blog 1920px”) instead of retyping sips commands each week.
• Preview before export when UI screenshots must stay sharp at the new width.
• Batch resize image pixels on Mac and convert format in the same pass when the CMS expects JPEG or WebP.
• Pair with folder monitoring when design exports land in a watch directory every sprint.

GetCompress does not replace Preview for a quick one-off. It pays off when the same width returns across dozens of files. For bulk folder workflows, see batch resize images on Mac .

Document the chosen pixel width in your project README so the next person on the team does not reintroduce 4000 px exports by accident.