Image Optimisation for Faster Websites

By Grocito14 October 2026

Image optimisation means serving each picture in a suitable format, at the size the screen actually needs, with sensible compression, correct dimensions and smart loading. Since images are often the heaviest part of a page, this is usually the quickest route to a faster website. Resize before upload, use modern formats, load the main above-the-fold image eagerly and the rest lazily.

Key takeaways

Images usually make up most of a page's weight, so they are often the first place to look for speed gains.
Match the format to the content: photographs, graphics with transparency, icons and animation each have a best fit.
Never send a huge image to a small slot. Resize, compress and serve different sizes to different screens.
Lazy load images below the fold, but never the main image visible on first load.
Set width and height, or an aspect ratio, so the page does not jump while images load.
Good file names and alt text help accessibility and image search.

Why do images dominate page weight?

A page of text and code can be tiny, while a single unprocessed photo straight from a phone or camera can be many times larger than the whole rest of the page. Large images slow the first load, use mobile data, delay the main content and hurt loading measures in Core Web Vitals.

Start by finding the largest images on your most visited pages.

Which image format should you choose?

Here is a qualitative guide. Browser support and tooling change over time, so check current compatibility.

JPEG: Long-established and widely supported. Good for photographs where small loss of detail is acceptable. No transparency.
PNG: Lossless and supports transparency. Suits screenshots, logos with flat colours and graphics with sharp edges, but photographs in PNG are usually needlessly large.
WebP: A modern format that handles photographs and graphics, with transparency, and usually produces smaller files than JPEG or PNG at similar visual quality. Broadly supported across current browsers.
AVIF: A newer format that can compress even better in many cases, particularly for photographs, though encoding can be slower and support, while wide, is worth checking for your audience.
SVG: A vector format made of shapes rather than pixels. Ideal for logos, icons and simple illustrations because it stays sharp at any size and is often tiny.

A practical approach: use SVG for icons and logos, WebP or AVIF for photographs with a JPEG fallback where you need to support older browsers, and avoid PNG for photos.

How do you compress and resize images?

Resize first

If an image will display at a certain width on your site, there is no benefit in uploading one several times larger. Resize to roughly the largest size it will appear, allowing for high-density screens, then compress.

Lossy and lossless compression

Lossy compression removes some detail the eye barely notices, and lets you trade quality for size. Lossless compression shrinks a file without changing pixels, but saves less. For photographs, lossy compression at a moderate quality setting is usually the right choice. Look at the result at normal size before accepting it, because the acceptable setting depends on the image.

Strip what is not needed

Photos can carry metadata such as camera details and location. Removing it saves space and protects privacy.

What are responsive images, srcset and sizes?

A desktop screen and a small phone need different amounts of detail. Responsive images let the browser choose. You provide several versions of an image at different widths in a srcset attribute and describe in a sizes attribute how wide the image will appear at different screen widths. The browser then downloads the smallest file that looks sharp on its screen.

Your developer or platform may generate these versions automatically. Many CMS platforms and frameworks include image components that create multiple sizes and modern formats on request. The picture element lets you offer alternative formats, or a differently cropped image for narrow screens, called art direction.

When should you lazy load images, and when not?

Lazy loading delays loading images until they are near the visitor's viewport. It saves data and speeds up the first view for long pages with many images, such as galleries, blog posts and product listings. Modern browsers support it through a simple loading attribute.

What not to lazy load:

The main above-the-fold image, often the hero banner or the main product photo. This is usually the largest element visible on first load, so delaying it directly harms the loading measure. Load it eagerly and consider giving it a higher fetch priority.
Logos and key images in the initial view.
Images that must appear immediately after a tab or carousel change.

Lazy load everything below the fold, and test on a real device to check that images appear before the visitor reaches them.

How do you stop layout shift from images?

If the browser does not know an image's dimensions, it reserves no space, then pushes content down when the image arrives. That jump is called layout shift, and it annoys visitors and counts against you in Core Web Vitals.

