Image Optimization for The Web: 2026 Proven Techniques

Image optimization for WordPress is the process of reducing image file sizes while maintaining visual quality—improving page load speed, user experience, and search engine rankings in the process.

Most WordPress themes display images at 1200–1800 pixels wide, but many of us upload files straight from cameras or stock libraries at 4000+ pixels without thinking twice.

That’s a lot of unnecessary data for browsers to chew through.

The fix involves choosing the right formats, applying compression, implementing lazy loading, and (for most sites) using plugins or cloud-based services to handle these tasks automatically.

Why does this matter? Here’s what’s at stake:

• Faster page speed: Optimized images can shave 2–4 seconds off load times, improving Core Web Vitals scores—especially LCP—that Google uses as a ranking factor.
• Better user experience: Fast-loading images keep visitors engaged. According to Google, the probability of bounce increases 32% when load times go from 1 to 3 seconds.
• Stronger SEO rankings: Search engines use image filenames, alt text, and surrounding content to understand your pages, boosting both standard rankings and image search visibility.
• Improved accessibility: Descriptive alt text makes visual content available to visitors using screen readers, while fast-loading images prevent frustrating delays for everyone.

This guide covers SEO and accessibility techniques first, then dives into speed and user experience optimization. Let’s get started.

Image optimization techniques: SEO & accessibility

Let’s get the obvious out of the way:

Unoptimized images will hurt your organic rankings. Period.

Time and time again, Google has reiterated how important image optimization is. In fact, it’s one of the topics Google’s been most open about when it comes to SEO.

Right now, images appear in both Google Search and Google Images.

For example, here’s the SERP for a highly competitive keyword – “bolognese recipe”.

(If you’re reading this right before lunch, I’m sorry)

Look up the same keyword in Google Images and you’ll find the same picture.

This example perfectly illustrates the power of image optimization for SEO.

With just one image, BBC’s website taps into two massive traffic sources.

That’s what we’re trying to do with these SEO and Accessibility techniques.

Let’s see how we can get there. 

Rename your image files

Descriptive image file names help Google understand what each image depicts. This improves your visibility in Google Image Search.

By default, most image files are named something like “IMG_010204″—not helpful for search engines or users.

For example, this is the file name of the spaghetti photo from above:

Simple and descriptive works best. Avoid keyword stuffing in file names, which can trigger penalties. Keep names clear—like “spaghetti-bolognese-recipe.jpg”—and move on.

Use descriptive Alt Text

Alt text is the text description of an image that appears when the image fails to render. Screen readers use alt text to describe images to visually impaired users. Search engines use alt text to understand image content for indexing and rankings.

You only have to add an alt attribute to the image tag, like this:

How do you write effective alt text? Be descriptive. Avoid keyword stuffing like in the file names and skip phrases like “This is a picture of…“—the alt attribute already tells browsers it’s describing an image.

Let’s go back to our recipe image:

This is an example of great alt text – it’s descriptive and detailed, without unnecessary conjunctions or keywords.

Anyone can visualize the image without even looking at it.

So, how would you write an alt description for the image below?

A good version would be “Black modern Ford Mustang parked near a tree at sunset”.

To audit your site’s images for missing alt text, use tools like Ahrefs or Screaming Frog. Both can crawl your entire site and flag images without alt attributes. 

To summarize:

• Don’t write redundant clarifications like “This is a picture of…”
• Describe the image in detail.
• Avoid keyword stuffing.

Don’t put important text in an image

If you want to rank for a keyword or convey a message, write it as HTML text—don’t embed it inside an image.

Check out this example:

This approach creates problems:

• Google can’t read text inside images. You won’t rank for those keywords.
• Screen readers skip it. Visually impaired visitors miss the information entirely.
• Users can’t copy or highlight it. That’s frustrating when they need to reference your content.
• If the image fails to load, your message disappears.

Keep it simple: Any text you want indexed or accessible belongs in your HTML, not your images. 

Serve consistent URLs

Google’s guidance recommends referencing the same image with the same URL across your entire site. This allows Google to cache and reuse the image without crawling it multiple times.

Avoid serving identical images from multiple URLs through cache-busting query strings or different CDN paths—unless you’re intentionally serving responsive variants via srcset.

And with that, we’re done with the SEO and Accessibility image optimization tips.

Let’s move on to speed and user experience.

Image optimization techniques for web: Website speed & user experience

You can’t have a fast website with unoptimized images. And a fast website is crucial for keeping your visitors happy.

Here are a few examples of the power of page speed:

• In 2012, Walmart reduced their site’s load time by 1s and saw a 2% lift in conversions.
• In 2017, Zitmaxx Wonnen achieved a perfect PageSpeed score and reduced load time to under 4 seconds, leading to a 50.2% increase in mobile conversions.
• In 2020, NDTV improved their LCP by 55%, which led to their bounce rate decreasing by 50%.

I can go on and on, but you get the idea. If you need more proof, check out this collection of 22 web performance case studies.

Of course, speed optimization is more than just image optimization.

But here’s the kicker: Images are often the biggest reason for a slow website load time.

In fact, about 50% of all bytes on the average page are image bytes. And since 2011, image bytes have increased almost 5x on the median desktop page and over 10x on the median mobile page!

That’s why optimizing your images is a massive site speed win.

Optimizing images for speed and user experience is all about finding a balance between image size, quality, and quantity.

With that in mind, let’s get started.

Choose the right image format

Choosing the right image format is one of the most effective ways to reduce file size without sacrificing quality. Each format serves a specific purpose.

Here’s how to choose:

• JPEG format handles photographs and complex images with gradients through lossy compression. Use JPEG when file size matters more than pixel-perfect clarity.
• PNG format preserves fine detail for graphics with text, sharp edges, or transparent backgrounds. PNG uses lossless compression but creates larger files than JPEG.
• SVG format scales infinitely for logos, icons, and geometric illustrations without quality loss. Use SVG for any vector-based graphics.
• AVIF format provides up to 50% smaller file sizes than JPEG at equivalent quality. WordPress 6.5+ (March 2024) supports AVIF natively—check Tools → Site Health → Info → Media Handling to verify your server supports it.
• WebP format offers 25–34% smaller file sizes than JPEG at comparable quality, according to Google benchmarks. With 97% browser support, WebP turned from a next-gen image format to the norm across the Internet.

For a deeper dive on raster vs. vector images, check out Shutterstock’s guide.

Resize images before upload

Resize images before uploading them to WordPress to match your theme’s maximum content width.

WordPress themes typically display blog images at 1200–1800 pixels wide. Yet camera phones and stock libraries provide files exceeding 4000 pixels.

Uploading oversized images forces browsers to scale them down, wasting bandwidth and increasing page load times by 2–3 seconds on mobile networks. Setting a maximum width before upload prevents browsers from processing unnecessary pixel data.

Manual compression = quality control. Plugins = scale and consistency.

🚀 Best practice: Resize images before upload to WordPress for quality control on hero images, then use plugins for ongoing compression, format conversion, and lazy loading automation.

Reduce image file size

Speaking of, what’s image compression?

Image compression aims to reduce the file size of images without significantly impacting the quality.

Compression can either be lossy or lossless:

• Lossy compression permanently removes some data, resulting in a smaller file size but with some loss of quality.
• Lossless compression reduces file size without removing any data. The quality stays the same, but the file size is usually larger than with lossy compression.

Different image formats use different compression types:

• JPEG images use lossy compression.
• PNG images use lossless compression.
• WebP images use both lossy and lossless compression.

Image file size directly impacts Largest Contentful Paint timing through network transfer duration. Compression reduces file sizes by 50–80% through lossy optimization, improving LCP scores by decreasing download times.

This is a pretty complex topic, which I can’t cover in detail here. If you’re interested, check out this image compression deep dive.

For now, it’s important to know that there’s no “good” or “bad” compression level. It all depends on your website.

For instance, if you’re a photographer showcasing your portfolio, you might want to reduce the level of compression to avoid losing too much detail.

On the other hand, if you’re running a blog, you’ll be fine with more aggressive compression.

There are different tools for image compression – Guetzli, Imagemin, TinyPNG, and Optimizilla, to name a few.

Manual pre-upload optimization works best for sites publishing fewer than 10 images weekly, where batch processing through these tools is manageable. Sites publishing 10+ images weekly benefit from plugin automation that handles new uploads and bulk-processes existing media libraries.

At NitroPack, we apply image optimisation techniques, such as intelligent lossy compression, by default. You can also manually adjust image quality in the dashboard:

We also have a feature called Adaptive Image Sizing that makes sure images match and don’t overflow their containers.

Remove image metadata

Image files from cameras and smartphones contain EXIF metadata including GPS coordinates, camera model, and date/time stamps. This metadata adds 50–200 kilobytes per image without affecting visual appearance.

Removing metadata reduces file size and eliminates privacy concerns from embedded location data. Most WordPress image optimization plugins automatically strip EXIF data during compression.

WordPress itself does not remove EXIF data on upload. Users uploading photos directly from smartphones retain full metadata unless a plugin or service removes it during optimization.

Use a Content Delivery Network (CDN)

