Melt guide

Optimise photos for a website on Mac

Heavy images are the single biggest reason websites feel slow. Here's how to optimise photos for the web on Mac.

5 min read

You added six product photos to a landing page and Lighthouse just dropped your Performance score to 42. Image weight is almost always the biggest single thing tanking a web page — Google’s HTTPArchive puts images at 40-50% of average page weight, more than CSS, JS, and fonts combined.

Why this happens

Cameras and phones save images at far more pixels and quality than any browser will ever display. A 4032px-wide photo getting rendered into a 1200px card is wasting 70% of its data. On top of that, raw JPEG quality from an iPhone is around 95 — which looks identical to quality 80 once you scale it down, but is twice the byte count.

The native way

sips ships with macOS and handles the basics:

sips -s format jpeg -s formatOptions 80 -Z 2000 hero.jpg —out web/hero.jpg

Two flags matter: -Z 2000 caps the longest edge at 2000px (perfect for most layouts), and formatOptions 80 is the visually-lossless sweet spot. A 12 MB photo becomes around 350 KB.

For a folder:

mkdir web && for f in *.jpg; do sips -s format jpeg -s formatOptions 80 -Z 2000 “$f” —out “web/$f”; done

For modern formats, install ImageMagick:

brew install imagemagick && magick input.jpg -quality 80 -resize 2000x output.webp

WebP is roughly 25-35% smaller than JPEG at the same visual quality. Every modern browser supports it.

The faster way

Download Melt — drag in a folder, set output and quality once, done.

  1. Download Melt and open it.
  2. Drag the photo folder in.
  3. Set output to JPEG at quality 80 (or WebP if you're shipping to modern browsers).
  4. Enable Resize and cap the longest edge at 2000px for desktop heroes, 1200px for cards.
  5. Click Compress. Output saves to a sibling folder.

EXIF strips automatically, which both reduces size by a few KB and removes location data that shouldn’t be on a public site.

How much smaller will it really get?

A typical iPhone photo from 12 MP to 48 MP source: 4-12 MB original, 300-600 KB after Melt at 2000px quality 80. A six-image hero gallery goes from 50 MB to 3 MB. Lighthouse score recovers, page LCP drops by seconds on slow connections, and your bounce rate quietly improves.

A note on srcset

Honestly — for a serious site, you want multiple sizes (1600, 1200, 800, 400) served via srcset, not one resized version. Run the batch four times at four widths, or wire it into your build pipeline. The point is: ship the right size to each device, not the biggest you have.

← All Melt tips