Images account for roughly half of the total bytes on an average web page. I have seen sites where a single unoptimized hero image was larger than all the HTML, CSS, and JavaScript combined. If you care about performance, user experience, or your hosting bill, image optimization is one of the highest-impact improvements you can make.

In this guide, I will walk you through everything I have learned about optimizing images for the web: choosing the right format, compressing effectively, implementing responsive images, and using lazy loading to keep your pages fast.

Why Image Size Matters

Google's Core Web Vitals directly measure how fast your page feels to users, and images play a major role in all three metrics. Largest Contentful Paint (LCP) measures when the largest visible element finishes loading, and that element is usually an image. If your hero image is 3 MB of uncompressed JPEG, your LCP score will suffer badly.

Beyond search rankings, there are real business consequences. Amazon found that every 100 milliseconds of added latency cost them 1% in sales. On mobile networks, an unoptimized page can take 10 or more seconds to become usable, and users leave. There is also a cost dimension: serving millions of page views with oversized images adds up fast on your CDN bill.

Image Formats Compared

Choosing the right format is the first and often the most impactful optimization decision. Here is how the major formats stack up:

Format Best For Compression Transparency Browser Support
JPEG Photos, complex images Lossy No Universal
PNG Screenshots, graphics with text Lossless Yes Universal
WebP General purpose replacement Both Yes 95%+
AVIF Maximum compression Both Yes ~90%
SVG Icons, logos, illustrations Vector (N/A) Yes Universal

JPEG

JPEG remains the workhorse for photographs. It uses lossy compression, discarding visual information to reduce file size. At quality 80 to 85, most photos look nearly identical to the original. The downside: no transparency, and repeated saves degrade quality.

PNG

PNG uses lossless compression, so every pixel is preserved exactly. Ideal for screenshots, diagrams, and images with sharp text. The trade-off: a PNG photo will be 5 to 10 times larger than an equivalent JPEG. Use PNG for transparency or pixel-perfect reproduction, not for photographs.

WebP

WebP was developed by Google and supports both lossy and lossless compression, plus transparency. In my experience, WebP files are typically 25 to 35% smaller than equivalent JPEG or PNG files at the same visual quality. Browser support is now above 95%, making WebP a safe default for most projects. Convert your images easily with our Image Format Converter.

AVIF

AVIF is the newest contender, based on the AV1 video codec. It offers even better compression than WebP, often achieving 50% smaller file sizes compared to JPEG. The downside is slower encoding times and slightly lower browser support (around 90% as of 2026). For sites that serve a high volume of images, the bandwidth savings can be substantial.

SVG

SVG is a vector format, meaning it scales to any size without losing quality. It is perfect for logos, icons, and simple illustrations. SVGs are just XML text, so they can be styled with CSS, animated with JavaScript, and compressed with gzip. Our SVG Converter can help you convert raster images to vector format when appropriate.

Compression: Lossy vs. Lossless

Understanding compression is key to making smart trade-offs between file size and visual quality.

Lossy compression permanently removes visual information that the human eye is less sensitive to. The key insight: dropping from quality 100 to 85 might cut your file size in half with barely visible changes, but dropping from 85 to 60 saves less and introduces noticeable artifacts. I find the sweet spot sits around quality 75 to 85 for photos.

Lossless compression reduces file size without discarding any information by finding and encoding patterns more efficiently. PNG and lossless WebP use this approach. The compression ratios are smaller, but you get a bit-perfect reproduction.

You can experiment with different compression levels using our Image Compressor, which runs entirely in your browser so your images stay private.

Responsive Images

A single image size does not fit all screens. Serving a 2400px-wide hero image to a 375px phone viewport wastes enormous bandwidth. HTML provides several tools to solve this.

The srcset Attribute

The srcset attribute lets you provide multiple image sources at different widths. The browser picks the best one based on the viewport and device pixel ratio:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w,
          hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 80vw,
         1200px"
  alt="Mountain landscape at sunset"
>

