Image Optimization for Website Speed: A Practical Checklist

Last updated: July 30, 2026 · By Joseph Olivas, Founder, MEAN Consultors · 8 min read

Nearly every slow website I audit has the same root cause, and it is almost never the code. It is the images. A single un-optimized hero photo can weigh more than the entire rest of the page combined. The good news is that image optimization for website speed is one of the highest-return, lowest-risk improvements you can make, and you do not need to be a developer to work through most of this checklist. Below is the exact sequence I use on client projects, with the reasoning behind each step so you know why it matters.

Why images dominate your page speed

When a browser loads your page, it has to download every asset: HTML, CSS, JavaScript, fonts, and images. On a typical marketing or e-commerce page, images account for the largest share of that download by a wide margin. Google’s Core Web Vitals program measures how quickly your main content appears using a metric called Largest Contentful Paint (LCP), and on most pages that “largest element” is a hero image or product photo. If that image is heavy, your LCP is slow, and slow LCP hurts both your rankings and your conversion rate. That is why we treat images first when we take on a web development and performance project: it is where the biggest, quickest wins live.

Figure 1: The same 1600px hero photo exported to four formats. Choosing a next-gen format is the single biggest lever.

Choose the right format first

Format choice sets your ceiling before you compress a single byte. For the export test above, we took one high-quality product photograph and saved it identically across four formats. The PNG weighed 820 KB; a quality-80 JPEG dropped to 240 KB; WebP fell to 165 KB; and AVIF landed at just 120 KB, roughly one-seventh of the original PNG at visually identical quality. Google’s own research puts WebP lossy images 25 to 34 percent smaller than JPEG, and AVIF typically goes further still.

Size images to how they actually display

The second most common mistake is uploading a 4000-pixel-wide photo straight from a phone or stock library into a slot that only ever displays at 800 pixels. The browser downloads all four thousand pixels and then throws most of them away. Always resize the master image to the largest size it will realistically be shown at, then let responsive delivery handle smaller screens. As a rule of thumb, no image on a standard content page needs to be wider than about 2000 pixels, and most are far smaller.

Use responsive srcset so phones get phone-sized images

Responsive images let you provide several sizes of the same picture and let the browser pick the right one for the device. A phone on a slow connection should never download the same file as a 27-inch desktop monitor. Modern site builders and the WordPress media system generate these variants automatically, but it is worth confirming they are actually being used in your markup. This single change can cut mobile image payload by a quarter or more without touching quality on desktop.

Compress to visually lossless, then lazy-load the rest

Once format and dimensions are right, compression squeezes out the remaining fat. Aim for “visually lossless” — the point where the file is much smaller but you cannot see the difference at normal viewing size. For most photos, quality settings around 75 to 82 hit that sweet spot. Then apply native lazy-loading (loading="lazy") to every image below the fold so the browser only fetches them as the visitor scrolls. The one image you must never lazy-load is the LCP hero: deferring it delays the exact element Google is timing.

Figure 2: Contribution of each technique to total image-payload reduction on a typical business page.

The image optimization checklist

Here is the full sequence in the order I run it. Work top to bottom; each step compounds on the last.

• Export photos as AVIF (with a WebP or JPEG fallback); use SVG for logos and icons.
• Resize every master image to the maximum size it displays at — never upload camera-native resolution.
• Provide responsive srcset variants so mobile devices download smaller files.
• Compress to visually lossless quality (roughly 75–82 for photos).
• Add loading="lazy" to all below-the-fold images; keep the LCP hero eager.
• Set explicit width and height (or an aspect-ratio) on every image to prevent layout shift (CLS).
• Write descriptive alt text for accessibility and image SEO.
• Serve images through a CDN or image CDN once you have meaningful traffic.
• Preload the single LCP image so the browser fetches it as early as possible.
• Re-test with a tool like PageSpeed Insights and confirm LCP improved.

None of these steps requires rebuilding your site. Most can be handled through your CMS, an optimization plugin, or a short engagement with a developer. If you want the full performance picture beyond images — server response time, render-blocking scripts, caching — start with our companion guide on the 12 most common performance killers and how to fix them, and the deeper reference on passing every Core Web Vitals metric in 2026.

Frequently Asked Questions

Is image optimization for website speed really worth the effort?

Yes. On most business websites images are the single largest contributor to page weight, often 50% or more of what a visitor downloads. Because Google measures loading with Largest Contentful Paint (LCP) and that element is frequently a hero image, optimizing images is usually the fastest, cheapest way to improve both Core Web Vitals and real-world load time.

What is the best image format for web performance in 2026?

For photos, AVIF gives the smallest files and is now supported by every major modern browser; WebP is an excellent, slightly larger fallback. For logos, icons and line art, use SVG. Reserve PNG for images that truly need transparency and cannot be served as WebP or AVIF, and avoid uncompressed BMP or TIFF on the web entirely.

How much smaller are WebP and AVIF than JPEG?

Google reports WebP lossy images are typically 25 to 34 percent smaller than comparable JPEGs. AVIF usually goes further, often around 50 percent smaller than JPEG at similar visual quality. In our own export test of a single hero photo, AVIF came in at roughly one-seventh the size of the original PNG.

Should I lazy-load all of my images?

Lazy-load images that are below the fold, but never lazy-load your LCP image or anything visible on first paint. Lazy-loading the hero image delays the very element Google times, which hurts your LCP score. Add loading=”lazy” to offscreen images and leave above-the-fold images eager.

Do I need a CDN for images?

For a small local site it is optional, but a content delivery network or image CDN pays off quickly once you have traffic beyond your region. It serves images from a server near the visitor, can convert formats and resize on the fly, and reduces load on your origin server. Many modern hosts and plugins include image CDN features.

Will optimizing images hurt image quality?

Done correctly, no. The goal is visually lossless compression, where the file is dramatically smaller but the difference is imperceptible at normal viewing size. Problems only appear when you over-compress or scale a small image up. Always start from a high-quality master and export down to the exact dimensions you display.