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. LCP is the time the largest visible image or text block renders, and Google uses it as one of the Core Web Vitals. A full-resolution photo straight off a phone, shown in a much smaller slot, makes every visitor download pixels they will never see.
On an image-heavy site, it is often the single biggest lever, and it is easy to measure. Run the page through PageSpeed Insights and look for diagnostics such as "Properly size images" and "Serve images in modern formats". If the report is hard to read, paste it into my free Page Speed Fix Planner and it turns the results into a list of fixes ranked by impact and effort.
Measure each change on its own if you can. On IIID Inscape, a publication site I built on WordPress, the client reported 40 percent faster page loads after launch. That figure covers the whole build, not images alone, and that is the point: a before-and-after number only tells you what to repeat if you know what changed.
Related guide: How to fix Core Web Vitals on a WordPress site
What size should website images be?
The largest size they are displayed at, and no bigger. Then give the browser smaller versions to choose from on smaller screens (more on srcset below).
The best fix is upstream: put image specs in the brief, so new content arrives at the right size. A simple spec sheet for a store might look like this:
| Slot | Size (px) | Format |
|---|---|---|
| Hero banner | 1920 by 1080 | WebP or AVIF |
| Square product image | 1000 by 1000 | WebP |
| Tall product image | 500 by 1000 | WebP |
| Square social-style image | 1080 by 1080 | WebP or JPG |
When everyone uploads to the same dimensions, a new product or blog post looks right without a designer touching it.
Related guide: Next.js site failing Core Web Vitals? How to fix it
How do srcset and sizes work?
One image file can't be right for both a phone and a 27-inch monitor. The srcset attribute lists the versions you have, with their widths, and sizes tells the browser how wide the image will be shown at each breakpoint. The browser does the maths and downloads only the version it needs. MDN's guide to responsive images covers it in depth.
<img
src="/images/hero-1280.webp"
srcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w, /images/hero-1920.webp 1920w"
sizes="(max-width: 768px) 100vw, 1200px"
width="1920" height="1080"
alt="Guests on the terrace at sunset">
On a phone 390 px wide with a 2x screen, the browser needs about 780 pixels, so it fetches the 1280 version instead of the 1920 one. WordPress has generated srcset and sizes automatically for images inserted through the editor since version 4.4, so on WordPress the main job is uploading a sensible original.
Where the crop needs to change on mobile, not just the size, use the picture element for art direction: a wide banner on desktop and a taller crop on phones. That way phones don't download a wide desktop banner only to crop or squash it.
Which image format should you use?
| Format | Use it for | Notes |
|---|---|---|
| WebP | Photos and most website images | Smaller than JPEG at similar quality, 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 with very limited browser support. Convert before uploading |
| ICO | Favicons | Still used by some browsers and tools |
Google states that WebP lossy images are 25 to 34 percent smaller than comparable JPEGs, and web.dev's guide to AVIF shows it compressing further still at similar quality. MDN's image file type guide lists browser support for each format. HEIC is the odd one out, with support largely limited to Safari.
Under1MB converts and compresses images across 11 formats in the browser, so you can change formats without installing anything.
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.
As a starting point, WebP at quality 75 to 85 suits most photos. Google's cwebp encoder defaults to 75. AVIF quality numbers are not directly comparable with JPEG or WebP, and encoders differ, so a setting that looks low on paper can still look clean. Start in the middle of your tool's range, compare side by side at display size, and keep going down until you see banding in skies, smearing on skin or fuzz around text. Then step back up.
Two habits save a lot of grief. Always export from the original, never from a file that has already been compressed, because each lossy pass adds damage. And check on a real phone, since that is where most visitors will see the image.
When photography is the product, treat images by hand. On Magpie Retreat, a retreat in Uttarakhand, my brief was UX fixes, image enhancement and a rebuilt Elementor header. On a site like that, where the setting sells the stay, a blanket optimiser running at one setting is the wrong tool. Each key photo deserves a look at display size.
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
Resize first
If the image is wider than it will ever be shown, cut the dimensions. Fewer pixels is often the biggest saving.
- 2
Pick a format
WebP or JPG for photos, PNG for screenshots that need sharp text.
- 3
Lower the quality
Step the quality down a little at a time and check the file size after each export.
- 4
Check at display size
View the result at the size it will be shown. If it looks soft, go back a step and reduce the dimensions instead.
- 5
Save and keep the original
Download the new file and keep the original in case you need to export again.
Under1MB does the conversion and compression in your browser. Nothing leaves your device: there is no upload, no signup and no server.
How should images load on the page?
Optimised files still need to load in the right order.
- Lazy load everything below the first screen with
loading="lazy". web.dev advises against lazy loading images in the first viewport. - Never lazy load the hero. Load it immediately and add
fetchpriority="high"so the browser fetches it ahead of less important resources, as explained in web.dev's guide to Fetch Priority. If the hero is a CSS background, preload it. - Set width and height on every image, so the layout does not jump as images arrive. web.dev's guide to fixing CLS explains why.
- Serve from a fast host or CDN, so files travel a short distance to each visitor.
- On Next.js, use the built-in image component, which generates responsive sizes, serves modern formats and lazy loads by default. Mark the hero image so it loads eagerly instead.
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, image optimisation plugins can resize oversized uploads, compress them and create WebP or AVIF versions as files are added to the media library. Check whether a plugin processes images on your server or sends them to an external service, and whether it keeps the originals. WordPress itself has scaled down very large uploads since 5.3, accepted WebP since 5.8 and AVIF since 6.5.
- Write the specs down in the handover, so the team knows the size for every slot.
- 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. If your site runs on Elementor, how to speed up an Elementor site without rebuilding it covers the rest, and what WordPress speed optimisation costs helps you budget for it. If you'd rather hand it over, I fix images and Core Web Vitals through my technical SEO and Core Web Vitals service. Book a 20-minute discovery call, send me the URL, and we'll go through what your images are costing you and what to fix first.
