Images are usually the heaviest part of a web page, so optimising them is one of the quickest ways to speed up a site. Serve modern formats such as WebP or AVIF, resize each image to the size it is actually displayed, set width and height so the layout does not jump, lazy-load images below the fold, and fix any image that returns an error.
Why do images slow pages down?
Large, uncompressed images take longer to download than anything else on most pages, especially on mobile data. The main image on a page is often the Largest Contentful Paint element, so a slow hero image directly hurts your Core Web Vitals.
A common example: a coaching institute uploads a 4000-pixel phone photo of its classroom, 5 MB in size, and shows it in a 600-pixel-wide box. The visitor downloads more than ten times the pixels they can see.
Which image format should you use?
Use WebP or AVIF for photos and complex graphics, and SVG for logos and icons. All current major browsers support WebP and AVIF, and Google Search can index both.
| Format | Best for | Notes |
|---|---|---|
| AVIF | Photos, large banners | Usually the smallest files; encoding is slower |
| WebP | Photos and graphics with transparency | Good balance of size, quality and tool support |
| JPEG | Photos, as a fallback | Use only if your tools cannot produce WebP |
| PNG | Screenshots needing exact pixels | Often much heavier than WebP for the same image |
| SVG | Logos, icons, simple illustrations | Scales to any size with a tiny file |
If you want a fallback for very old browsers, use the picture element:
<picture>
<source srcset="campus.avif" type="image/avif">
<source srcset="campus.webp" type="image/webp">
<img src="campus.jpg" alt="Students in the Pune campus library" width="1200" height="800">
</picture>How big should an image be?
An image should be roughly the size it is displayed, allowing for high-density screens. Use srcset and sizes so the browser picks the right file for each screen instead of sending a desktop banner to a phone.
<img src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Faculty member teaching a batch" width="800" height="450">Compress every file as well. A quality setting around the middle of the range usually looks the same to visitors at a fraction of the size; check by eye rather than trusting a single number.
Why do images need width and height attributes?
Width and height let the browser reserve space before the image downloads, so text below it does not jump when it arrives. Without them, images cause layout shift, which is measured by Cumulative Layout Shift. CSS can still make the image responsive; the browser uses the attributes to work out the aspect ratio.
Should you lazy-load every image?
No. Lazy-load images below the fold with loading="lazy", but never the main image at the top of the page. Lazy-loading the hero image delays your Largest Contentful Paint. For that image, use fetchpriority="high" instead.
- Below the fold:
loading="lazy" - Hero or first visible image: no lazy loading,
fetchpriority="high" - Avoid JavaScript lazy-loading libraries that hide the real image URL from search engines; native lazy loading is supported in all modern browsers.
What about broken images?
A broken image is one whose URL returns an error, usually a 404 after a file was moved or deleted. It shows an empty box to visitors, wastes a request and cannot appear in Google Images. Update the src to the correct file or remove the image. If you renamed images in bulk during a redesign, redirect the old URLs; see redirects and broken links.
Does image optimisation help SEO directly?
Mostly indirectly. Faster pages improve user experience and Core Web Vitals, and well-handled images can rank in Google Images. Google's image SEO best practices also recommend descriptive file names, good alt text and placing images near relevant text. For the technical detail on formats and responsive images, see web.dev's guide to images.
Common mistakes
- Uploading camera or stock photos at full resolution.
- Using PNG for photographs.
- Lazy-loading the hero image or the logo at the top of the page.
- Missing width and height, causing layout shift.
- Leaving old image URLs broken after a site redesign.
- Using CSS background images for important content, which search engines may not treat as page images.
How to check your images with Spider
Run a page audit in Spider and look at the image checks. They flag images in older formats, oversized files, images missing width and height, missing lazy loading below the fold and broken image URLs. A site crawl repeats these checks across up to 2,000 pages, so you can find the templates that cause most of the problems and fix them once.
Check this on your own site
Spider's free check tests this and about 100 other things on any page, and links each problem to a guide like this one.
