Complete Guide to Image Optimization for Web Performance

Why Image Optimization Matters

Images typically make up 60-70% of a website's total size. That is a huge chunk. If you have ever wondered why a page feels slow, the answer is almost always images.

The problem is not just about speed, though. When your site takes too long to load, people leave. They do not wait around, and they probably will not come back. Search engines know this too, so they factor page speed into rankings. Heavy, unoptimized images drag down your site in every way that matters - slower load times, worse search visibility, and higher data usage for visitors on mobile.

The good news is that image optimization is one of the easiest things to fix. A few format changes and compression tweaks can cut your page weight in half without anyone noticing a difference in quality.

Modern Image Formats

JPEG has been around since 1992 and it is still everywhere, but there are better options now. The two that matter most for the web are WebP and AVIF.

WebP

WebP is the practical choice right now. It gives you 25-35% smaller files than JPEG at similar quality, supports transparency (unlike JPEG), and even handles animation (smaller than GIF). Over 95% of modern browsers support it, so compatibility is not really an issue anymore. If you are only going to make one change to your image workflow, switching to WebP is the move.

AVIF

AVIF takes things further. It can be around 50% smaller than JPEG and about 20% smaller than WebP at comparable quality. It also supports wide color gamut and HDR. The catch is that browser support is still around 85% - Chrome, Firefox, and Safari handle it, but you will want a WebP or JPEG fallback for the rest.

HEIC/HEIF

You have probably run into HEIC if you use an iPhone. It has been the default camera format since iOS 11 and produces files about 50% smaller than JPEG. The downside is that web browsers barely support it, so you will need to convert HEIC images before using them on a website.

Format Comparison

Compression Techniques

Finding the Right Quality Setting

This is where most people overthink things. The truth is, for most web images, a quality setting between 75-85% looks perfectly fine and saves a ton of file size compared to 100%. Hero images and portfolio photos might warrant 85-90%, but thumbnails and background images can go as low as 60-75% without anyone noticing.

The best approach is to just try different settings and compare. Most of the time, the difference between 80% and 100% quality is invisible to the eye but the file size difference is massive.

Progressive JPEG

A regular JPEG loads from top to bottom, so on slow connections you see the image appear line by line. A progressive JPEG loads in passes - first a blurry version of the full image, then it sharpens up. The result is that users see something immediately instead of staring at a half-loaded image. Progressive JPEGs are also slightly smaller for images over 10KB, so there is really no reason not to use them.

Stripping Metadata

Every photo from a camera or phone carries EXIF metadata - camera settings, GPS coordinates, timestamps, color profiles. This data is useful for photographers but completely unnecessary on the web. Stripping it out is free file size savings with zero impact on how the image looks. It is also a privacy thing - you probably do not want GPS coordinates embedded in images on your public website.

Responsive Images

Serving the same massive image to a phone and a desktop is wasteful. Responsive images let the browser pick the right file for the situation.

The Picture Element

The <picture> element lets you serve different formats with automatic fallbacks. The browser picks the first format it supports, so modern browsers get AVIF, older ones get WebP, and everything else falls back to JPEG:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

Srcset for Different Screen Sizes

If you want to go further, srcset lets you provide multiple sizes of the same image. The browser figures out which one to download based on the screen width and pixel density. This means a phone on a slow connection does not have to download a 1200px wide image when 400px would look fine:

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

Lazy Loading

Adding loading="lazy" to your images tells the browser to only load them when they are about to scroll into view. This is one of the simplest performance wins you can get - it speeds up the initial page load and saves bandwidth because images below the fold do not get downloaded until they are actually needed. If you need more control, the Intersection Observer API gives you the same behavior with custom logic.

Optimization Tools and Workflow

Using StackConvert for Image Optimization

If you need to convert images to WebP or other formats, StackConvert's Image Converter handles that directly in your browser. Your files never get uploaded anywhere. You can also use the metadata extractor to see what EXIF data is embedded in an image before stripping it, or the aspect ratio finder to check dimensions before resizing.

A Practical Workflow

Here is a realistic workflow for optimizing images before they go on your site:

Start by picking the right format. For most web images, WebP is the safe bet. If you want to squeeze out more savings, use AVIF with a WebP fallback. Only fall back to JPEG for browsers that do not support either.

Next, resize the image to the actual display size. There is no point serving a 3000px wide image if it is going to be shown at 800px. If you are building a responsive site, create a few sizes (say 400px, 800px, 1200px) and use srcset to let the browser choose.

Then compress it. Start at 80% quality and see if the output looks acceptable. Most of the time it will. If not, bump it up to 85% or 90%. The goal is to find the lowest quality setting where the image still looks good.

Finally, set up lazy loading and proper cache headers. Use a CDN if your site serves a global audience. These delivery-side optimizations compound with the image-level savings you already made.

Best Practices

Which Format to Use

If you are not sure where to start, here is a simple rule of thumb: serve AVIF to browsers that support it, WebP to the rest, and JPEG as a last resort. The <picture> element shown earlier handles this automatically. For graphics with transparency, PNG is still the go-to if WebP is not an option.

Things That Actually Matter

Use modern formats with fallbacks. Implement srcset so browsers can pick the right image size. Add loading="lazy" to anything below the fold. Strip metadata. Use progressive JPEG when you are sticking with JPEG format. Set up proper caching headers. Use a CDN if your audience is spread out geographically. Run Lighthouse periodically to catch regressions.

None of these are complicated on their own. The key is doing all of them consistently.

Mistakes People Keep Making

The most common one is serving images that are way bigger than they need to be. If your image displays at 600px wide, do not serve a 2400px file and let CSS scale it down. The browser still downloads the full thing.

Using PNG for photographs is another one. PNG is lossless, which sounds good, but for photos it just means the file is 5-10x bigger than a JPEG with no visible difference. Save PNG for graphics, logos, and screenshots where sharp edges matter.

Also, test your site on a slow connection. Chrome DevTools has a throttling option that simulates 3G. If your page is painful to load on that setting, your mobile users are probably having a bad time.

Checking Your Results

After making changes, run your site through Google PageSpeed Insights. Compare the before and after total page weight. Open the Network tab in DevTools and sort by size to see which images are still too heavy. And always do a quick visual check - make sure your compressed images still look acceptable at the sizes they are displayed at.

Wrapping Up

Image optimization is not glamorous work, but it has an outsized impact. Switching to WebP alone can cut your page weight by a third. Add proper sizing, lazy loading, and decent compression on top of that, and your site will feel noticeably faster.

If you have not touched your images yet, start with the easiest win: convert your existing JPEGs and PNGs to WebP. You will see an immediate difference in file size with no visible quality loss. StackConvert's Image Converter can handle that in your browser if you want to try it out.