Find Oversized Images on Your Website
Images account for roughly 50% of total page weight on most websites. Oversized images — where the file is much larger than needed — are the single biggest performance problem and the easiest to fix.
What Makes an Image "Oversized"?
An image is oversized when its natural (intrinsic) dimensions are significantly larger than its rendered (displayed) dimensions. For example:
Oversized
A 3000x2000 image displayed in a 300x200 container. The browser downloads 10x more pixels than needed — wasting ~2MB+ of bandwidth per image.
Properly Sized
A 600x400 image displayed in a 300x200 container. The 2x ratio accounts for retina displays while keeping file size reasonable.
The Performance Impact
| Metric | How Oversized Images Hurt |
|---|---|
| Largest Contentful Paint (LCP) | Hero images are usually the LCP element. Oversized files delay rendering. |
| Total Page Weight | 10 oversized images can add 5-20MB of unnecessary data. |
| Mobile Performance | Mobile users on cellular connections suffer most from large downloads. |
| Google Rankings | Core Web Vitals are a ranking factor. Slow LCP = lower rankings. |
How to Find Them
Step 1: Scan your page
Use our Website Image Checker to scan any URL. The results show natural vs rendered dimensions for every image, making oversized files immediately obvious.
Step 2: Look for the ratio
Compare natural width to rendered width for each image:
- 1x-2x ratio: Good — appropriate for standard and retina displays
- 2x-3x ratio: Acceptable but could be optimized
- 3x+ ratio: Oversized — should be resized
- 10x+ ratio: Severely oversized — immediate fix needed
Step 3: Prioritize by impact
Fix the largest images first. A 5MB hero image with a 10x ratio will have far more impact than a 20KB thumbnail with a 3x ratio.
How to Fix Oversized Images
- Resize to 2x rendered size. If an image renders at 400x300, save it at 800x600 max. This covers retina displays without excess.
- Use modern formats. WebP saves 25-35% over JPEG. AVIF saves 50%+ but has less browser support. Use <picture> with fallbacks.
- Implement srcset. Let the browser pick the right size for each device automatically.
- Compress appropriately. Quality 80-85 for JPEG/WebP is visually identical to 100 at half the size.
- Lazy load below-fold images. Add
loading="lazy"to images not visible on initial load.
Find every oversized image on your site in seconds.
Scan Your Website