5 Common Image Optimization Mistakes to Avoid

Images account for most of the downloaded bytes on the average website, yet they're often the most poorly optimized assets. After auditing hundreds of websites, we've identified five mistakes that consistently plague web performance — and the good news is they're all easily fixable.

These aren't obscure edge cases. These are common, widespread mistakes made by developers and content creators at all experience levels. If your website is slow, there's a good chance you're making at least one of these mistakes right now.

Let's dive into each mistake, understand why it's problematic, and learn exactly how to fix it.

Mistake #1: Serving Massive Images at Display Size

The Problem

This is the single most common image optimization mistake: serving a 4000×3000 pixel image from your DSLR camera when it's only displayed at 800×600 pixels on the page.

Example: A photography portfolio site serves a 12-megapixel camera raw export (6.5MB file) for a thumbnail that displays at 400×300 pixels. Users are downloading 95% unnecessary data.

Why It's Bad

Wasted bandwidth: Users download megabytes of pixel data they'll never see
Slow page loads: Larger files take longer to download, especially on mobile connections
Memory usage: Browsers must decode and store the full image in memory, even if displaying it small
Poor Core Web Vitals: Impacts LCP (Largest Contentful Paint) and overall performance scores

How to Fix It

Step 1: Determine your display sizes. Check your CSS or use browser DevTools to see the actual rendered size of each image.

Step 2: Resize images to match their maximum display size. For a 400px wide display, export at 800px for retina displays (2×), but no larger.

Step 3: Use responsive images with srcset to serve different sizes to different devices:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="Description"
>

Real-World Example

Before: Homepage hero image — 4500×3000 JPEG, 8.2MB file size

After: Responsive images with srcset — 1920px for desktop (450KB), 1200px for tablet (280KB), 800px for mobile (180KB)

Result: 95% file size reduction on mobile, 2.3 second improvement in page load time

Mistake #2: Using PNG for Photographs

The Problem

Using PNG format for photographic images instead of JPEG, WebP, or AVIF. PNG is a lossless format designed for graphics with solid colors, not for photos with millions of colors and gradients.

Example: An e-commerce site exports all product photos as PNG "for quality," resulting in 2-4MB product images when JPEGs would be 200-400KB with no visible quality loss.

Why It's Bad

Massive file sizes: PNGs can be 5-10× larger than equivalent-quality JPEGs for photos
Unnecessary lossless compression: Photos don't benefit from lossless compression — human eyes can't perceive the difference at appropriate JPEG quality settings
No progressive loading: PNG images must fully download before displaying, while progressive JPEGs can show a preview quickly

How to Fix It

Use the right format for the content:

JPEG/WebP/AVIF: Photographs, gradients, complex images with millions of colors
PNG: Logos, icons, graphics with transparency, images with text or sharp edges
SVG: Vector graphics, icons, simple illustrations that need to scale

For photos, export as JPEG with 80-85% quality:

This quality level is nearly indistinguishable from 100% for most photos
Results in 50-70% smaller files than maximum quality
Use progressive JPEG encoding for better perceived performance

Better yet, use modern formats:

WebP produces 25-35% smaller files than JPEG at equivalent quality
AVIF produces 30-50% smaller files than JPEG
Serve with fallbacks for older browsers (see our WebP vs AVIF guide)

Real-World Example

Before: Product gallery with 24 PNG photos, average 3.2MB each = 76.8MB total

After: Same photos as WebP at 85% quality, average 380KB each = 9.1MB total

Result: 88% reduction in total image weight, gallery loads 6× faster on 4G connections

Mistake #3: Not Using Lazy Loading

The Problem

Loading all images immediately when the page loads, even images far below the fold that users may never see. This wastes bandwidth and slows down initial page rendering.

Example: A blog post with 20 embedded images loads all of them immediately, even though only the first 2-3 are visible above the fold. Users on slow connections wait for images they'll never see before the page becomes interactive.

Why It's Bad

Slow initial page load: The browser queues dozens of image requests, blocking other critical resources
Wasted data: Users who don't scroll to the bottom download images they never view
Poor user experience: The page appears slow to load, even if the visible content loaded quickly
Impacts Core Web Vitals: All those image requests compete for bandwidth, slowing down LCP

