Web page loading speed is one of the most directly impactful factors in user experience and search engine ranking. Google has used page speed as a ranking signal since 2010 and has progressively tightened its requirements through the Core Web Vitals framework. The single most common cause of slow page loads, consistently identified across millions of website audits, is oversized images. Not poorly written code, not unoptimised databases, not slow servers — images that haven't been compressed, sized appropriately, or converted to modern formats.
The fix is usually straightforward once you understand the targets.
File Size Targets for Web Images
There are no absolute rules, but widely accepted guidelines for web image file sizes in 2026:
- Hero images (full-width background, above the fold): Under 200 KB ideally; hard maximum 400 KB
- Product images or article feature images: 50–150 KB
- Thumbnails and card images: 20–50 KB
- Icons and small UI elements: Under 10 KB; SVG preferred for logos and icons
- Total page image payload: Under 1 MB for a typical content page; under 500 KB for a landing page
A website where hero images are 2–5 MB each — which is common when photographs are uploaded directly from a camera or smartphone without any processing — is loading 10–25 times more image data than necessary. This is not a marginal problem; it's the difference between a page that loads in 1.5 seconds and one that loads in 8 seconds on a typical mobile connection.
Download Time Calculations
The connection between file size and loading speed depends on the visitor's connection speed. Use our download time calculator to model how any file size performs at different connection speeds.
For a 2 MB hero image:
- On a 10 Mbps connection (typical mobile): 1.6 seconds just for that one image
- On a 50 Mbps connection (good home broadband): 0.32 seconds
- On a 4 Mbps connection (poor mobile signal): 4 seconds for one image
The same image optimised to 150 KB downloads in under 0.25 seconds on even a slow mobile connection. The optimised version is imperceptible in load time; the unoptimised version noticeably delays the entire page. This is the practical impact of image optimisation — and it multiplies across every image on every page of a website.
Choosing the Right Image Format
JPEG: The traditional format for photographs and complex images with gradients. Good compression with acceptable quality loss. Well-supported everywhere. Still widely used, though increasingly superseded by WebP for the same use cases.
PNG: Lossless compression; ideal for images requiring transparency (logos, UI elements, screenshots). Larger file sizes than JPEG for photographic content. Use PNG for graphics and transparency; avoid it for photographs.
WebP: Google's modern format, now supported by all major browsers. Provides 25–35% smaller file sizes than JPEG at equivalent visual quality, and supports transparency like PNG. The default choice for web images in 2026 if your CMS and image pipeline support it.
AVIF: Next-generation format offering 40–50% smaller files than JPEG at equivalent quality. Excellent browser support from 2023 onwards. Slightly slower encoding time than WebP. The leading edge choice for performance-focused sites.
SVG: Vector format ideal for logos, icons, illustrations, and any graphic that needs to scale perfectly at any size. File sizes can be tiny (often under 5 KB) and scale infinitely without quality loss. Not suitable for photographs.
Use our file size calculator to understand the storage and bandwidth impact of different file sizes across your full image library — particularly useful when planning CDN (Content Delivery Network) storage costs or comparing hosting plans.
Responsive Images: Serving the Right Size
A 2,000px wide image displayed in a 400px thumbnail is delivering 5× more pixels than the display can show. Responsive image implementation serves different image sizes to different device widths: a mobile phone receives a 400px image; a desktop monitor receives a 1,400px image; both see the same visual quality with dramatically different file sizes.
The HTML srcset attribute and picture element implement this in code. Most modern CMSes (WordPress, Webflow, Shopify) handle responsive images automatically if configured correctly. Checking your site's image delivery in browser developer tools (Network tab, filter by Img) quickly reveals whether appropriately sized images are being served to different devices.
Lazy Loading: Only Load What's Visible
Images below the fold (not visible on initial page load) don't need to download immediately. Native lazy loading — added via the loading="lazy" attribute on img tags — delays image downloads until the user scrolls toward them. This substantially reduces initial page load time on long pages with many images, without affecting the eventual user experience at all.
The Compression Pipeline
A practical image optimisation workflow: resize to the largest display size needed (don't serve 3,000px images in 600px slots) → convert to WebP or AVIF → compress to the smallest file size that maintains acceptable visual quality → implement responsive images for multi-device delivery → add lazy loading for below-fold images.
Google's PageSpeed Insights tool at pagespeed.web.dev analyses any public URL and identifies specific image optimisation opportunities, showing the exact potential file size savings for each image on the page.