Fix it by setting width and height attributes on every image, matching the image's real proportions, or by using a CSS aspect ratio. The browser then reserves the right space before the file downloads. Do the same for embedded videos and iframes.

How do CDNs and caching help?

A content delivery network stores copies of your images on servers closer to your visitors, reducing travel time. Many image CDNs can also resize, compress and convert formats on the fly, selecting a format the visitor's browser supports.

Caching tells the browser to keep an image so repeat visits and other pages do not download it again. Use long cache lifetimes for files whose names change when the content changes, so updates still appear. Your hosting setup matters here; see our guide to web hosting options.

What is image SEO?

Search engines and assistive technology use more than the pixels.

Descriptive file names: "oak-dining-table-six-seater.webp" tells more than "IMG_4821.webp".
Alt text: A short description of what the image shows and why it is there, written for people who cannot see it. Skip alt text for purely decorative images so screen readers ignore them, and never stuff keywords.
Captions and surrounding text: Context helps search engines understand the subject.
Image sitemaps or sitemap entries: As far as is publicly documented, you can list important images in your XML sitemap to help discovery, especially when images load by script.
Use real images in the page's HTML rather than only as CSS backgrounds when the image carries meaning.

How should you handle icons, illustrations, video and GIFs?

SVG for icons and illustrations: Small, sharp and styleable. Optimise exported files by removing unnecessary editor data, and avoid SVG from untrusted sources without checking, as it can contain scripts.
Animated GIFs: They are usually far larger than the same clip as a short video or an animated modern image format. Replace them with a muted, looping video element or an animated WebP, and offer controls or a pause where motion is distracting.
Video: Do not autoplay large files on mobile. Use a poster image, load the player only when needed and consider streaming from a platform built for it.

What workflow should CMS editors follow?

Most slow images appear because of editorial habits, not technical failure. Build a simple process.

Resize and crop before uploading, or use a CMS that does it automatically.
Use the approved formats and a naming convention.
Write alt text in the upload field.

If your CMS lacks guardrails, ask your developer to add upload limits, automatic resizing and format conversion. Our website development team does this kind of setup regularly.

An audit checklist

Run a page through a speed testing tool and note the largest image.
List pages with the heaviest images.
Confirm modern formats and appropriate compression.
Confirm the main image loads eagerly and others lazily.
Confirm width and height or aspect ratio on every image.
Check alt text and file names.
- Retest after changes and on a real phone.

A worked example

Imagine a bakery's website with a full-width hero photo uploaded straight from a camera, a gallery of twenty product photos in PNG and an animated GIF in the footer. The home page is slow on phones, and the layout jumps as pictures arrive. The team resizes the hero and exports it in a modern format, keeps it eager-loaded with a set size, converts the gallery to compressed WebP with lazy loading and adds width and height everywhere. The GIF becomes a short looping video, and the editor receives a checklist for future uploads.

FAQ

What is the best image format for websites?

There is no single best format. Use SVG for logos and icons, WebP or AVIF for most photographs and graphics where your audience's browsers support them, JPEG as a widely compatible fallback, and PNG where you need lossless quality or transparency on simple graphics.

Should I lazy load all images?

No. Lazy load images below the fold, but load the main above-the-fold image eagerly, because delaying it slows the visible loading of the page. Test on a real device to make sure images appear as visitors scroll.

How do images affect Core Web Vitals?

Large images can slow the loading of the main content element, and images without set dimensions can cause the page to shift as they load. Resizing, compressing, prioritising the main image and reserving space with width and height help both measures.

Do I need alt text on every image?

Add useful alt text to images that carry meaning, such as products, diagrams and people relevant to the content. Purely decorative images should have an empty alt attribute so screen readers skip them.

Next steps

Pick your three most visited pages, find their largest images and apply the checklist above, starting with resizing and the hero image. Then give your editors a short upload guide so the gains last. If you would like a performance review or automated image handling built into your site, contact us or explore our website development services.