How to Fix It

Use native lazy loading (easiest solution):

<img src="image.jpg" alt="Description" loading="lazy">

The loading="lazy" attribute tells browsers to defer loading the image until it's near the viewport. It's supported in all modern browsers and requires zero JavaScript.

Important considerations:

Don't lazy load above-the-fold images: The first 1-3 images should load immediately for good LCP scores
Set width and height attributes: This prevents layout shift as images load
Use JavaScript libraries for older browsers: Consider lazysizes or lozad.js for legacy support

Example implementation:

<!-- First image: NOT lazy loaded (above fold) -->
<img src="hero.jpg" alt="Hero" width="1200" height="675">

<!-- Rest of images: lazy loaded -->
<img src="image-1.jpg" alt="Description" width="800" height="600" loading="lazy">
<img src="image-2.jpg" alt="Description" width="800" height="600" loading="lazy">

Real-World Example

Before: Article with 15 images, all loaded immediately — 12MB total, 5.2s to interactive

After: First 2 images load immediately, rest lazy loaded — initial load 1.6MB, 1.8s to interactive

Result: 87% reduction in initial data transfer, 65% faster time to interactive

Mistake #4: Ignoring Image Dimensions (Width and Height Attributes)

The Problem

Omitting width and height attributes on image tags, causing cumulative layout shift (CLS) as images load and push content around.

Example: A news article loads text first, then images pop in seconds later, shifting all the text down. Users lose their place or accidentally click the wrong link as content jumps around.

Why It's Bad

Poor user experience: Content jumping around is jarring and disorienting
Accidental clicks: Users click the wrong element as content shifts beneath their cursor
Cumulative Layout Shift (CLS): Directly harms your Core Web Vitals score, affecting SEO rankings
Perceived slowness: Even if images load quickly, the shifting makes the site feel unstable

How to Fix It

Always include width and height attributes:

<img src="photo.jpg" alt="Description" width="800" height="600">

These attributes don't enforce the display size — they establish the aspect ratio. Combined with CSS, the browser can reserve the correct amount of space before the image loads:

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

For responsive images with srcset:

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description"
  width="800"
  height="600"
  loading="lazy"
>

Use the dimensions of your fallback image (the src image) for the width and height attributes.

For dynamically sized images:

If you don't know exact dimensions, use CSS aspect-ratio:

img.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Real-World Example

Before: Blog post without image dimensions — CLS score of 0.32 (poor)

After: Added width/height to all images — CLS score of 0.04 (good)

Result: 88% reduction in layout shift, improved user experience and SEO rankings

Mistake #5: Using a Single Image for All Screen Sizes

The Problem

Serving the same large image to desktop and mobile users, forcing mobile users to download massive files they don't need.

Example: A restaurant website serves a 2400px wide hero image to all users. Desktop users see it at 1920px (appropriate), but mobile users only see it at 375px — they're downloading 6× more pixels than needed.

Why It's Bad

Mobile data waste: Users on cellular connections download huge files optimized for desktop
Slow mobile experience: A 2MB image on 3G takes 6-8 seconds to load
Battery drain: Larger downloads and image decoding consume more battery power
Inequitable: Punishes users with slower connections and smaller devices

How to Fix It

Use responsive images with srcset and sizes:

<img
  src="hero-1200.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1200.jpg 1200w,
    hero-1920.jpg 1920w
  "
  sizes="100vw"
  alt="Hero image"
  width="1920"
  height="1080"
>

The browser automatically selects the most appropriate image based on screen size and pixel density.

Create multiple versions:

400px: Small phones in portrait (320-414px screens)
800px: Large phones and small tablets (414-768px screens)
1200px: Tablets and small laptops (768-1280px screens)
1920px: Desktop displays (1280px+ screens)

For art direction (different crops for different sizes):

<picture>
  <source media="(max-width: 600px)" srcset="portrait-crop.jpg">
  <source media="(max-width: 1200px)" srcset="square-crop.jpg">
  <img src="landscape-crop.jpg" alt="Description">
</picture>

This lets you serve a portrait crop to mobile, square to tablet, and landscape to desktop.

Real-World Example

