Convert PNG to WebP on Mac

That hero PNG is 1.8 MB but displays at 960 px wide on the page. WebP often cuts weight sharply when you resize first and pick a sensible quality level. Modern browsers load WebP efficiently; older ones still need a JPEG or PNG fallback in your HTML. Treat WebP as the optimized primary asset, not the only asset you ship. Lighthouse and Core Web Vitals reward smaller heroes, but accessibility and email workflows still expect a JPEG or PNG path you can attach without conversion.

Why WebP for websites

WebP supports lossy and lossless modes. For marketing heroes and blog figures exported as PNG from design tools, lossy WebP at quality 80 to 85 is usually enough.

Format	Role on the site
WebP	Primary delivery for supporting browsers
JPEG or PNG	Fallback in <picture> or server rules
AVIF	Optional next step for even smaller heroes

Ship fallback assets in HTML. Do not rely on WebP alone unless analytics confirm your audience browsers.

Designers export PNG from Figma; developers convert before deploy. Preview does not export WebP, so conversion happens in Terminal or a dedicated app.

Measure before and after on one hero image with your browser network panel. A 40% byte drop on a 1.8 MB PNG is common when you resize to CSS width first.

The display-size rule for WebP

Oversized PNG in produces oversized WebP out. Match export width to CSS layout.

CSS display width	Export width (2x screens)
480 px column	960 px
960 px hero	1920 px
Full-bleed 1440 px layout	2880 px max (often 1920 is enough)

A 4000 px PNG converted to WebP without resize still punishes mobile Lighthouse scores. Resize in Preview or during conversion with cwebp -resize.

Check one output on a phone and a Retina laptop before you batch the whole asset folder.

Hero images with dark gradients show banding first. If banding appears at quality 80, try 85 on those files only while keeping 80 on flat UI screenshots.

Convert with cwebp

Open Terminal (Applications → Utilities → Terminal). Install webp tools through Homebrew (install Homebrew first if brew is not found):

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

Batch every PNG in a folder:

for f in *.png; do cwebp -q 85 "$f" -o "${f%.png}.webp"; done

Flag	Plain meaning
-q 85	Quality (try 80 to 90 for heroes)
-resize 1920 0	Max width 1920 px, height scales
-lossless	Larger files; use only for UI with flat colors

If stakeholders still need JPEG for email or legacy CMS fields, see PNG to JPG on Mac for the non-WebP path.

cwebp is script-friendly. It does not preview output or remember project presets across repos.

See how to compress images on Mac when the deploy folder mixes JPEG, PNG, and HEIC alongside heroes you want as WebP.

Resize in Preview first

When you already resized in the design tool, skip this step. When the PNG is full canvas export:

1. Open in Preview.
2. Choose Tools → Adjust Size… to the width your CSS uses (times 2 for Retina if needed).
3. Run cwebp on the resized file.

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

Export from Preview to a resized/ folder so you keep the original PNG from design untouched.

Run cwebp from a Makefile or npm script in your static site repo so designers only drop PNG files into assets/src/ and CI emits WebP before deploy.

Compare byte size of WebP and fallback JPEG in the network panel after deploy. If savings are under 15%, revisit resize width before you lower quality further.

Regenerate WebP when the source PNG changes in design. Stale WebP files with old filenames are a common reason hero images look soft after a rebrand.

Clear CDN cache after you replace WebP assets so visitors do not keep loading the previous release bytes.

Using GetCompress

GetCompress convert PNG to WebP on Mac without installing cwebp or maintaining shell loops in each repo.

• Drop PNG exports into GetCompress, choose WebP output, set quality and max width, and export before deploy.
• Preview heroes and UI crops when banding or text softness would show on dark backgrounds.
• Save a preset per site (for example “marketing WebP 1920 q85”) for repeat releases.
• Batch an entire assets/ folder when design hands off twenty PNG figures at once.
• Process locally when previews contain unreleased product UI.

Keep a JPEG or PNG fallback in site markup for browsers that skip WebP. GetCompress does not replace your <picture> element; it produces the optimized WebP files that slot into it. For reverse conversion when a client asks for JPEG, see WebP to JPG on Mac .

If stakeholders still need JPEG for email or legacy CMS fields, see PNG to JPG on Mac for the non-WebP path.

Store WebP and fallback assets in parallel folders (webp/ and fallback/) so deploy scripts never pick up the wrong file extension.

Commit both fallback and WebP paths in the same deploy so CI uploads stay in sync.

Document the quality and max-width preset in your repo README so the next release uses the same WebP settings as the last launch page.