Image Optimisation for Speed: A Practical Guide

Heavy images are one of the most common reasons a business website feels slow, especially on a phone with a weak signal. A few photos straight from a phone camera can add several megabytes to a single page. This guide is for owners and the people who look after their websites. By the end you will be able to find your heaviest images, shrink them safely, and make sure the browser loads only what it needs.

In short: Resize images to the size they are actually displayed at, use WebP or AVIF with a JPEG or PNG fallback, and let srcset hand smaller files to smaller screens. Lazy load images below the first screen, but never the main image at the top of the page. Measure before and after so you know what worked.

Why images affect speed

A browser downloads every image a page uses, so big files take longer to arrive, particularly on mobile data. Images also affect Largest Contentful Paint (LCP), which measures when the largest image or block of text in the visible part of the page has rendered. On many pages that largest element is an image, often the hero photo at the top.

LCP is one of Google's Core Web Vitals. Google's guidance at web.dev describes an LCP of 2.5 seconds or less as good. Scripts, fonts and third-party widgets can slow a page as well, so measure first rather than assuming images are the culprit.

Measure first

Record a baseline on one representative page, such as your home page or a top product page. Then repeat the same checks after each change.

1. Browser developer tools. Press F12, open the Network tab, filter by Img and reload. Sort by size. The biggest files are your first targets. Images that are lazy loaded may only appear once you scroll.
2. Inspect one image. Right-click it and choose Inspect. Compare its intrinsic size (the real file dimensions) with its rendered size (what shows on the page). A 4000-pixel-wide file shown in a 600-pixel slot is wasted weight.
3. PageSpeed Insights. Enter your address at pagespeed.web.dev. It reports your LCP, shows which element it treated as the LCP element, and lists image-related suggestions. The wording changes over time, so read the suggestions rather than matching them to a fixed list.

Step 1: Choose the right format

• JPEG is the reliable default for photos. It is universally supported but has no transparency.
• PNG suits sharp-edged graphics and transparency. A photo saved as PNG is usually far larger than the same photo as JPEG.
• WebP and AVIF are modern formats that often produce smaller files than JPEG at similar visual quality. The saving depends on the image and your quality setting, so test rather than assume. WebP works in all current major browsers. AVIF support is broad, but check a current compatibility table such as Can I use before relying on it alone.
• SVG is a text-based vector format. It stays sharp at any size and is usually tiny, which makes it ideal for logos. SVG files can contain scripts, so only accept them from trusted sources, and sanitise them if visitors can upload them to your site.
• Short video in a <video> element is generally much lighter than an animated GIF.

Step 2: Resize before you upload

This is where most sites lose the most weight. A modern phone photo can be several thousand pixels wide, yet your page may show it at under a thousand. The browser downloads the whole file and shrinks it on screen.

Resize to roughly the largest size the image will be displayed at. These are starting points, not rules:

High-density screens use more physical pixels per displayed pixel, so they benefit from a larger version. That is what srcset is for (next step).

Free tools include Squoosh in your browser, ImageOptim on macOS, or the export settings in your photo editor. On WordPress, image plugins can compress and convert in bulk. Check each plugin's current free limits before relying on it.

Watch out: Keep your original files and back up the site before any bulk conversion. Test a handful of images first and look for blurry text, banding in skies or skin tones, lost product detail, and broken transparency on logos.

Step 3: Let the browser choose with srcset

A phone does not need the file a desktop monitor does. With srcset and sizes you list several versions, and the browser picks one based on your declared sizes and the device's screen density.

<img
  src="hero-1200.jpg"
  srcset="hero-600.jpg 600w,
          hero-1200.jpg 1200w,
          hero-1920.jpg 1920w"
  sizes="(max-width: 768px) 100vw, 1200px"
  alt="Team meeting in a small office"
  width="1200"
  height="800">

• srcset lists each file with its real pixel width.
• sizes says how wide the image will display: full width up to 768 pixels, otherwise 1200 pixels. Change this to match your real layout, or the browser will choose badly.
• width and height reserve space before the image loads, which stops the page jumping around (this protects your Cumulative Layout Shift score).

This small CSS rule keeps images flexible without distorting them:

img {
  max-width: 100%;
  height: auto;
}

To offer modern formats with a fallback, wrap the image in <picture>. The browser uses the first source it supports:

<picture>
  <source type="image/avif"
          srcset="hero-600.avif 600w, hero-1200.avif 1200w"
          sizes="(max-width: 768px) 100vw, 1200px">
  <source type="image/webp"
          srcset="hero-600.webp 600w, hero-1200.webp 1200w"
          sizes="(max-width: 768px) 100vw, 1200px">
  <img src="hero-1200.jpg"
       alt="Team meeting in a small office"
       width="1200" height="800">
</picture>

Tip: WordPress, Shopify and similar platforms usually create several sizes on upload, but your theme decides what HTML reaches the page. Custom blocks or page builders can quietly skip srcset and serve one oversized file. Use Inspect on a key page to see what is really being served.

Step 4: Lazy load only what is off-screen

There is no point downloading an image three screens down before anyone scrolls to it. The loading="lazy" attribute tells the browser to wait:

<img src="product.jpg" loading="lazy" width="600" height="400" alt="Blue cotton tote bag">

Current major browsers support it. Two rules matter:

• Use it on images below the first screen.
• Never use it on images visible when the page opens, especially the LCP image. Lazy loading it can delay the request and make LCP worse.

For the image PageSpeed Insights identifies as your LCP element, consider fetchpriority="high" so the browser requests it sooner:

<img src="hero.jpg" fetchpriority="high" width="1920" height="900" alt="Shop front at dusk">

loading defers an image; fetchpriority prioritises one. They do different jobs.

Common problems and fixes

Small things that quietly help

• Write useful alt text. Describe what the image shows in context. Use alt="" for purely decorative images so screen readers skip them.
• Compress from the original. Re-saving a JPEG repeatedly degrades it. Export compressed copies instead.
• Check metadata. Camera files can carry location and other EXIF data. Many optimisers can strip it, but check your tool's settings and the output.
• Remember CSS background images. <img> attributes do not apply to them, so size and format them separately.
• Consider a CDN if visitors are spread across regions. It may reduce delivery delay, though results depend on configuration.

If your images are already sensible and the site is still slow, the cause is probably elsewhere. How to read an SEO audit explains how to sort findings and decide what to fix first.

To see how a page on your own site stands, the free single-page scan at seo.lordevo.com is a quick starting point alongside the PageSpeed check above.

Key takeaways

• Measure first: note your LCP and your heaviest images on one key page.
• Resize to the displayed size before uploading; do not rely on the browser to shrink huge files.
• Use WebP or AVIF for photos with a JPEG fallback, and SVG for logos.
• Add srcset and sizes, and check that your theme actually outputs them.
• Lazy load below-the-fold images, never the LCP image.
• Set width and height on every image and write real alt text.

FAQ

What is a good file size for a website image?

There is no single number. Aim to resize to the displayed dimensions and compress until quality is still acceptable on real pages. Then compare against your baseline. The smallest file that still looks good is the target.

Should I convert everything to WebP or AVIF?

Not necessarily. Convert photos where the saving is worthwhile, keep a JPEG or PNG fallback, and check the results visually. SVG is better for logos.

Will lazy loading everything make my site faster?

No. Lazy loading helps for images far down the page, but applied to the top image it can slow LCP. Leave visible-on-arrival images alone.

Do I need a plugin?

Not always. A plugin can save time on a large library of existing images, but resizing before upload and checking your theme's output covers the basics for many small sites.