Image Optimization for The Web: 2024 SEO and Site Speed Techniques

SEO, page speed, and user experience all massively benefit from applying image optimization techniques.

And in this guide, you’ll learn exactly how to optimize your images for the web. Step by step, with real examples.

Now, there are tons of image optimization techniques. That’s why this guide is divided into 2 sections:

• Image optimization for SEO and accessibility:

This section contains proven SEO tips like writing good alt text and using structured data. Most tips come directly from Google, so don’t expect too many surprises.

• Image optimization for website speed and user experience:

The second section will help you choose the right image type and compression level, implement responsive images, decide when to use stock photos and more.

With that in mind, 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.

Test NitroPack's powerful image optimizations on your site

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

By default, most image files are named something like “IMG_010204”.

This isn’t particularly helpful to anyone, including Google.

You want to make sure Google understands what each image depicts. That’s why giving your image files a descriptive name is an easy win.

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

(Seriously, if you’re hungry, go grab a bite. I’ll be talking about this image throughout the whole guide)

As you can see, the name isn’t fancy, but it gets the job done.

And that’s the best thing about file names:

They don’t need to be too detailed. That’s the alt description’s job.

Besides writing a clear file name, you also want to avoid keyword stuffing. You can get penalized for adding unnecessary keywords.

For example, if the photo’s file name was “amazing-spaghetti-fettuccine-pasta-dish-recipe-cook.jpg”, it would be a prime candidate for a keyword stuffing penalty.

In short, keep file names simple and descriptive. It’s not rocket science. 
 

Use Descriptive Alt Text

Alt text is the description (or the text equivalent) of the image.

Adding it is crucial for Google and for people with screen readers.

It’s incredibly important to write good alt text for all of your images. It’s also super easy.

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

If there’s a rendering problem with the image, the browser will display the alt text. That way, visitors can still understand the picture, even if it doesn’t appear.

So, how do you write good alt text?

First, you should be way more descriptive with your alt text than the file name.

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, being descriptive is your number one priority.

Avoiding keyword stuffing is also vital. I can’t stress this point enough - it’s super easy to get penalized for your alt text.

Also, don’t use unnecessary expressions like “This is a picture of…”. Of course it's a picture, why else would it have alt text?

To summarize:

• Describe the image in detail;

• Avoid keyword stuffing;

• Don’t write redundant clarifications like “This is a picture of…”

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

Stock Photo Source - https://unsplash.com/photos/eDXRq-2LfNM

A good version would be “Black modern ford mustang parked near tree at sunset”.

You can use tools like Ahrefs and Screaming Frog to check all your website’s images for alt text. It’s much easier than doing it by hand.

The Alt Text Tester Chrome extension is also great for this.

It allows you to check the alt text by hovering over the image. You can also double-tap to copy.

Don’t Put Important Text In an Image

This isn’t a technique so much as common sense.

However, people still get it wrong all the time.

So, let me put it clearly:

If you want to rank for a keyword or convey a vital message - write it down as text, don’t put it inside an image.

Check out this example:

Stock Photo Source - https://unsplash.com/photos/l8p1aWZqHvE

At first glance, you might think there’s nothing wrong. In fact, people can see this important information instantly, instead of scrolling through the text.

But this way of conveying information can ruin your SEO.

Here’s why:

Google can’t see and interpret this text. If you haven’t written it down in the HTML, you won’t rank for crucial keywords.

People with screen readers will also miss all of it.

On top of that, visitors can’t highlight or copy the text, which can be super annoying.

And if for some reason the image doesn’t render or loads slowly - you’ve missed your only chance to convey your message.

So, keep it simple - don’t place important text like SEO keywords only in images. Make sure to write it down in the HTML.
 

Use Structured Data For Products, Videos, and Recipes

Structured data is code written in a specific format that makes it easier for the search engines to interpret it.

Like many of the other techniques here, structured data makes Google’s life easier. Using it lets you spoon-feed the search engine details like price, quantity, or brand.

Let’s look at an example.

Check out how Google serves little nuggets of information under this image:

Structured data makes this possible.

Here’s how it looks in the page’s code:

Another example is our recipe page from earlier:

That’s a lot of useful information for visitors before they even click on the link.

And by combining structured data with other SEO techniques, this recipe occupies the top 2 spots in the SERP:

You can use structured data on any page. It’s not always a must, but product pages, recipes, and videos have a slim chance of ranking well without it. 

You can find tons of tips and tricks for implementing structured data online.

