If your site feels sluggish, especially on mobile, images are one of the first places to look. A single unoptimized photo can be several megabytes, while the rest of a typical page — HTML, CSS, JavaScript — often adds up to a fraction of that. Oversized, wrong-format, or poorly-loaded images are one of the most common and easiest-to-fix sources of a slow page.
Table of Contents
The good news is that image-related slowdowns are usually fixable without touching your site’s design or hiring a developer. This guide walks through how to confirm images are actually the problem (rather than assuming it), the specific fixes that make the biggest difference, and the mistakes that quietly undo your work.
Quick Answer
Images slow down websites when they’re uploaded at a much larger size or resolution than they’re actually displayed at, saved in an inefficient format, or loaded all at once instead of only when needed. Fixing it comes down to three things: compress and resize every image to its real display size, use a modern format like WebP or AVIF, and lazy-load anything below the fold while letting your most important image load immediately.
How to Confirm Images Are the Problem
Run your page through Google’s PageSpeed Insights or the Lighthouse panel in Chrome DevTools (right-click a page, Inspect, then the Lighthouse tab). Both tools flag oversized images directly and estimate the savings available from compressing or resizing them. They’ll also show your Largest Contentful Paint (LCP) score, and on many content and e-commerce pages the LCP element is a hero image or product photo — but don’t assume that automatically. LCP time is made up of several parts: how fast your server responds, how quickly the browser discovers the LCP resource, how long that resource takes to load, and how long rendering takes once it arrives. A slow LCP can just as easily come from a slow server, render-blocking CSS or JavaScript, or a font that delays rendering, as from the image itself. PageSpeed Insights and Lighthouse break LCP down into these phases, so check that breakdown before assuming the fix is ‘compress the image.’
A quicker manual check: open your browser’s Network tab, reload the page, and sort requests by size. If a handful of image files are each several hundred kilobytes to multiple megabytes, you’ve found a real bottleneck. Compare the file’s pixel dimensions to how large it actually displays on the page — a 4000px-wide photo shown in a 600px-wide box is wasting most of its weight on detail nobody can see.
The Fixes That Actually Move the Needle
Resize before you upload. Export images at roughly the dimensions they’ll be displayed at (accounting for high-DPI screens means going maybe 1.5–2x the display size, not 4x). This single step often cuts file size more than any compression setting.
Switch to a modern format. WebP is now supported by essentially every current browser and typically produces notably smaller files than JPEG at the same visual quality. AVIF compresses even further in many cases but encodes more slowly and isn’t quite as universally supported yet, so a common setup serves AVIF or WebP with a JPEG fallback using the HTML
Compress everything. Tools like Squoosh (a free browser-based tool from Google), ShortPixel, or TinyPNG strip unnecessary metadata and apply smart compression with minimal visible quality loss. Most CMS platforms (WordPress plugins like Smush or ShortPixel, Shopify’s built-in handling, etc.) can do this automatically on upload.
Use responsive images with srcset so phones download a smaller file than desktops instead of the same oversized image for everyone. Lazy-load images below the fold with loading=”lazy” so the browser doesn’t fetch them until the user scrolls near them. But do the opposite for your most prominent image — the one likely to be your LCP element — by marking it loading=”eager” and, if your platform supports it, fetchpriority=”high” so it starts loading immediately instead of competing with everything else on the page.
Serve images through a CDN if your platform offers one. Many image CDNs (Cloudflare Images, Cloudinary, your hosting provider’s built-in CDN) automatically resize, convert format, and compress on the fly based on the requesting device, which removes most of this work from your plate entirely.
Tips and Common Mistakes
Don’t lazy-load your hero or LCP image — this is one of the most common mistakes and it directly hurts the metric Google cares about most for page experience. Also avoid relying on CSS to shrink a huge image down visually; the browser still downloads the full file, so you get none of the savings. Always set explicit width and height (or an aspect-ratio in CSS) on image tags so the browser can reserve space before the image loads, which prevents layout shift as the page renders. And if Lighthouse still shows a slow LCP after your images are fully optimized, look at server response time, render-blocking CSS/JS, and font loading next — those stages can dominate LCP even when every image on the page is perfectly sized. Finally, re-check your work after a redesign or theme change — new templates frequently reintroduce oversized images even on a site that was previously optimized.
Explore more: More web development guides.
Website image optimization FAQs
What’s the ideal file size for a web image?
There’s no single universal number, but as a practical target, keep most content images under a few hundred kilobytes, and try to get your largest, most prominent image (your likely LCP element) as light as possible without visible quality loss. Dimensions matter more than the compression setting — resize to the actual display size first.
Should I use WebP or AVIF?
Either is a major upgrade over JPEG or PNG. WebP has the widest browser support and is the safer default; AVIF often compresses a bit further but is slower to encode. Many sites let their CMS or CDN serve whichever format the visitor’s browser supports automatically, so you don’t have to choose manually.
Does lazy loading hurt SEO?
No, as long as it’s implemented correctly using the standard loading=”lazy” attribute on below-the-fold images. What does hurt SEO and user experience is lazy-loading your above-the-fold hero image, since that delays when the browser discovers and loads it, which can delay the page’s Largest Contentful Paint.
If I fix my images and my site is still slow, what’s next?
Check server response time, render-blocking CSS and JavaScript, and font loading — these are the other main contributors to a slow Largest Contentful Paint, and Lighthouse’s LCP breakdown will show you which phase is actually taking the time.
Build It With GTStudios
Need help with your website, app, or small-business tech? GTStudios builds web, apps, and software for small businesses. See how GTStudios can help.
Want dev news in your inbox? Subscribe to the free newsletter.
Photo: Gary / CC BY-SA 2.0, via Wikimedia Commons.