Why Images Matter for Web Performance

Images are typically the largest files on any web page, often accounting for 50–80% of total page weight. When images are unoptimized, they become the single biggest drag on page load speed, and slow pages cost you visitors, conversions, and search rankings.

The metric that matters most here is LCP (Largest Contentful Paint). LCP measures how long it takes for the largest visible element on the page (usually a hero image or large heading) to fully render in the browser. Google considers LCP one of the three Core Web Vitals, alongside Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS).

Google uses Core Web Vitals as a direct ranking signal. A poor LCP score (anything above 4 seconds) can suppress your rankings in search results, even if your content is excellent. A good LCP score is under 2.5 seconds. The most common cause of a failing LCP score is an unoptimized, oversized image sitting at the top of the page.

Beyond SEO, slow-loading images frustrate users. Studies consistently show that users abandon pages that take more than 3 seconds to load. Optimizing your images is one of the most valuable improvements you can make to your website, and most of it is straightforward once you know what to do.

Image Formats in 2026: Which to Use

Choosing the right image format is the first decision you make, and it has a significant impact on file size and quality. Here's a practical breakdown of every format you'll encounter.

WebP: The Default Choice

WebP is the recommended format for most web images in 2026. Developed by Google, WebP delivers significantly smaller file sizes than JPEG or PNG, typically 25–35% smaller, with comparable or better visual quality. It supports both lossy and lossless compression, as well as transparency. All modern browsers support WebP, so there's no longer any reason to default to JPEG for standard web images.

AVIF: Best Compression Available

AVIF is a newer format derived from the AV1 video codec. It achieves even better compression than WebP, often 50% smaller than JPEG at equivalent quality, which makes it ideal for large hero images where every kilobyte counts. The trade-off is slower encoding time, which can be a factor in automated pipelines. Browser support is now broad across Chrome, Firefox, and Safari. Use AVIF for your most impactful images where compression gains justify the extra processing.

JPEG: Still Acceptable, But Superseded

JPEG remains a perfectly acceptable format for photographs, and it's universally supported. However, WebP is now preferred in almost every scenario where you'd previously reach for JPEG. If you're working with an older workflow or CMS that doesn't support WebP conversion, JPEG with good compression settings is still a reasonable fallback.

PNG: For Transparency

Use PNG when your image requires a transparent background: logos, icons, UI elements, and product shots on white. PNG uses lossless compression, so file sizes are larger than JPEG or WebP for photographic content. If transparency isn't needed, switch to WebP.

SVG: For Logos, Icons, and Illustrations

SVG (Scalable Vector Graphics) is the best format for logos, icons, and any illustration built from geometric shapes. SVG files are infinitely scalable without any loss of quality, and they're typically tiny, often just a few kilobytes. They can also be styled with CSS and animated. Always use SVG for your logo and icon sets.

Formats to Avoid on the Web

  • TIFF: designed for print and archival, not web delivery. File sizes are enormous.
  • BMP: an uncompressed legacy format with no place on a modern website.
  • Unoptimized HEIC: the format used by iPhones. Browser support is limited and file sizes are not optimized for web delivery. Convert to WebP or JPEG before uploading.

Compression: Always Compress Before Uploading

Even after choosing the right format, you should compress every image before it goes onto your website. Compression reduces file size without (or with minimal) visible quality loss.

Lossless vs Lossy Compression

Lossless compression removes redundant data from the file without discarding any image information. The image is pixel-perfect after decompression. PNG and SVG use lossless compression. File size reductions are more modest.

Lossy compression discards some image data that the human eye is unlikely to notice. JPEG and WebP (in lossy mode) use this approach. You can typically compress a JPEG to 70–80% quality and see no perceptible difference, while cutting file size by 50% or more. The key is finding the right balance. Compress too aggressively and you'll see artefacts; compress too little and you leave performance gains on the table.

Recommended Compression Tools

  • Squoosh.app: free, browser-based, and excellent. Built by Google, Squoosh lets you compare the original and compressed image side-by-side in real time. Supports WebP, AVIF, JPEG, and PNG output. The best tool for manual, high-quality compression.
  • TinyPNG / TinyJPEG: free and extremely simple. Drag and drop your images, download the compressed versions. Uses smart lossy compression and consistently delivers strong results with minimal effort.
  • ImageOptim: a free Mac desktop app that batch-compresses images using multiple algorithms. Excellent for processing large numbers of files quickly.
  • ShortPixel (WordPress plugin): automatically compresses and converts images to WebP (and optionally AVIF) as you upload them to WordPress. Set it once and forget it.
  • Smush (WordPress plugin): another popular WordPress option with a generous free tier. Handles bulk compression of existing images in your media library.

If you're on WordPress, installing one of the plugin options means you never have to think about manual compression again. Every image you upload is automatically optimized.

Sizing Images Correctly

Compression alone isn't enough if you're uploading images at the wrong dimensions. Uploading a 4000px-wide photograph for a container that displays at 800px wide means the browser downloads five times more data than it needs. This is one of the most common and easily avoidable performance mistakes.

Resize images to the maximum size they will ever be displayed before uploading. If your blog post body is 800px wide, your images should be no wider than 800px (or 1600px if you want to account for high-density Retina displays).