But at the end of the day, no one can tell you how to do it better than Google.

So, always follow Google’s official guidelines for:

• Adding markup to product pages;

• Adding markup to videos pages;

• Adding markup to recipes

Create an Image Sitemap

Image sitemaps aren’t a must, but they can definitely help larger websites.

These sitemaps help Google find images that it might’ve missed otherwise.

For example, if your website reaches some images with JavaScript, Google can have trouble finding them without an image sitemap.

Again, follow Google’s official guidelines for creating an image sitemap.

Also, if you’re a WordPress user, there are a few image sitemap plugins. Test them out - it’s much easier than creating it yourself.

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’s 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 reduced their load time to 3s and saw 50% more mobile conversions and a 98.7% lift in mobile revenue;

• Lastly, in 2020 NDTV lowered their bounce rate by 50% by improving LCP and CLS.

I can go on and on, but you get the idea. If you need more proof, check out this collection of 18 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 7x on the median mobile page!

Source - HTTP Archive's State of Images

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.

Skyrocket Your Website Speed with NitroPack - No Coding Skills Required

With that in mind, let’s get started.
 

Choose The Right Image Format

Here’s a quick checklist for choosing the right image format:

• When you can sacrifice quality for performance, use JPEG. A free image optimization tool like Optimizilla can help you adjust the compression level (we’ll talk about compression in a bit) to test different quality/size ratios;

• When you need to preserve detail and serve the highest quality image possible, use PNG. But be careful not to overuse it. The more you increase the quality, the larger the file becomes;

• For logos, geometric shapes, and fine art, use SVG. In general, use vector images whenever possible. They look amazing on all devices and don’t lose quality when expanded or shrunk;

• Lastly, a next-gen image format like WebP can boost performance even further, without sacrificing so much quality. According to Google, WebP images are 26% smaller than PNGs and 25-34% smaller than JPEGs at a comparable quality. The only downside is that next-gen formats (including WebP) don’t have 100% browser support. This makes them trickier to serve since you have to keep a backup in place for older browsers.

That’s really all you need to choose a file format. For a deeper dive on the topic, check out Shutterstock’s article on raster vs. vector images.

Reduce Image File Size

There are two ways of compressing image file size - lossy and lossless compression.

Lossy image compression eliminates some of the pixel data. Lossless compression doesn’t.

In fact, the difference between the image formats we just talked about (JPEG, PNG, WebP, etc.) is how they apply these two compression types.

JPEG is a classic example of a lossy image type. PNG is a lossless type. And WebP uses both lossy and lossless compression.

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.

Here’s what I mean:

If you have a blog, news website, or any other site that doesn’t require super high-quality images, you can crank up the lossy compression.

Because it removes data, this compression leads to a great reduction in file size. Of course, this comes at the expense of image quality.

On the flip side, if you have a photography or fashion website, you’ll probably need amazing images to stand out from the crowd. In that case, lossless compression is your best bet.

You won’t see a big file size reduction, but you’ll keep the amazing quality.

There are tons of image compression tools you can use:

• For the more technical crowd, Guetzli and Imagemin can do an awesome job;

• Even free online tools like Compress JPEG, TinyJPG, and Optimizilla can yield good results;

• At NitroPack, we also offer adjustable image quality as part of our image optimization features.
   

The hard part isn’t finding a tool. It’s striking a balance between website performance and image quality.

And there’s no other way to do that besides testing.

Only recently, we released a new sophisticated feature that reduces your image file sizes up to 4x – Adaptive Image Sizing. This type of optimization targets all images identified by a markup element for an image in HTML (including galleries, carousels, sliders, above, and below the fold images).

The way it works is it makes all images match the dimensions of the containers they’re displayed in across desktop, mobile, and tablet devices. And, yes, this means you can take a break from the repetitive bulk image resizing!

Use a Content Delivery Network (CDN)

Setting up a CDN is one of the best things you can do for site speed in general.

This also applies to image optimization.

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

Let’s say your website is hosted on a server in the USA. When a user from Europe visits, the data will have to travel from the USA to Europe.

The distance is so great that latency is inevitable.

CDNs solve this issue.

Here’s how:

The CDN stores cached versions of your website in different geographical locations.

So, when visitors from Europe come to your website, the data won’t travel all the way from the USA. It’ll come from a location that’s close to them.

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

That’s the power of a CDN - it shortens the distance between your visitors and your website.

And like the other parts of your website, images also reach the visitors faster.

