How to optimize images for a website: resize, compress, choose a format
Resize each photo to the largest width it will actually be shown at (about 2,000 pixels for a full-width hero, much less for most others), save it as WebP or a well-compressed JPEG, and check the file lands in the low hundreds of kilobytes rather than megabytes. Those three steps fix most slow pages on small sites.
Why it matters more than anything else on a small site
A photo straight from a modern phone is often 4,000 pixels wide and several megabytes. A brochure page's HTML and CSS might be 50 KB. One unprocessed hero image can be a hundred times heavier than everything else on the page, and on a patchy mobile connection that's the difference between a page that appears at once and one people leave. The largest image is also commonly the element measured by Largest Contentful Paint, one of the Core Web Vitals. So most of the answer to how to optimize images for a website comes down to making that one file, and the others like it, smaller.
Target sizes
| Where it's shown | Export width | Rough file size to aim for |
|---|---|---|
| Full-width hero or banner | 1,600 to 2,000 px | 150 to 350 KB |
| Image beside text, half width | 1,000 to 1,200 px | 80 to 200 KB |
| Card or gallery thumbnail | 600 to 800 px | 40 to 100 KB |
| Team headshot | 400 to 600 px square | 30 to 70 KB |
| Logo | SVG if you have it; otherwise PNG at twice its display size | Under 20 KB |
The widths allow for high-density phone and laptop screens, which need about twice the pixels of the space an image fills. Going beyond twice gains nothing visible, as MDN's guide to image performance points out. File sizes vary with the picture: a busy market scene compresses less than a plain wall.
Choosing a format
- JPEG
- The safe choice for photos. Every browser and tool supports it. Quality around 70 to 80 is usually indistinguishable from the original on screen.
- WebP
- Smaller than JPEG at similar quality for most photos, supports transparency, and works in all current browsers. A good default when your site accepts it.
- AVIF
- Often smaller again, but slower to encode and less widely accepted by upload forms and editors. Worth it if your tools handle it.
- PNG
- For screenshots, diagrams and images with sharp edges or transparency. Poor for photos: files are several times larger.
- SVG
- For logos and icons drawn as shapes. Tiny and sharp at any size, but not for photos.
- GIF
- Avoid for animation; a short video or a static image is lighter. Fine for a tiny static graphic if that's all you have.
Resize and compress, step by step
- Keep the originals in a folder you never overwrite. Work on copies.
- Crop first. Trim to the shape the slot needs, such as 16:9 for a banner or square for a headshot, so you're not shipping pixels that get cut off anyway.
- Resize to the target width. On a Mac, Preview's Adjust Size does this; on Windows, the Photos app's Resize option or the Paint resize dialog. In a browser, Squoosh (squoosh.app) resizes and compresses in one go without uploading your file.
- Pick the format and quality. In Squoosh, compare the original and compressed versions side by side and lower quality until you can just see a difference, then nudge it back up.
- Strip metadata. Phone photos carry camera details and sometimes GPS location. Most export tools remove it; check if the photo was taken at home.
- Name files descriptively, such as
reids-barbers-front-window.webprather thanIMG_4821.jpg. It helps you, and image search reads file names. - Write alt text that describes the image's purpose when you place it. The alt text guide covers how.
Images in Anticode
You can upload your own photos for app builds (the ones Anticode's model writes) as JPEG, PNG, WebP or GIF files of up to 5 MB each; Anticode checks each file's type from its first bytes and stores it under your account as you uploaded it, so resize and compress before you upload rather than relying on the builder to do it. Design-engine pages don't use uploads: they show photos from a curated Unsplash library with alt text already written, or, for a collection's entries in that collection's own section and pages, a hosted image whose https address you put in a CMS image field, so the same resizing advice applies to that hosted file. Video can't play on design-engine pages; link out to YouTube or Vimeo instead. The guide to using your own photos covers choosing them.
Check the result
- Open the page in Chrome DevTools, Network panel, filter to Img and reload. Sort by size; anything over about 500 KB deserves a second look.
- Run PageSpeed Insights on the live URL. Its suggestions name specific images that could be smaller or a better format.
- Look at it on a phone. A compressed image that looks fine on a laptop can show banding in skies or skin on a bright phone screen.
Limits
Target sizes are a starting point, not a standard; a photography portfolio may justify heavier files than a plumber's site. Compression can't rescue a blurry or badly lit original. And faster images help only if the rest of the page is light too; a page carrying heavy scripts or embeds will stay slow however small its photos are. For the design side of images, such as crops and ratios, see image optimisation for websites.
Questions people ask
WebP vs JPG: which should I use?
WebP for most photos if your site and tools accept it, since it's usually smaller at the same quality. JPEG when you need universal compatibility, such as images people will download or email.
Does compressing images hurt quality?
Some data is discarded, but at sensible settings the difference isn't visible on screen. Compare side by side and stop before you see it.
Should I use a plugin or service to optimise images automatically?
On a large site, an image CDN saves time. On a small one, doing it by hand once per photo takes minutes and gives you full control.