Image Optimization: The Easiest Win for a Faster Website

By Brian Hunter · Founder, Hunter Creative Media & Design

If your website is slow, there is a very good chance that images are the primary reason. We audit sites regularly and the story is almost always the same: a beautiful design loaded with photographs that were uploaded straight from a camera or stock photo site at full resolution with zero optimization. The result is pages that weigh 5MB, 10MB, sometimes more, when they should weigh under 1MB.

Image optimization is the single easiest, most impactful performance improvement you can make to most websites. The techniques are straightforward, the tools are largely free, and the results are immediately measurable. Let us walk through everything you need to know. This post covers one piece of a bigger system, and we mapped out the rest in our step by step guide to fixing website performance.

Why Images Are Usually the Biggest Culprit

On an average web page, images account for roughly 50% of the total page weight. On image-heavy pages like portfolios, real estate listings, or e-commerce product pages, that number can climb to 80% or more.

Here is what we typically find when auditing a slow website:

• Hero images exported at 4000×2600 pixels when the display area is 1400px wide
• JPEG files saved at maximum quality (100%) when 80% quality is visually indistinguishable
• PNG files used for photographs instead of JPEG or WebP
• No lazy loading, meaning every image on the page loads immediately whether the user scrolls to it or not
• No responsive images, meaning a phone downloads the same 2MB file that a desktop does

Each of these is fixable. Combined, fixing them all can reduce page load time by 50-80%.

Modern Image Formats: WebP and AVIF

The most impactful single change you can make is switching from legacy formats (JPEG and PNG) to modern formats.

WebP

WebP is a format developed by Google that provides significantly better compression than JPEG and PNG. On average, WebP files are 25-35% smaller than equivalent-quality JPEGs and up to 80% smaller than PNGs with transparency.

Browser support for WebP is now universal among modern browsers. Chrome, Firefox, Safari, and Edge all support it. The only holdout is very old browser versions that represent a negligible share of web traffic.

AVIF

AVIF is the newer kid on the block, offering even better compression than WebP, typically 20-30% smaller at equivalent quality. It is based on the AV1 video codec and produces excellent results, especially for photographic content.

Browser support for AVIF is strong and growing. Chrome, Firefox, and Safari all support it as of their recent versions. Edge support is also available.

Which Format Should You Use?

Our recommendation for most sites:

• Use WebP as your primary format. It has the broadest support and the tooling is mature.
• Offer AVIF where possible as a preferred option, with WebP as a fallback.
• Keep a JPEG/PNG fallback for the small percentage of users on very old browsers.

The HTML <picture> element makes this easy:

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

The browser picks the first format it supports, so modern browsers get the smallest file while older browsers gracefully fall back to JPEG.

Compression: Finding the Sweet Spot

Compression is where the biggest file size savings happen. Most images on the web are dramatically over-quality for their purpose.

Lossy vs. Lossless Compression

• Lossy compression discards some image data to achieve smaller file sizes. For photographs and most web images, lossy compression at 75-85% quality is visually indistinguishable from the original. This is where you get the biggest savings.
• Lossless compression reduces file size without discarding any data. The savings are smaller (10-30% typically), but the image is pixel-perfect. Use lossless for logos, icons, and images where precision matters.

Real Before-and-After Comparisons

Here are actual file sizes from recent client projects:

These are not cherry-picked examples. These reductions are typical when going from unoptimized originals to properly compressed WebP. On a page with five or six images, you are looking at saving 5-10MB of download weight. That translates directly to seconds off your load time.

Compression Tools We Recommend

For Manual Optimization

• Squoosh (squoosh.app): Google’s free, browser-based tool. Drag an image in, adjust format and quality, see a real-time side-by-side comparison. Best for one-off optimization.
• TinyPNG / TinyJPG: Simple drag-and-drop compression. Handles both PNG and JPEG. Free for up to 20 images at a time.
• ImageOptim (Mac) / FileOptimizer (Windows): Desktop applications that compress images in bulk without quality loss.

For WordPress Sites

• ShortPixel: Our go-to recommendation. Compresses on upload, offers WebP conversion, and can bulk-optimize your existing media library. Affordable pricing.
• Imagify: Made by the WP Rocket team. Similar functionality with a clean interface.
• EWWW Image Optimizer: Handles compression locally on your server instead of sending images to an external API. Good for sites with privacy concerns.

For Development Workflows

• Sharp (Node.js): Fast, efficient image processing library. We use this in our build pipelines.
• ImageMagick: The command-line standard for batch image processing.
• Vite/Webpack image plugins: Automatically optimize images during the build process.