A CDN improves WordPress image performance by storing cached copies of images on servers worldwide, reducing load times for visitors regardless of their geographic location.

If you aren’t familiar with CDNs, check out our beginner CDN guide. For now, here’s a quick TL;DR:

Without a CDN, your website’s images are served from a single server location. This means that if your server is in the USA and a visitor from Europe requests an image, it has to travel across the Atlantic Ocean. That’s a lot of latency.

With a CDN, your images are cached on servers all over the world. When a visitor requests an image, it’s served from the server closest to them. This reduces latency and speeds up image delivery.

The same goes for visitors in South America, Africa, Asia, or anywhere else where the CDN provider has servers.

There’s also a specific type of CDN called an Image CDN. Image CDNs are optimized specifically for serving images. They can automatically resize, compress, and convert images to next-gen formats like WebP on the fly.

Serve responsive images

A common mistake is serving the same large image on all viewports.

For example, if you upload a 700px wide image, it will be served on all devices – even if the visitor is using a 300px wide screen.

This is a waste of bandwidth and can slow down your site significantly.

The srcset attribute points the browser to different image versions based on device viewport width. Responsive images using srcset serve different file sizes based on screen dimensions, allowing mobile devices to download smaller files while desktops receive higher-resolution versions.

Let’s look at a quick example. This is a standard HTML code for loading an image:

< img src="CatPhoto.png" alt="Sleeping white cat"›

This piece of code uses the src attribute, which tells the browser where to find the image.

Let’s add srcset to the mix:

Now we’re providing links to 3 other versions – small, medium, and large. From there, the browser chooses the best one, depending on the viewport.

That’s the power of srcset. Our images always look awesome, and we don’t have to do anything after the initial setup. The browser does all the heavy lifting.

Airbnb’s website uses this approach:

All you have to do is run a few tests to see how your images look on different devices. This will help determine what image sizes to provide.

To do that, use Chrome’s DevTools.

Open your page, right-click, and select “Inspect”. The “Elements” tab has information about your images.

From there, you can select different devices, shrink or expand the viewport, and do all sorts of tests.

If you’re a WordPress user, you only need to provide the right image sizes.

Bonus Tip: Lazy load (Defer) offscreen images

This final tip isn’t really about image optimization, but it can have a massive impact on initial load time.

In fact, lazy loading images can speed up load times even more than image optimization!

Here’s how it works:

Lazy loading (or deferring) offscreen images means using a set of techniques to load only the images that visitors are currently looking at.

Offscreen images aren’t visible before the user navigates to them. Deferring them makes sure they’re loaded after other, more critical resources.

Also, the initial page load time is much faster, since the browser has to process fewer resources at once.

Here’s an example of how lazy loading works:

As you can see, most below-the-fold images are loaded as the user scrolls down the page, not when the page loads.

While lazy loading improves performance for below-fold images, your hero or featured image—typically the LCP element—should load immediately. Use fetchpriority="high" with loading="eager" on your largest above-the-fold image, and loading="lazy" on below-the-fold images.

<img src="hero.jpg" fetchpriority="high" loading="eager" width="1200" height="800" alt="...">
<img src="secondary.jpg" loading="lazy" width="800" height="600" alt="...">

Now, there are different ways to implement this technique:

• Native lazy loading uses the loading=”lazy” attribute, now supported by 95% of browsers (Chrome, Firefox, Safari, Edge). WordPress 5.5+ (August 2020) automatically adds loading=”lazy” to images uploaded through the media library. Older browsers that don’t recognize the attribute simply load images normally without errors;
• You can use the Intersection Observer to register which images should be lazy-loaded. This method requires writing a bit of JavaScript. You can find a great example of the Intersection Observer in action here;
• You can also automate the process with NitroPack. Our service lazy loads all images (including background ones).

For a deeper dive into this topic, check out our article on deferring offscreen images.

Image optimization and Google’s Core Web Vitals

If you care about SEO, you probably care about Core Web Vitals as well.

Google measures user experience through three Core Web Vitals metrics: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Two of these—LCP and CLS—are directly tied to image optimization, since images are usually the largest elements on a page and can cause layout shifts when dimensions aren’t specified.

Here’s why:

• LCP measures how long it takes for the largest above-the-fold element to appear on a page. That element is usually an image. If the image isn’t optimized and delivered quickly, LCP takes a hit, which could result in poor Core Web Vitals performance.

• CLS measures a page’s visual stability. When images don’t have dimensions (width and height attributes), the browser doesn’t know how much space to allocate for them in advance. This results in unexpected layout shifts when the images appear on screen, which worsens your CLS score.

