Images are the single largest contributor to page weight on most websites. According to the HTTP Archive, which crawls millions of pages, images account for roughly 50–70% of total page weight on average — around 1.0–1.5 MB on a 2 MB page. This isn't a marginal concern. Getting image optimisation right is the highest-leverage thing most sites can do to improve load time.
Why load time translates to real business outcomes
Faster pages have measurably better engagement, conversion, and bounce rates. The numbers vary by study and industry, but the direction is consistent: a 1-second improvement in page load time is associated with meaningful improvements in conversion — often cited in the range of 5–15% depending on the starting performance baseline. Google's own data (from their large-scale study "The Need for Mobile Speed") found that 53% of mobile users abandon pages that take longer than 3 seconds to load.
Beyond business outcomes, page speed is now a confirmed Google ranking signal — not a huge one, but it's a factor, and it compounds with the user engagement signals that result from a fast experience.
Core Web Vitals and images
Google's Core Web Vitals are the specific page experience metrics that matter most for search ranking. Three of them are relevant to image optimisation.
LCP — Largest Contentful Paint
LCP measures how long it takes for the largest visible element to render. On most pages, that's an image — a hero photo, a product shot, a featured graphic. The target is under 2.5 seconds. Anything above 4 seconds is considered poor.
The LCP image is your highest priority to optimise because it directly sets the user's first impression of performance. Strategies:
- Compress it well. A 1.2 MB hero image where 280 KB would look the same is the most common performance mistake on image-heavy sites.
- Use WebP. At the same perceived quality, WebP is 25–34% smaller than JPEG, which translates directly to faster loading.
- Don't lazy-load it. Lazy loading defers image loading until the element is near the viewport. This is great for images below the fold but actively harmful for the LCP image, which should load as early as possible.
- Preload it. Add
<link rel="preload" as="image" href="hero.webp">in your<head>to tell the browser to fetch it immediately, before it parses the full HTML.
CLS — Cumulative Layout Shift
CLS measures visual instability — how much the page jumps around as content loads. A common cause is images without reserved dimensions: the browser doesn't know how tall an image will be until it downloads, so it renders the surrounding content, then re-lays everything out when the image arrives.
The fix is simple and has been the right thing to do since the early web: always set explicit width and height attributes on <img> elements. With these set, the browser reserves the correct space before the image loads. No layout shift.
<!-- Good: browser reserves space before the image loads -->
<img src="photo.webp" width="1200" height="800" alt="...">
<!-- Bad: browser has no idea how tall this will be -->
<img src="photo.webp" alt="...">INP — Interaction to Next Paint
INP replaced FID as a Core Web Vital in March 2024. It measures how responsive a page is to user interaction. Images don't directly cause INP issues, but very large images that require heavy decoding can hold up the main thread, indirectly affecting responsiveness. Keeping images appropriately sized (not sending a 4000px image displayed at 400px) avoids unnecessary memory and decoding overhead.
What format choice means for bandwidth
Switching from JPEG to WebP at equivalent visual quality saves 25–34% per image. That sounds abstract. Here's what it means in practice:
- A 500 KB hero JPEG becomes roughly 330–375 KB as WebP — saving 125–170 KB per page load
- At 10,000 visitors per month, that's 1.25–1.7 GB less data transferred — meaningful if you're paying for bandwidth, and meaningful to users on metered mobile connections
- For a product grid with 20 images at 100 KB each, WebP saves 500–680 KB per page load
The savings are real, they accumulate, and they help every visitor — especially those on slow connections or mobile data.
Practical optimisation checklist
For each image going to production:
- Resize to display dimensions. Never send a 4000px image displayed at 800px. Use the max-width field in this tool, or your build pipeline, to downsample first. (How to resize images for the web)
- Use WebP for all photos and graphics where browser support allows (~98% globally in 2025). Fall back to JPEG for very old platform targets.
- Compress to 75–85% quality for photos. For product or commercial images where pixel sharpness matters, 85–90%. (Compression guide)
- Set
widthandheighton every<img>to prevent layout shift. - Add
loading="lazy"to images below the fold — but not to the LCP image. - Preload your LCP image with
<link rel="preload" as="image">if it's a key hero element. - Use a CDN if possible. Serving images from an edge location close to the user reduces latency regardless of file size.
Common misconceptions
"WebP isn't supported everywhere." As of 2025, WebP has around 98% global browser support. Internet Explorer is the main holdout, and its market share is effectively zero for most sites. If you're still supporting IE for specific audience reasons, serve JPEG as a fallback — but for almost everyone, WebP is safe.
"100% quality preserves the image." At quality 100, JPEG and WebP files are enormous and no better for display than an 85% version. The encoder wastes bits on mathematical precision the display can't show. (More on quality settings)
"Image optimisation is a one-time thing." Every new image you add to a project needs the same treatment. It's worth building this into your workflow — either via an automated build step or by running new images through a tool like this one before uploading. The savings don't happen automatically.
Google's PageSpeed Insights (pagespeed.web.dev) runs a Lighthouse audit on any URL and will specifically flag oversized images, images without explicit dimensions, and images that could benefit from next-gen formats. It's the fastest way to see what's actually slow on your page.
For more on picking the right format, see JPG vs PNG vs WebP. For help with finding the right compression level, see how to compress without losing quality.
Convert to WebP, compress, and resize — all in your browser, no upload required.