How to reduce website load time with image optimization
Find the images slowing your site down, fix the biggest ones first, and set simple rules that keep pages fast. An image audit you can finish in an hour.
· 5 min read
When a page feels slow, images are the first place to look. They are usually the largest files a page downloads, and a single oversized photo can outweigh all of the page’s code. This guide is an audit you can run in about an hour: find the images that cost the most, fix them in order, and set a few rules so the problem does not come back.
Step 1: find what is slow
Start with your five most visited pages, since that is where a fix helps the most visitors.
- PageSpeed Insights. Enter a URL to see Core Web Vitals from real Chrome users (when Google has enough data) and a lab test. Note the Largest Contentful Paint element; it is very often an image.
- Chrome DevTools, Network panel. Reload with the cache disabled, filter by “Img” and sort by size. Anything over a few hundred kilobytes deserves a look.
- Chrome DevTools, Elements panel. Hover an image to compare its rendered size with its intrinsic size. A photo shown at 600 pixels but stored at 4000 is the most common problem on the web.
Step 2: fix the biggest problems first
| Problem | How to spot it | Fix | Impact |
|---|---|---|---|
| Oversized dimensions | Intrinsic size far larger than rendered size | Resize to about twice the display width | High |
| Photos saved as PNG | .png photos of several megabytes | Convert to JPG or WebP | High |
| Camera exports at maximum quality | JPGs that shrink a lot when re-saved at 75 | Re-encode at quality 75–80 | High |
| No modern formats | Only .jpg and .png in the Network panel | Serve WebP, or AVIF with a fallback | Medium |
| Lazy-loaded hero image | loading="lazy" on the LCP image | Remove it and add fetchpriority="high" | Medium |
| Page jumps while loading | A high CLS score | Add width and height to every image | Medium |
| Large animated GIFs | GIFs of several megabytes | Compress the GIF, or replace it with a short video | Medium |
A worked example
Say a blog post shows a phone photo in an 800-pixel content column. The photo is 4032 × 3024, about 12.2 megapixels. A 2× screen needs 1600 pixels across, so resizing to 1600 × 1200 keeps 1.9 megapixels, cutting about 84% of the pixels before compression even starts. Converting the result to WebP at quality 75 then trims it further. The image looks the same in the post, and the page has one large file fewer to wait for.
Repeat that for every photo on a page and the savings add up quickly, which is why oversized dimensions sit at the top of the table above.
Step 3: process the images in one batch
Collect the original files for every image you flagged. Then, in Graviton:
- Drop them all in, up to 250 at a time.
- Turn on Resize and pick 1920 for full-width images, or 1280 or 800 for images in a content column.
- Set the format to WebP and keep quality at 75.
- Download the images one by one or as a ZIP: 3 a day on Free, unlimited on Pro. Files keep their names, with the new .webp extension.
Everything runs in your browser, so there is no upload wait and nothing leaves your computer. If an image is already smaller than anything Graviton can produce, it is marked “Kept original” and you get your original image back, pixel for pixel, without its metadata, so nothing in the batch gets worse.
Optimize images for your websiteResize to 1920 px and convert to WebP for a whole batch in one step.Step 4: replace the files and fix the HTML
Upload the new files and update references to the new extension. If your CMS rewrites file names, replace images one at a time from the media library instead. While you are in the templates:
- Add
widthandheightto everyimg, so the browser reserves space. - Lazy-load images below the fold with
loading="lazy", but never the main image at the top. - Give the main image
fetchpriority="high". - Where one image serves phones and desktops, add
srcsetwith two or three widths.
The details and code samples are in our guide to optimizing images for web performance.
Step 5: test again
Re-run PageSpeed Insights on the same pages. The lab score updates right away. Field data from real users is based on the previous 28 days, so give it a few weeks to reflect the change.
Rules that keep pages fast
Most sites get slow again because new images skip the process. A few house rules prevent that:
- No image wider than 1920 pixels unless it is a full-screen hero on large displays.
- WebP by default for photos, PNG or lossless WebP for screenshots and graphics.
- A budget of roughly 200 KB for content images and 400 KB for heroes; go over it only on purpose.
- Photos are compressed before upload, never uploaded straight from a camera or phone.
- iPhone photos are converted first, since HEIC does not display in most browsers. Use HEIC to JPG.
Where Graviton fits, and where it does not
Graviton is a browser tool, so it is best for images people prepare by hand: blog photos, product shots, landing page heroes. It needs no installation and works the same on any computer, so editors and marketers can follow the rules above without a developer. For images your application creates or receives automatically, such as user uploads, use an image CDN or a step in your build or upload pipeline instead.
Found photos saved as PNG? PNG to JPG makes them far smaller, and the GIF compressor shrinks animations while keeping every frame.