Before: Single 1920px image (1.8MB) served to all devices

After: Responsive images — mobile gets 400px (120KB), tablet 800px (380KB), desktop 1920px (1.8MB)

Result: 93% file size reduction for mobile users, 4.2s faster load time on 3G

Tools and Resources

Testing Tools

PageSpeed Insights: Google's free tool identifies image optimization opportunities
WebPageTest: Detailed waterfall charts show exactly how images impact load time
Chrome DevTools: Network tab shows image sizes, load times, and which images are above fold
Lighthouse: Built into Chrome DevTools, provides actionable image optimization suggestions

Image Optimization Tools

Our Image Resizer: Batch resize images to multiple sizes for responsive images
Our Image Compressor: Compress images to WebP and AVIF formats
Squoosh: Google's web-based image optimizer with visual comparison
ImageOptim: Desktop app for Mac with drag-and-drop batch optimization
Sharp (Node.js): Fast, server-side image processing for build pipelines

CDN and Automated Solutions

Cloudflare Images: Automatic resizing, format conversion, and optimization
Cloudinary: Comprehensive image management with URL-based transformations
Imgix: Real-time image processing and optimization
Next.js Image: Built-in automatic optimization for Next.js projects

Action Plan: Fix Your Images Today

Step 1: Audit Your Current State (15 minutes)

Run your site through PageSpeed Insights
Check the "Properly size images" and "Serve images in next-gen formats" sections
Note your Core Web Vitals scores, especially LCP and CLS
Identify the biggest images and highest-priority pages

Step 2: Quick Wins (1-2 hours)

Add loading="lazy" to all below-the-fold images
Add width and height attributes to all images
Identify the 5-10 largest images and resize them appropriately
Convert photography PNGs to JPEGs

Step 3: Implement Responsive Images (2-4 hours)

Create 3-4 sizes of your most important images
Implement srcset and sizes attributes
Test on actual devices to verify correct images are loading

Step 4: Modern Formats (2-4 hours)

Convert images to WebP (and optionally AVIF)
Implement the picture element with format fallbacks
Measure the improvement in file sizes and load times

Step 5: Ongoing Optimization

Set up automated image optimization in your build process
Use a CDN with automatic image optimization
Monitor your Core Web Vitals scores monthly
Include image optimization in your content creation workflow

Conclusion

Image optimization isn't a one-time task — it's an ongoing practice. But by avoiding these five common mistakes, you'll see immediate, measurable improvements in page load times, user experience, and SEO performance.

The best part? These fixes don't require advanced technical knowledge or expensive tools. Most can be implemented with basic HTML and freely available image optimization tools.

Start with the quick wins: add lazy loading, fix your dimensions, and resize the biggest offenders. Then gradually implement responsive images and modern formats. Your users (and your search rankings) will thank you.

Related Resources

Complete Image Optimization Guide - Deep dive into all optimization techniques
Responsive Images Guide - Master srcset and picture elements
WebP vs AVIF Comparison - Choose the right modern format
Image Resizer Tool - Create multiple sizes for responsive images
Image Compressor Tool - Compress to WebP and other formats

5 Common Image Optimization Mistakes (And How to Fix Them)

Mistake #1: Serving Massive Images at Display Size

The Problem

Why It's Bad

How to Fix It

Real-World Example

Mistake #2: Using PNG for Photographs

The Problem

Why It's Bad

How to Fix It

Real-World Example

Mistake #3: Not Using Lazy Loading

The Problem

Why It's Bad

How to Fix It

Real-World Example

Mistake #4: Ignoring Image Dimensions (Width and Height Attributes)

The Problem

Why It's Bad

How to Fix It

Real-World Example

Mistake #5: Using a Single Image for All Screen Sizes

The Problem

Why It's Bad

How to Fix It

Real-World Example

Tools and Resources

Testing Tools

Image Optimization Tools

CDN and Automated Solutions

Action Plan: Fix Your Images Today

Step 1: Audit Your Current State (15 minutes)

Step 2: Quick Wins (1-2 hours)

Step 3: Implement Responsive Images (2-4 hours)

Step 4: Modern Formats (2-4 hours)

Step 5: Ongoing Optimization

Conclusion

Related Resources