Skip to content

Convert PNG to WebP on Mac: 3 Methods

Convert PNG to WebP on Mac with GetCompress, cwebp, or a Preview resize first. Keep a JPEG or PNG fallback for older browsers.

By Petr Samokhin

That hero PNG is 1.8 MB but displays at 960 px wide. WebP often cuts weight when you resize first and pick a sensible quality. Modern browsers load WebP well; older ones still need a JPEG or PNG fallback in HTML. Treat WebP as the optimized primary asset, not the only file you ship.

Why WebP for websites

FormatRole on the site
WebPPrimary delivery for supporting browsers
JPEG or PNGFallback in <picture> or server rules
AVIFOptional next step for even smaller heroes

Lossy WebP at quality 80 to 85 is usually enough for marketing heroes. Preview does not export WebP, so conversion happens in an app or Terminal. Match export width to CSS layout (often 2x the display width for Retina). A 4000 px PNG converted without resize still hurts mobile scores.

Method 1: GetCompress

Best for: Design file folders and repeat releases without maintaining shell loops.

GetCompress image settings with WebP output, quality, and max width options
  1. Drop PNG exports into GetCompress .
  2. Choose WebP output.
  3. Set quality (for example High or Medium) and max width (often 1920 px).
  4. Preview a dark-gradient hero for banding, then export.
  5. Save a preset per site, for example “marketing WebP 1920 high”.

Processing stays on your Mac. Image jobs use quality and dimensions, not an exact target file size. GetCompress produces the WebP files; your <picture> markup still needs the fallback.

Method 2: cwebp in Terminal

Best for: Scripts, Makefiles, and CI.

brew install webp
cwebp -q 85 -resize 1920 0 hero.png -o hero-1920.webp

Batch:

for f in *.png; do cwebp -q 85 "$f" -o "${f%.png}.webp"; done
FlagPlain meaning
-q 85Quality (try 80 to 90 for heroes)
-resize 1920 0Max width 1920 px, height scales
-losslessLarger; use only for flat UI

Limitation: No preview UI or project presets across repos.

Method 3: Resize in Preview first

Best for: One oversized canvas when you will run cwebp next.

  1. Open the PNG in Preview.
  2. Tools → Adjust Size… to CSS width times 2 if needed.
  3. Save a copy to resized/, then run Method 2.

Resize before lossy conversion. Re-running cwebp at lower quality on an oversized source wastes visual budget on pixels nobody sees.

Limitation: Preview cannot write WebP itself.

Which method should you use

SituationStart here
Folder + presets + previewGetCompress
CI / scriptscwebp
One canvas, then TerminalPreview resize, then cwebp

Non-WebP path: PNG to JPG on Mac . Reverse: WebP to JPG on Mac . Mixed folders: how to compress images on Mac .

Check before you deploy

Compare WebP and fallback JPEG sizes in the network panel. If savings are under about 15%, revisit resize width before you lower quality. Regenerate WebP when the source PNG changes. Clear CDN cache after you replace assets.

When cwebp alone is enough

cwebp in CI can work when designers already drop correctly sized PNG files into assets/src/ and nobody needs a GUI.

GetCompress fits when marketing dumps twenty full-canvas PNG figures and you want one preset with preview. It does not replace your <picture> element or CDN workflow.

Related posts