Sizing and Compressing Photos for the Web

This is the highest-leverage technical fix available to a photographer, and it's entirely within your control — no plugin, no developer, no support ticket. It is also the one most often done wrong, because the instinct that serves you well everywhere else in your work — protect the quality of the file — is the exact instinct that makes a website slow.

The problem, in one number

A photo straight out of Lightroom at full export quality is commonly 4–8 MB. A gallery page with twenty of them is 100 MB or more. On a phone on mobile data that page takes the better part of a minute. Most visitors leave well before it finishes, and Google has measured all of it.

The same page, exported correctly, is 3–5 MB total and loads in a couple of seconds. On a normal screen, at normal viewing distance, nobody can tell the difference between the two versions. That is the entire trade, and it is not close.

Why a bigger file doesn't look better on screen

A screen can only show as many pixels as it has. If your site displays an image 1200 pixels wide, a 6000-pixel-wide export doesn't appear sharper — the browser throws away five sixths of it before drawing anything. The visitor downloads all of it and sees none of the extra. This is why speed reports phrase it as wasted bytes: not “too much quality”, but data that never reaches the screen at all.

Retina and high-density displays are the one real caveat, and they're handled by exporting at roughly twice the displayed width — not by exporting your print master.

The numbers to actually use

These are working defaults for a photography site. They are deliberately specific so you can set them once in an export preset and stop thinking about it.

• Full-width hero images: 2000–2400 px on the long edge. Target under 400 KB.
• Gallery and portfolio images: 1600–2000 px on the long edge. Target 200–300 KB each.
• Blog post images: 1200–1600 px. Target under 200 KB.
• Thumbnails and grid previews: 600–800 px. Target under 80 KB.
• Logos, icons, and anything with flat colour or text: PNG or SVG, not JPEG. JPEG compression makes hard edges and lettering look smeared.

In Lightroom's export dialog, this means setting Resize to fit → Long edgewith the pixel value above, quality around 70–80, and Limit file size as a backstop. Quality 100 is not a better photo on a website; it is the same photo, three times heavier.

Formats: JPEG, WebP, AVIF

JPEG works everywhere and is a perfectly acceptable answer. If you change nothing but the dimensions and quality above, you will have solved most of the problem.

WebP is the current sensible default — typically 25–35% smaller than the equivalent JPEG at a quality difference you cannot see, and supported by every browser in use today. AVIF is smaller again and support is now broad, but it's slower to encode and the gain over WebP is smaller than the gain from JPEG to WebP. WebP is where the value is.

The important thing: on most platforms you do not convert anything yourself. Squarespace, Showit, Pixieset, and WordPress with an image plugin all convert uploads to WebP and serve the right size automatically — but only starting from what you gave them. Upload a 6 MB original and many will still serve something far larger than needed. Export correctly first; let the platform optimise from there.

Tools

• Squoosh — free, runs in your browser, nothing to install, and shows you a before/after slider while you drag the quality down. The fastest way to develop an instinct for how far you can push compression before it shows. Worth ten minutes with one of your own images.
• ImageOptim (Mac) — drag a folder in, it rewrites the files in place. Good for a whole export at once.
• Lightroom export presets — the real answer long term. Build one preset per use (“Web — Gallery”, “Web — Blog”) with the numbers above and the decision is made permanently.

Platform notes

• Squarespace resizes uploads into several widths and serves an appropriate one, and converts to WebP. It does not undo an oversized upload entirely, and its largest generated size is still generated from your file. Its own guidance is to upload under 500 KB.
• Showit serves images from its CDN at the width the layout requests, so sizing is largely handled — but the file you upload is the source for every one of those, and heavy uploads still show up. Its galleries are also where element counts get large; see Why Your Photography Site Loads Slowly.
• Pixieset is built around galleries and handles delivery well; the usual problem there is the marketing pages rather than the client galleries.
• WordPress does the least on its own. It generates several sizes but keeps your full original and themes sometimes serve it. An optimisation plugin (ShortPixel, Imagify, EWWW) that converts to WebP and compresses on upload is close to essential, and most have a bulk mode for images already in your library.

Two things that quietly undo all of it

Background images. A full-bleed background set through your builder's design panel often bypasses the automatic resizing that applies to images placed in content. These are usually the largest files on a photography site and the least likely to have been checked. Export them deliberately.

Slideshows. A rotating hero downloads every slide before the page settles, so a five-image slideshow multiplies your heaviest image by five. One strong photo outperforms a carousel on nearly every measure, speed included.

How to check what you've actually got

Open your site, right-click the page, choose Inspect, and open the Network tab. Reload, sort by size, and look at the top of the list. It takes a minute and it tells you precisely which files are the problem — often one background image nobody had thought about in two years.

Then re-run your audit here. The image warnings should shrink or disappear, and this is the change most likely to move the score by a visible amount. Once it's done, filenames and alt text are the other half of getting value out of your photos — see Image SEO for Photographers.