Melt guide

What's the best image format for the web (and how to export it on Mac)?

JPEG, PNG, WebP, AVIF, SVG — they each have a job. Here's how to pick the right one for the web and export it from your Mac.

4 min read

You’re building or maintaining a website and your images are too big, too slow, or just look wrong. Picking the right format is half the battle — the other half is exporting it efficiently. Here’s the practical version: which format for which job, and how to make it on macOS.

The shortlist

When to pick each

JPEG if you need universal compatibility or the destination is older. Quality 75–85 for web, 90+ for hero images.

PNG for screenshots, UI elements, illustrations with sharp edges, or anything with transparency. Don’t use PNG for photos — it’ll be 5× the size of an equivalent JPEG.

WebP for almost any photo on a modern site. Universal browser support (Chrome, Safari 14+, Firefox, Edge). Roughly 30% smaller than JPEG at the same quality.

AVIF for image-heavy sites where you control the CDN and serve modern formats. Around 50% smaller than JPEG. Still less broadly supported in tools outside browsers.

SVG for logos, icons, and diagrams. Tiny files, infinitely scalable, stylable with CSS. Not for photos.

The picture element pattern

Best practice for performance is <picture> with format fallback:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="...">
</picture>

Browsers grab the first format they support. You serve AVIF to capable browsers, WebP to most, JPEG to the rest.

Exporting on Mac — native

sips handles JPEG, PNG, HEIC, TIFF, and (on Sonoma+) WebP. For AVIF you’ll need ImageMagick:

brew install imagemagick
# JPEG
sips -s format jpeg -s formatOptions 85 photo.png --out photo.jpg
# PNG
sips -s format png photo.jpg --out photo.png
# WebP
sips -s format webp -s formatOptions 80 photo.jpg --out photo.webp
# AVIF
magick photo.jpg -quality 60 photo.avif

The faster way

Drag your masters into Melt, output to WebP (or JPEG), set quality, optionally resize. Run the same source through twice — once for WebP, once for JPEG fallback — and you’ve got everything for a <picture> element. Download Melt.

Web export in Melt

  1. Open Melt.
  2. Drag your image masters in.
  3. Set output to WebP, quality 80.
  4. Resize to your max display width (1600–2400 px is typical for hero images).
  5. Confirm "Strip metadata" is on.
  6. Click Compress.
  7. Repeat with output set to JPEG for fallback.

What you lose, what you keep

Lossy web formats (JPEG, WebP, AVIF) discard data. At sensible quality settings (JPEG 85, WebP 80, AVIF 60) the loss is invisible to viewers and the file-size savings are real. Stripped EXIF means visitors can’t see when or where the photo was taken — usually what you want for a public site. Keep your high-resolution masters somewhere separate; the web exports are derived files you can regenerate any time.

← All Melt tips