The sizes attribute tells the browser how wide the image will be rendered at different viewport widths, so it can make an informed choice before the image downloads.

The Picture Element

For format negotiation and art direction, use the <picture> element. This lets you serve AVIF to browsers that support it, WebP as a fallback, and JPEG as the final fallback:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain landscape at sunset">
</picture>

You can use our Image Resizer to generate the multiple size variants you need for responsive images.

Lazy Loading

Lazy loading defers the loading of offscreen images until the user scrolls near them. This is one of the simplest performance wins you can implement.

Native Lazy Loading

Modern browsers support the loading="lazy" attribute natively. Just add it to your image tags:

<img src="product-photo.jpg" loading="lazy" alt="Product photo">

One important rule: do not lazy-load images that are visible in the initial viewport (above the fold). Your hero image and any images the user sees immediately should load eagerly. Lazy loading those would actually hurt your LCP score.

Intersection Observer

For more control, you can use the Intersection Observer API to add custom logic like fade-in animations or placeholder swapping. The key idea is to store the real URL in a data-src attribute and swap it into src when the element enters the viewport. Setting a rootMargin of 200 pixels gives images a head start before the user scrolls to them.

Image CDNs and Automated Optimization

Image CDNs like Cloudflare Images, Imgix, and Cloudinary can automatically resize, compress, and convert images on the fly. You pass parameters in the URL, and the CDN generates the optimized variant on demand:

<!-- Cloudflare example -->
<img src="/cdn-cgi/image/width=800,quality=80,format=auto/original.jpg">

<!-- Imgix concept -->
<img src="https://example.imgix.net/photo.jpg?w=800&q=80&auto=format">

These services are powerful but come with ongoing costs. If you want to optimize images without a subscription, client-side tools like BoltQuickTools give you the same compression and conversion capabilities right in your browser. Try our Image Compressor or Image Format Converter for quick, free optimization.

Advanced Techniques

Base64 Inline Images

For very small images (under 2 KB), you can embed them directly in your HTML or CSS as Base64 data URIs. This eliminates an HTTP request at the cost of roughly 33% larger file size due to Base64 encoding. Our Image to Base64 Converter makes this conversion instant.

AI Upscaling

Sometimes you are stuck with a low-resolution source image. AI-powered upscaling can increase resolution while preserving sharpness, which is useful when you need a larger version of an image for a hero section or print. Our Image Upscaler runs this process entirely in your browser.

Practical Optimization Checklist

Here is the checklist I follow when optimizing images for a website:

  1. Audit your current images. Open DevTools, go to the Network tab, filter by "Img", and sort by size. Identify the biggest offenders.
  2. Choose the right format. Photos get JPEG or WebP. Graphics with transparency get PNG or WebP. Icons and logos get SVG. Use AVIF if your audience supports it.
  3. Resize to actual display dimensions. Never serve a 4000px image that displays at 800px. Generate multiple sizes for responsive layouts.
  4. Compress at the right quality level. Start at quality 80 for JPEG/WebP and compare visually. Drop to 70 or 75 if the savings are significant and the quality is still acceptable.
  5. Implement responsive images. Use srcset and sizes for resolution switching. Use <picture> for format negotiation.
  6. Add lazy loading. Apply loading="lazy" to every image below the fold. Keep above-the-fold images eager.
  7. Set explicit dimensions. Always include width and height attributes (or use CSS aspect-ratio) to prevent layout shift (CLS).
  8. Use a CDN. Serve images from a CDN with proper cache headers. Set Cache-Control: public, max-age=31536000, immutable for versioned assets.
  9. Test with Lighthouse. Run a Lighthouse audit and check the "Properly size images" and "Serve images in next-gen formats" recommendations.

Wrapping Up

Image optimization is not glamorous, but the payoff is immediate. A well-optimized site loads faster, ranks better, costs less to serve, and provides a better experience on every device. Here are the BoltQuickTools resources mentioned in this guide:

Every one of these tools processes your images entirely in your browser. Nothing gets uploaded, and there is no sign-up required.