Compress WebP on Mac

The deploy folder holds 120 WebP heroes exported at 3840 px wide. Lighthouse flags LCP because each file is still 900 KB despite the WebP label. WebP is efficient, but oversized sources and quality 95 exports behave like bloated PNG files with a different extension. Resize to layout width, then tune quality.

Treat existing WebP files like any other raster format: inspect pixel dimensions first, then encoder settings. Renaming a huge PNG export to .webp without re-encoding does not magically shrink bytes.

When WebP compression matters

WebP supports lossy and lossless modes. Marketing sites use lossy WebP for photos and heroes; UI assets with transparency may use lossless WebP or stay PNG when editors require it.

Scenario	Typical fix
Hero still over 500 KB	Reduce width to 2x CSS size; lower quality to 80 to 85
Icons with alpha	Try lossless WebP or keep PNG after oxipng
Mixed CMS uploads	Pair WebP with JPEG fallback in markup
Email attachments	Convert to JPEG; many clients ignore WebP

See PNG to WebP on Mac for the conversion workflow from design exports. For the broader format picture, read how to compress images on Mac .

Quality settings for WebP

Lossy WebP quality maps differently from JPEG sliders in Preview. In cwebp, -q runs from 0 to 100; 80 to 85 is a common web range after proper resize.

Content type	Quality starting point
Photo hero	80 to 85
Blog inline photo	75 to 82
Flat illustration	85 to 90 or lossless
Screenshot with text	82 to 88; verify edges

Read lossy vs lossless compression before you pick lossless WebP for every asset. Lossless helps transparency and flat UI; photos usually benefit from lossy encoding at modest quality.

Resize before encoding

Preview does not export WebP, but it shrinks PNG or JPEG sources before conversion:

1. Open the source in Preview.
2. Choose Tools → Adjust Size… and set width to roughly 2x the CSS display width.
3. Export as PNG or JPEG, then convert to WebP in Terminal.

A 3840 px PNG converted to WebP without resize stays heavy. Match export width to the layout in your CMS or Figma frame before you run cwebp.

Compress with cwebp in Terminal

Install WebP tools through Homebrew:

brew install webp
cwebp -q 82 -m 6 input.png -o output.webp

For an existing WebP you want smaller, decode to PNG, resize in Preview, then re-encode:

dwebp input.webp -o temp.png
# resize temp.png in Preview, then:
cwebp -q 80 -m 6 temp.png -o output.webp

The -m flag controls encoder effort; higher values squeeze a few more bytes at the cost of CPU time during batch jobs.

Online WebP tools upload your heroes to a third party. For unreleased campaigns and staging assets, compress locally. See are online file compressors safe for what upload actually means.

Batch WebP folders

Loop cwebp over a folder of resized PNG files:

mkdir webp-out
for f in *.png; do cwebp -q 82 -m 6 "$f" -o "webp-out/${f%.png}.webp"; done

Write quality and max width in your deploy README so the next sprint does not reintroduce 3840 px sources. Mixed folders of PNG, JPEG, and HEIC still need separate steps or a dedicated app.

Compare one hero in your browser network panel before and after. A 40% byte drop is common when resize precedes encoding.

Name output files with width suffixes (for example hero-1920.webp) so static site generators and WordPress imports pick up the correct variant without manual renaming during deploy night.

When a WebP already looks soft, lowering quality further will not help. Return to the PNG or JPEG master, resize again, and re-encode rather than chaining lossy passes on the same WebP file.

Using GetCompress

GetCompress handles mixed image folders on your Mac without upload. Useful when build pipelines receive PNG from design and must ship WebP to production.

• Drop a folder of sources and set max width, WebP quality, and output format in one panel.
• Apply a saved preset (for example “web WebP 1920px q82”) instead of retyping cwebp flags each deploy.
• Preview before export when text overlays and gradients must stay smooth.
• Batch compress WebP on Mac alongside JPEG fallbacks for <picture> elements.
• Convert HEIC or PNG to WebP in the same pass when the site template expects modern formats.

GetCompress does not replace cwebp in a fully scripted CI job. It pays off when marketers and designers compress assets locally before handoff to engineering. Folder monitoring can watch an export directory and produce WebP automatically when Figma drops fresh PNG files into a shared folder.

Keep a JPEG fallback generation step in your workflow for email and older browser paths discussed in PNG to WebP on Mac .