To optimise images for a website without losing quality, resize each image to the largest size it is actually displayed at, convert photos to WebP or AVIF, compress to the lowest quality that still looks right at display size, and lazy load everything below the first screen. Doing it in that order matters, because resizing usually saves more than compression. I built Under1MB, a free converter that runs entirely in the browser, to do the conversion and compression steps without uploading files anywhere.
Why do images slow websites down?
Images are usually the largest files on a page, and the hero image is often the Largest Contentful Paint element, the moment Google measures as "the page has loaded". A full-resolution photo straight off a phone, shown in a much smaller slot, makes every visitor download pixels they will never see.
On a site built on photography, it is the single biggest lever. For IIID Inscape, a design publication built on large photography, image compression and caching were part of the build from the start, and the client reported 40 percent faster page loads after launch.
What size should website images be?
The largest size they are displayed at, and no bigger. Then let the browser pick a smaller version on smaller screens.
The best fix is upstream: put image specs in the brief. For the Grow Organic launch pages I fixed the specs before building:
| Slot | Size |
|---|---|
| Hero banner | 1920 by 1080 |
| Square product image | 1000 by 1000 |
| Tall product image | 500 by 1000 |
| Square social-style image | 1080 by 1080 |
The marketing team adds products themselves, and consistent dimensions mean a new product looks right without a designer.
Where the crop changes on mobile, use separate images. Wow Vastra has separate desktop and mobile banner sets, so phones do not download a wide desktop banner and crop it.
Which image format should you use?
| Format | Use it for | Notes |
|---|---|---|
| WebP | Photos and most website images | Much smaller than JPEG, supported by all modern browsers |
| AVIF | Large photos, hero images | Often smaller again than WebP, slower to encode |
| JPG | Fallback, email, uploads that demand it | Universal, but larger |
| PNG | Screenshots, graphics with sharp edges or transparency | Large for photos, so avoid it there |
| SVG | Logos, icons, simple illustrations | Scales to any size, tiny files |
| GIF | Very little now | A short video or animated WebP is usually smaller |
| HEIC and HEIF | Nothing on the web | Phone photo formats. Convert before uploading |
| ICO | Favicons | Still used by some browsers and tools |
Under1MB handles all of these: PNG, JPG, JFIF, WEBP, AVIF, GIF, BMP, ICO, HEIC, HEIF and SVG.
How much should you compress?
Until you can see a difference at display size, then step back one notch. There is no single right setting, because a detailed landscape and a flat product shot compress very differently.
When photography is the product, compress by hand. On Magpie Retreat, the setting is the main selling point, so I re-exported every image from the originals at the right dimensions and compression rather than running a blanket optimiser. The photos stayed sharp and the pages got faster.
How do you get an image under 1 MB?
Upload forms, marketplaces and job portals often reject anything over 1 MB. That use case is where Under1MB's name comes from.
- 1
Drop the image
Open under1mb.app and drop one file or a whole folder. The browser decodes it locally.
- 2
Pick a format
WebP or JPG for photos, PNG for screenshots that need sharp text.
- 3
Set a target size
Target-size mode adjusts quality until the file lands under the size you choose, such as 1 MB.
- 4
Resize if needed
If quality drops too far, reduce the dimensions instead. Fewer pixels is often the better trade.
- 5
Download
Single files download directly. Batches come back as a ZIP.
Nothing leaves your device. There is no upload, no signup and no daily limit, because there is no server to pay for.
How should images load on the page?
Optimised files still need to load in the right order.
- Lazy load everything below the first screen. My Inspired Monks site lazy loads images and embeds, which is part of how an Elementor site gets top Lighthouse performance scores.
- Never lazy load the hero. Load it immediately, and preload it if it is a CSS background.
- Set width and height on every image, so the layout does not jump as images arrive.
- Serve from a fast host or CDN. This portfolio serves images from a dedicated assets subdomain.
- On Next.js, use the built-in image component, which handles sizes and modern formats. Image optimisation was part of the SEO foundations on the procol.ai rebuild.
How do you keep images optimised after launch?
Launch day is easy. The real test comes months later, when someone uploads a photo straight from their phone.
- Optimise at upload. On WordPress, a plugin can resize and convert on upload. My own site does image optimisation at upload.
- Write the specs down in the handover, as with Grow Organic.
- Give the team a tool. Under1MB is free and runs in the browser, so anyone can fix an image before uploading it.
Images are one part of page speed. The rest is in how to fix Core Web Vitals on a WordPress site, and I take this on for clients through my technical SEO and Core Web Vitals service.
