Image Optimization for the Web: Formats, Compression, and Performance

I used to throw full-resolution PNGs onto my pages and call it a day. Then I ran a Lighthouse audit on a client project and watched the performance score drop to 38. The culprit? A single hero image that weighed more than the entire JavaScript bundle.

Images typically account for 40–60% of a web page’s total weight. Getting image optimization right is one of the highest-impact performance improvements you can make — often more impactful than code splitting or tree shaking. Here’s everything I’ve learned from compressing thousands of images across production projects.

Choosing the Right Format

Not all image formats are created equal, and using the wrong one is probably the most common mistake I see in code reviews.

When to Use WebP

WebP should be your default format in 2026. Browser support is effectively universal — Chrome, Firefox, Safari, and Edge all support it. WebP produces files 25–35% smaller than equivalent JPEG at the same visual quality, and it supports both lossy and lossless compression plus alpha transparency.

The only legitimate reason to avoid WebP is email HTML, where client support is still inconsistent.

When to Use AVIF

AVIF is the next frontier — it achieves 50% size reduction compared to JPEG, but encoding is significantly slower (10–100x slower than WebP encoding). Use AVIF when:

• Build time isn’t critical (static sites with pre-built images)
• You’re serving high-traffic pages where every kilobyte matters
• You can fall back to WebP for unsupported browsers

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="630">
</picture>

When to Use SVG

SVG is the clear winner for anything that isn’t a photograph: icons, logos, illustrations, and diagrams. SVGs are vector-based, meaning they scale to any resolution without quality loss. A well-optimized SVG icon might be 500 bytes. The same icon as a PNG at 2x resolution could be 5KB — ten times larger and blurry on 3x displays.

Convert your images: Our Image Converter lets you convert between JPEG, PNG, and WebP instantly in your browser — no uploads, no quality loss from server-side recompression.

Compression: Finding the Sweet Spot

Lossy vs. Lossless

• Lossy compression (JPEG, lossy WebP) discards visual information that the human eye is unlikely to notice. A JPEG at quality 80 is visually indistinguishable from quality 100 for most photographs, but the file is 60–70% smaller.
• Lossless compression (PNG, lossless WebP) preserves every pixel exactly. Use this for screenshots, diagrams, and images with text where any artifact would be visible.

The Quality Sweet Spot

I’ve tested hundreds of images across different quality settings. Here’s what I’ve found:

My recommendation: quality 80 for photographs, quality 85 for images with text. Below 70, artifacts become visible around high-contrast edges, and users will notice.

Real-World Impact

On a recent e-commerce project, converting product images from PNG to WebP at quality 80 reduced the average image payload from 2.4MB to 380KB per page — an 84% reduction. The Largest Contentful Paint (LCP) improved from 4.2s to 1.8s, which directly correlated with a 12% increase in conversion rate.

Responsive Images: Stop Serving Desktop Images to Phones

One of the biggest performance wastes is serving a 2400px-wide hero image to a phone with a 390px-wide screen. The browser downloads 6x more pixels than it needs.

The srcset Attribute

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w,
          hero-1800.webp 1800w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 75vw,
         50vw"
  alt="Product showcase"
  width="1800"
  height="1200"
>

The srcset attribute tells the browser which image sizes are available, and sizes tells it how wide the image will be displayed. The browser then picks the smallest image that covers the display area at the device’s pixel density.

Common Breakpoints

For most websites, generating these widths covers the majority of use cases:

• 400px — Mobile portrait
• 800px — Mobile landscape / small tablet
• 1200px — Tablet / small desktop
• 1800px — Large desktop / retina

More breakpoints give diminishing returns. Four sizes is the sweet spot between coverage and build complexity.

Lazy Loading: Don’t Load What Users Can’t See

Images below the fold shouldn’t block the initial page load. Native lazy loading is now supported in all modern browsers:

<!-- Above the fold: load immediately -->
<img src="hero.webp" alt="Hero" fetchpriority="high">

<!-- Below the fold: load when approaching viewport -->
<img src="feature.webp" alt="Feature" loading="lazy">

The Rules I Follow

1. Never lazy-load the LCP image. The Largest Contentful Paint element should load as fast as possible. Add fetchpriority="high" to your hero image.
2. Lazy-load everything below the fold. Any image that requires scrolling to see should have loading="lazy".
3. Always set width and height. Without explicit dimensions, lazy-loaded images cause layout shifts (CLS) when they pop in. Set the actual dimensions or use aspect-ratio in CSS.

The width and height Attributes Matter

I see developers omit width and height from <img> tags constantly. This causes Cumulative Layout Shift (CLS) — the page jumps around as images load, which is both a terrible user experience and a Core Web Vital that Google uses as a ranking signal.

<!-- Bad: causes layout shift -->
<img src="photo.webp" alt="Team photo">

<!-- Good: browser reserves space before loading -->
<img src="photo.webp" alt="Team photo" width="1200" height="800">

Modern browsers use the width/height ratio to calculate the aspect ratio and reserve space, even if the image is sized responsively with CSS.

Image CDNs: When to Use Them

For sites with more than a few hundred images, an image CDN (Cloudinary, Imgix, Cloudflare Images) can automate everything I’ve described:

• Format negotiation — serves WebP to Chrome, AVIF to Safari 16+, JPEG to everything else
• On-the-fly resizing — generates responsive sizes from a single upload
• Quality optimization — auto-adjusts quality based on image content
• Edge caching — serves images from the nearest data center

For smaller projects and developer tools like UseToolSuite, processing images locally at build time is simpler and avoids the CDN cost. The Image Converter handles quick format conversions when you need them.

Common Mistakes

Mistake 1: Using PNG for Photographs

PNG is lossless — great for screenshots, terrible for photos. A 1200x800 photo saved as PNG might be 3MB. The same image as JPEG quality 80 is 200KB, and as WebP quality 80 is 150KB. Use PNG only when you need pixel-perfect reproduction or alpha transparency with sharp edges.

Mistake 2: Not Specifying Dimensions

Every image without width and height attributes is a potential layout shift. Google’s CLS metric penalizes this directly.

Mistake 3: Serving Uncompressed SVGs

SVGs straight from design tools like Figma or Illustrator often contain metadata, editor comments, and redundant attributes that double the file size. Always run SVGs through an optimizer — or check our SVG Optimization Guide for detailed techniques.

Mistake 4: Forgetting the alt Attribute

Beyond accessibility (which should be reason enough), the alt attribute is a significant SEO signal. Google Image Search uses alt text to understand image content. Write descriptive, concise alt text that adds value — not “image123.jpg” or “photo”.

Performance Checklist

Before shipping a page with images, run through this:

• All photographs are WebP (or AVIF with WebP fallback)
• Icons and logos are SVG
• Quality is 80 or lower for lossy formats
• Responsive srcset is set for images wider than 800px
• Hero/LCP image has fetchpriority="high"
• Below-fold images have loading="lazy"
• Every <img> has width, height, and alt attributes
• SVGs are optimized (no editor metadata)

Further Reading

• The Complete Guide to Browser-Based Image Editing
• HEIC vs JPG vs PNG vs WebP: Which Format Should You Use?
• How to Resize Images for Every Social Media Platform
• SVG Optimization: A Complete Guide
• WCAG Color Contrast and Accessibility

Need to convert images between formats? The Image Format Converter handles JPEG, PNG, WebP, AVIF, and BMP conversions entirely in your browser. For resizing, the Image Resizer includes social media presets for Instagram, YouTube, and more — no server uploads, no quality loss.