Responsive Images with srcset

Serving a single image size to all devices is wasteful. A visitor on a phone with a 400px-wide viewport does not need a 2400px image. The srcset attribute lets you provide multiple image sizes, and the browser picks the most appropriate one.

<img
  src="hero-800.webp"
  srcset="
    hero-400.webp 400w,
    hero-800.webp 800w,
    hero-1200.webp 1200w,
    hero-1600.webp 1600w,
    hero-2400.webp 2400w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1400px"
  alt="Description of image"
>

This tells the browser: here are five sizes of this image. Based on the viewport width and display density, pick the one that fits best. A phone gets the 400px version (maybe 30KB), while a high-DPI desktop monitor gets the 2400px version (maybe 250KB).

WordPress generates multiple image sizes automatically when you upload. If your theme is properly coded, it uses srcset by default. If it is not, that is worth fixing.

Lazy Loading

Lazy loading defers the loading of images that are not visible in the viewport until the user scrolls to them. On a page with 20 images, only the first two or three in the viewport load initially. The rest load on demand.

This improves initial page load time dramatically because the browser is not downloading images the user may never see.

Native Lazy Loading

Modern browsers support lazy loading natively with a single attribute:

<img src="photo.webp" alt="Description" loading="lazy">

That is it. No JavaScript, no libraries, no complexity. Browser support is universal among modern browsers.

Important: Do Not Lazy Load Above-the-Fold Images

Your hero image, logo, and any images visible without scrolling should load immediately. Lazy loading these creates a jarring experience where the user sees blank spaces that pop in after a delay. Use loading="eager" (or simply omit the loading attribute) for above-the-fold images.

Google’s Core Web Vitals specifically penalizes Largest Contentful Paint (LCP) delays, and lazy loading your LCP image is a common cause of poor LCP scores.

Proper Sizing: Stop Serving Giant Images

This sounds obvious, but it is the single most common image optimization mistake we encounter: uploading images far larger than they will ever be displayed.

Here are practical guidelines:

A rule of thumb: the image file should never be more than twice the dimensions of its largest display size (the extra pixels account for high-DPI/Retina screens).

CDN Delivery

A Content Delivery Network caches your images on servers distributed around the world, so visitors download them from a location geographically close to them rather than from your single origin server.

For images specifically, services like Cloudflare, BunnyCDN, and Imgix offer additional features:

• Automatic format conversion: Serve WebP or AVIF automatically based on the browser’s capabilities, without you needing to create multiple versions.
• On-the-fly resizing: Request an image at any dimensions via URL parameters. The CDN generates and caches the resized version.
• Quality optimization: Automatically compress images to a target quality level.

Cloudflare’s free tier includes CDN caching and is a solid starting point for any website. For image-heavy sites, a dedicated image CDN can simplify your optimization workflow significantly.

A Practical Image Optimization Checklist

Here is the process we follow for every site we build or optimize:

1. Audit current image sizes. Open DevTools, go to the Network tab, filter by images, and sort by size. Identify the worst offenders.
2. Resize originals to appropriate dimensions before uploading.
3. Convert to WebP (or AVIF where supported) at 75-85% quality.
4. Implement responsive images with srcset for key images.
5. Add lazy loading to all below-the-fold images.
6. Verify above-the-fold images load eagerly and are not delayed.
7. Set up a CDN if you have not already.
8. For WordPress sites, install an image optimization plugin to handle compression and WebP conversion automatically going forward.
9. Test with PageSpeed Insights and verify the “Properly size images” and “Serve images in next-gen formats” audits pass.
10. Document your image standards so everyone who adds content to the site follows the same guidelines.

The Impact Is Immediate

Unlike many SEO or performance improvements that take weeks to show results, image optimization produces instant, measurable improvements. Compress your images today and your site is faster today. Your PageSpeed score goes up today. Your bandwidth costs go down today.

For one client in the home services industry, optimizing their 40-image gallery page brought the page weight from 18MB down to 1.2MB and the load time from 11 seconds to 2.1 seconds. Their bounce rate on that page dropped by 35% in the first month.

This is not advanced rocket science. It is basic web hygiene that a surprising number of businesses overlook.

Keep Reading

• How Google Reviews Impact Your Local Search Rankings
• Building Intake Forms That Actually Work: From PDF to Web App
• Lazy Loading, Defer, and Async: Loading Your Site the Smart Way

Every image on a site we ship earns its bytes. Dr. Samiya Hashmi’s functional medicine site is a good example, and the case study has the full breakdown.