Responsive Images with srcset

Modern HTML provides the srcset attribute on <img> tags, which allows you to supply multiple image sizes and let the browser choose the most appropriate one based on the user's screen size and resolution.

        <img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Hero image description"
>

This means a mobile user on a small screen downloads the 400px version, while a desktop user on a Retina display gets the 1600px version. The result is faster load times across all devices without sacrificing quality.

If you're using WordPress, it automatically generates multiple image sizes when you upload a file and outputs srcset attributes in its image blocks. You still need to upload images at a sensible maximum size, but the responsive serving is handled for you.

Lazy Loading

Lazy loading is a technique where images below the visible area of the page (below the fold) are not downloaded until the user scrolls toward them. This dramatically reduces the amount of data loaded on initial page visit, improving both load time and LCP score.

In WordPress and most modern content management systems, lazy loading is now enabled by default, so you don't need to configure anything. In plain HTML, adding a single attribute is all it takes:

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

The Critical Exception: Never Lazy-Load Above-the-Fold Images

This is one of the most important rules in image optimization, and it's frequently violated. Never apply loading="lazy" to your hero image or any image that is visible when the page first loads.

Lazy loading tells the browser to delay fetching the image. If that image is your LCP element, the largest thing visible on screen, the browser will delay loading it, directly worsening your LCP score. The result is a page that feels slow to render even if everything else is optimized.

For your hero image and any above-the-fold images, use loading="eager" (or simply omit the attribute, as eager is the default). You can even go further and add fetchpriority="high" to signal to the browser that this image should be prioritized.

Alt Text

Every image on your website should have a descriptive alt attribute. Alt text serves three distinct and important purposes:

  • Accessibility: screen readers used by visually impaired users read the alt text aloud to describe the image. Without it, those users receive no information about what the image shows.
  • SEO: Google cannot see images the way humans do. Alt text tells Google what the image depicts, helping it appear in Google Image Search and reinforcing the relevance of your page for related keywords.
  • Fallback display: if an image fails to load (slow connection, broken URL), the alt text is displayed in its place, preserving some context for the user.

Writing Good Alt Text

Good alt text is specific, descriptive, and contextual. It describes what is actually in the image in a way that is useful to someone who cannot see it.

Poor alt text:

  • alt="image"
  • alt="photo"
  • alt="IMG_4523"

Good alt text:

  • alt="Team of two web designers reviewing wireframes on a desk"
  • alt="Screenshot of Google PageSpeed Insights showing a 95 performance score"
  • alt="Sydney Harbour Bridge at sunset with the Opera House in the background"

Keep alt text concise, typically under 125 characters. Don't keyword-stuff it; write naturally for a human audience and the SEO benefit follows automatically. Decorative images that add no informational value (such as background textures) should use an empty alt attribute: alt="".

File Names

Before you upload any image, rename the file to something descriptive and hyphenated. This is a small step that takes seconds and provides a meaningful SEO benefit.

Google reads image file names as a relevance signal when indexing your content. A file named web-design-sydney.jpg tells Google something useful about the image and the page it appears on. A file named IMG_4523.jpg tells Google nothing.

File naming best practices:

  • Use lowercase letters and hyphens only, with no spaces, underscores, or special characters
  • Be descriptive but concise: responsive-website-design-melbourne.webp
  • Include a relevant keyword naturally where it fits: small-business-logo-design.webp
  • Avoid generic names: image1.jpg, photo.png, banner.webp

This applies to every image: hero images, blog post images, product photos, team headshots, and icons. Make it a habit before every upload.

WordPress-Specific Tips

If your website runs on WordPress, you have access to a mature ecosystem of plugins that automate most of the image optimization work described in this post.

Recommended Plugins

  • ShortPixel: automatically compresses images on upload and converts them to WebP (and optionally AVIF). Offers a generous free tier and excellent compression quality. One of the most widely recommended image optimization plugins.
  • Smush: another strong option with bulk optimization for your existing media library. The free version handles WebP conversion and lazy loading.
  • Imagify: supports AVIF output in addition to WebP, making it a good choice if you want to serve next-generation formats to browsers that support them.

Theme and Configuration Checks

  • Confirm your theme outputs srcset attributes on images. Most modern themes do, but older or custom themes may not.
  • Check that your theme does not lazy-load the hero image. Some themes apply loading="lazy" globally, which will hurt your LCP score.
  • Use Google PageSpeed Insights (pagespeed.web.dev) to audit your site after making changes. It will flag any remaining image issues with specific recommendations.

When a theme gets these defaults wrong, I fix the template directly as part of my site speed and web development work.

A Final Word

Treat image optimization as an ongoing habit. The good news is that once you've set up the right tools and workflows, most of it becomes automatic. Install a compression plugin, adopt WebP as your default format, write descriptive alt text and file names, and never lazy-load your hero image. These five actions alone will put your website ahead of the majority of competitors in terms of image performance.

Faster pages rank better, convert better, and keep visitors engaged longer. Image optimization is one of the most impactful improvements you can make, and now you have everything you need to do it right.

Most of the image problems I find come from the upload workflow rather than the host or the theme, so I start by checking what is actually being served to visitors. Send the project brief with your site URL and the pages that feel slow.