Web Image Optimization: Common Mistakes and Best Practices

Web image optimization means reducing each image's file size to the smallest possible without visitors noticing any quality loss. Images account for roughly 50% of a typical page's total weight — and poor image handling is the single biggest reason websites load slowly.

This guide walks you through the most common image mistakes and the concrete best practices you should be applying right now.

Why Image Optimization Matters

Google uses page speed as a ranking signal. The Core Web Vitals — LCP, CLS, and INP — are directly impacted by poorly optimized images:

• LCP (Largest Contentful Paint): almost always triggered by a hero or banner image.
• CLS (Cumulative Layout Shift): images without declared dimensions cause content to jump as they load.
• INP: the main thread gets bogged down decoding massive images on lower-end mobile devices.

Image optimization is the single highest-ROI performance improvement for most websites. Explore more techniques in our web performance resource hub.

Common Mistakes to Avoid

1. Uploading images at their original size and resolution

A raw camera photo can weigh 8–20 MB and measure 6,000 × 4,000 px. If your content column is 800 px wide, the browser downloads 20 MB to display 800 px — a massive waste.

Best practice: always resize before exporting. The image should be at most 2× the maximum CSS width it will display at (to support retina screens), and no larger.

2. Using JPEG or PNG when WebP (or AVIF) is better

WebP delivers 25–35% smaller files than JPEG at equivalent visual quality. AVIF can save another 50% on top, though browser support is still not universal.

• Photographs → WebP (with JPEG fallback if legacy browser support is required).
• Logos, icons, illustrations with transparency → SVG or WebP with alpha channel.
• Animations → animated WebP or a short <video> instead of GIF.

3. Omitting width and height attributes

When the browser doesn't know how much space to reserve for an image before it loads, the page layout jumps when it arrives — that's CLS. Adding width and height in HTML lets the browser pre-allocate space and eliminates the shift.

<!-- Wrong -->
<img src="hero.webp" alt="Homepage hero banner">

<!-- Right -->
<img src="hero.webp" alt="Homepage hero banner" width="1200" height="630">

4. Not using lazy loading for below-the-fold images

The native loading="lazy" attribute tells the browser to defer downloading images that aren't in the viewport. It's zero-dependency, requires no JavaScript, and dramatically reduces the initial page payload.

Important exception: your hero image or any image visible on page load should not have loading="lazy" — it would delay the LCP.

5. Ignoring srcset and responsive images

Serving a 1,400 px image to a phone with a 390 px screen is wasteful. The srcset attribute lets you offer several versions and lets the browser pick the right one.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Product front view"
  width="800" height="600"
  loading="lazy">

6. Forgetting the alt attribute

The alt attribute isn't just for accessibility — Google uses it to understand what an image depicts. An empty or generic alt text ("image1.jpg") throws away a ranking opportunity.

Compression Best Practices

Compression comes in two flavors — lossless and lossy:

For most photographs, a WebP export quality of 75–85% is indistinguishable to the human eye and cuts file size in half compared to the original JPEG.

Recommended Workflow

1. Resize to the maximum display width × 2 (for retina screens).
2. Convert to WebP (or AVIF + WebP as fallback).
3. Compress at quality 80 for photos; lossless for graphics.
4. Name files with intent: seo-consultant-mexico-city.webp, not DSC00445.webp.
5. Add width, height, alt, and loading="lazy" (except on hero images).
6. Serve from a CDN to reduce geographic latency.

For WordPress sites, a plugin like ShortPixel or Imagify automates steps 1–3. For custom PHP builds, the Sharp library (Node) or ImageMagick (PHP) handle conversion without manual effort. The team at elenlace.com can set up this pipeline professionally, tailored to your exact stack.

Tools to Audit Your Images

• PageSpeed Insights / Lighthouse: flags oversized images, non-modern formats, and missing lazy loading.
• Squoosh.app: visual side-by-side comparison online — great for finding the right quality/size balance before publishing.
• GTmetrix: shows the actual bytes transferred for each image in the network waterfall.
• cwebp (CLI): batch-convert entire directories to WebP with a single bash script.

Key Takeaways

• Images account for ~50% of page weight; optimizing them delivers the highest performance return of any single change.
• Use WebP as your default for photos; SVG for vector graphics.
• Always declare width and height to prevent CLS.
• Apply loading="lazy" to every image that isn't visible on page load.
• Use srcset + sizes to serve the right image version to each device.
• Name files with descriptive keywords; always fill in the alt attribute.
• Automate the process with a plugin or build script — don't rely on manual discipline.

Want a professional to audit and optimize your site's images? The team at elenlace.com delivers full performance audits and a prioritized action plan you can act on immediately.

FAQ

What is the best image format for web in 2025?

WebP is the recommended standard: supported by all modern browsers, 25–35% lighter than JPEG, and supports transparency. For cases where maximum compression matters and browser compatibility isn't a constraint, AVIF is the next step forward.

How much should I compress a photograph for the web?

At WebP quality 75–85%, compression is imperceptible to the average visitor and cuts file size roughly in half versus the original JPEG. Use 85% for product shots where detail matters; 70–75% is fine for decorative backgrounds.

Does lazy loading hurt SEO?

No — not when you use the native HTML attribute loading="lazy". Googlebot supports standard lazy loading. What does hurt SEO is applying lazy loading to the hero or primary image, because it delays the LCP score.

Should I still optimize images if I'm already using a CDN?

Yes. A CDN reduces geographic latency, but it doesn't reduce file size. A 3 MB image served from the fastest CDN on Earth is still 3 MB. Optimization and a CDN are complementary — not substitutes for each other.

Further reading

Other providers and guides worth comparing:

• HubSpot
• IONOS
• GoDaddy