You can also use image CDNs - that’s a CDN designed specifically for image delivery. They have some nice benefits but aren’t a must. For most websites, a regular CDN will do.

 

Serve Responsive Images

A common mistake people make is uploading only one large image and serving it on all viewports.

At first, that sounds like a good idea. A large image won’t lose quality when shrunk. So, to make sure it looks good on all devices, just upload the largest version you have, and voila!

Except it’s not that simple.

If your image is 700px wide it might look good on a 300px display. But all 700px still have to be processed. That’s a massive waste of bandwidth.

So, how can you keep your quality image and not waste bandwidth?

Use the srcset attribute.

This attribute points the browser to different image versions. From there, the browser decides which one to serve based on the device.

Let’s look at a quick example.

This is a standard HTML code for loading an image:

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.

One final note: WordPress (since version 4.4) automatically creates different versions of your images. It also adds the srcset attribute.

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

Remove Unnecessary Images

This is the simplest and most overlooked image optimization tip.

If an image doesn’t add to the user experience or doesn’t help you explain your point, it shouldn’t be there. Plain and simple.

Here’s what you can do:

• Open your most important pages and think about what they’re trying to accomplish;

• As you go through them, It’ll become clear which images should be there and which shouldn’t. But don’t start deleting yet;

• First, make sure you have your tracking set up. Pageviews, bounce rates, conversions, time on page - all that good stuff;

• It’s important to base this decision on data, not on your subjective opinion. By saving this data, you can compare your page before and after removing the images in question;

• Test both versions for a few weeks and choose a winner.

And if you want to compare both versions in real-time, you can use a tool like Google Optimize.

Don’t Overuse Stock Photos

Don’t get me wrong - I love free stuff as much as the next guy.

And the people that give out their high-quality images for free deserve a ton of praise.

But…

Stock photos are overused. They don’t look original, because they aren’t.

For example, how often have you seen these guys in an article about teamwork, collaboration, or a similar generic topic:

Stock Photo Source - https://unsplash.com/photos/Oalh2MojUuk

Or this picture in websites selling courses or legal services:

Stock Photo Source - https://unsplash.com/photos/5fNmWej4tAA

A quick reverse image search for the first photo returns about 5800 results.

And about 13 500 for the second one.

Yeah, that’s not super original. But even so, is this really such a big deal?

Yes, it is.

Recent research confirms that stock photos can negatively impact both your brand image and SEO. I highly recommend you read it.

If you don’t have the time, here’s a quote that perfectly describes the problems with stock photos:

 

The worst part is that they show a complete lack of effort.

Now, I’m aware that not everyone can afford professional photos or designs. And I’m not saying you should never use stock photos. You should.

But please, be strategic about it.

I mean three things by that:

• First, if you ever need an image of people working in an office, just take a few photos of your office. Your visitors will appreciate the authenticity.

• Second, when you have to use stock photos, dig a little deeper and find those that haven’t been exploited as much. Here’s a list of 24 unique stock photo websites that you can go through.

• Third, don’t use a stock photo on your home page or other vital pages. Contact a freelance photographer/designer and get a few custom images. They’re not that expensive.

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 they land on it.

Now, there are different ways to implement this technique:

• You can try native lazy loading by using the loading attribute with a value of lazy. This method is pretty easy, but it lacks browser support;

• 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.

Optimizing Images with WordPress Plugins and Services

Usually, most of the optimizations discussed here aren’t done by hand, especially on WordPress sites.

If you have a WordPress site, chances are you will use an image optimization plugin, if you aren’t already. I won’t be listing image optimization plugins here, since there are way too many options.

Instead, I’ll only focus on one crucial factor to consider when choosing an image optimization plugin:

Image optimization should be done on the cloud, i.e., not on your server. That way, your infrastructure won’t deal with heavy operations like compression and resizing.

For example, an image optimization plugin that runs on the same server as the CMS will probably require additional CPU time to resize and compress images. On the other hand, a cloud-based service (like NitroPack) does the heavy lifting for you by optimizing images in the cloud and delivering them via a CDN.

Always be mindful of how much overhead each plugin adds to your servers. Some heavy plugins can actually make your website slower by increasing the amount of code that must be executed.

Image Optimization and Google’s Core Web Vitals

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

Two of the three Core Web Vitals - Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) - can be massively affected by image optimization.

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.

Final Thoughts

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 (available in pre-release). 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.

Finally, NitroPack has everything else you need for a fast website.

If you want to test all of these features, sign up for a free NitroPack plan today (no credit card required).