Pretty much all of the techniques discussed in this article can improve LCP or CLS in some way. For some websites, image optimization alone can be the difference between passing and failing the Core Web Vitals assessment.

However, a word of caution when it comes to lazy loading: Lazy loading images without reserving enough space for them is a recipe for disaster.

Remember, deferred images appear when users scroll to them. If there isn’t sufficient space allocated in advance (for instance, via a placeholder), there will be a large layout shift when the image appears on the screen. Again, this can ruin your CLS score and the visitors’ experience.

There are different ways to lazy load images and to reserve space for them. For more details, check out our article on deferring offscreen images.

“Looking at Core Web Vitals data across 254,000+ WordPress sites, image optimization consistently delivers the biggest performance gains. We’ve seen properly sized and compressed images move LCP scores from 4+ seconds down to under 2.5 seconds. Adding width and height attributes eliminates most CLS issues entirely. For many sites, these two changes alone make the difference between passing and failing Core Web Vitals.“

— Georgi Bebenov, Sr Manager, Engineering at NitroPack

Optimizing Images with WordPress Plugins and Services

Most of the optimizations we’ve discussed aren’t done by hand—especially on WordPress sites with hundreds or thousands of images.

That’s where plugins and services come in. They handle compression, format conversion, resizing, and lazy loading automatically, so you’re not manually processing every image before upload.

Some plugins process images locally, using your server’s resources to compress and convert files. Others offload the work to cloud-based infrastructure, which keeps the heavy lifting off your hosting environment.

There are two main approaches to automated image optimization:

• If you’re looking for dedicated image optimization, tools like Smush, EWWW Image Optimizer, Imagify, ShortPixel, and Optimole focus specifically on compression and format conversion. 
• For a more unified approach, services like NitroPack bundle image optimization together with caching, code minification, and CDN delivery—so you’re not juggling multiple plugins.

“If you have a site with a lot of content, especially images, it is SO WORTH IT. I had two big sites that were very content/image heavy and no other optimization plugin was cutting it. I loaded Nitro and it is LIGHTNING fast now!!” – @jdangelo01

What WordPress handles natively

WordPress has added some optimization features over the years. Since version 5.5 (August 2020), it automatically adds loading="lazy" to images. And WordPress 6.5+ (March 2024) supports AVIF uploads natively—provided your server has the right image processing libraries.

But here’s the gap: WordPress won’t automatically convert your existing JPEGs and PNGs to WebP or AVIF. It also won’t convert new uploads to these formats.

That’s exactly what image optimization plugins do. They convert images to modern formats during compression and serve the best version to each visitor’s browser, with the original as a fallback.

Which approach is right for you?

Dedicated image plugins give you granular control—you can tweak compression levels, choose specific formats, and fine-tune quality settings. All-in-one services trade some of that control for simplicity, handling optimization alongside caching and delivery without the configuration overhead.

Neither approach is universally better. It depends on how much control you need versus how much time you want to spend managing settings.

Start optimizing: NitroPack handles everything

Now that you understand what image optimization can do let me reiterate three crucial points:

• First, when it comes to SEO, always follow Google’s best practices for working with images. You really don’t need a guru here. Google gives you all of the information for free;
• Second, don’t be afraid to delete images if they don’t help your bottom line. I know removing images always seems too easy to work. But it does;
• Lastly, consider using a tool to automate the performance aspect of image optimization for you. Doing everything by hand might be fine for a small website, but as you add more and more images resizing, compressing, and changing image types gets very time-consuming.

For example, here’s what NitroPack can do for you:

• Image compression. By default, NitroPack uses lossy compression to reduce image file size. You can also manually adjust image quality from the Advanced Settings;
• WebP conversion. For all browsers that offer WebP support, NitroPack will serve a WebP version of your images;
• Preemptive image sizing. NitroPack solves the problem of missing width and height attributes without adding them. This speeds up rendering and reduces layout shifts;
• Adaptive image sizing. This feature makes sure that images match and don’t overflow their containers;
• NitroPack also comes with a built-in CDN and automatically lazy loads all images, videos and iFrames.

We’ve also partnered with Google on Core Web Vitals education—including a joint webinar—and were recognized as the #1 site speed solution in the first global Core Web Vitals Technology Report, with 52% of our 254,000+ users consistently passing all three metrics.

If you want to test all of these features, sign up for a free NitroPack plan today.

Related articles

Page Speed

How to Run Local Performance Tests with Google Lighthouse

Dec 9, 2022 10 min read

Page Speed

Cache Invalidation: What Is It and Does Your Website Need It?

Mar 11, 2020 7 min read