Image Optimization For The Web: The Essential Guide

Last updated on Jun 23rd, 2021 | 15 min

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

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:

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.

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.

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)

Image in SERP Example

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

Bolognese Recipe in Google Images

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:

Bolognese Image File Name

(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:

Alt Text Code Example

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:

Recipe Image Alt Text Example

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?

Black modern mustang near tree at sunset

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.

Alt Text Chrome Extension Example

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:

Blue Nike Sneakers

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 specific information like price, quantity, or brand.

Let’s look at an example.

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

Black Sneakers Google Images With Structured Data

Structured data makes this possible.

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

Structured Data Code Example

Another example is our recipe page from earlier:

Structured Data Bolognese Recipe Example

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:

Bolognese Recipe Top 2 SERP Spots

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:

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

Let’s move on to speed and user experience.

Image Optimization Techniques: 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 their 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!

Image Bytes Average Webpage

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.

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 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 reducing (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 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 flipside, 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 tools you can use to compress images.

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

Adjust image quality NitroPack

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.

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.

Data Traveling Without CDN

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.

Data Traveling With CDN

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.

Important note: Make sure your CDN provider lets you add a canonical header for images on their CDN. This header tells Google that the CDN image is a copy and points the search engine to the original, which is crucial for SEO.

 

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:

Image Code Example SRC Attribute

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:

Airbnb website

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.

Chrome DevTools Image Size

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:

People Working on Whiteboard

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

Or this picture in websites selling courses or legal services:

People Collaborating With 2 Laptops

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

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

Reverse image Search Example

And about 13 500 for the second one.

Reverse image Search2

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

Yes, it is.

A 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:

“There is no doubt that there is no better way to express the uniqueness and the personality of your company through real pictures. Stock pictures, although great when you need something quick are often soulless and impersonal. It seems that stock pictures are in most cases instantly recognizable as such and with that recognition comes slight brand image damage.”

 

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.

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.

NitroPack Features

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