Image Optimization For The Web: The Essential Guide
SEO. Page speed. User experience. Conversions.
They all benefit massively 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.
Here’s the deal:
There are tons of image optimization techniques. That’s why this guide is divided into 2 sections:
1. Image optimization for SEO and Accessibility:
In this section, I’ll focus on classic tips that have been proven to produce SEO results like writing good alt text and using structured data.
2. 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, this may be the topic Google’s been the 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
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-fettucine-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, like this:
If there’s a rendering problem, 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 put unnecessary expressions like “This is a picture of…”. Of course it's a picture, why else would it have alt text?
- 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 - unsplash.com - https://unsplash.com/photos/eDXRq-2LfNM
A good version would be “Black modern ford mustang parked near tree at sunset”.
Now, what if you aren’t sure if your old images have good alt text?
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.
That doesn’t stop people from getting 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 - unsplash.com - 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 image SEO.
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 in images.
Use Structured Data For Products, Videos And Recipes
This is one of the most important tips for boosting your organic traffic.
Like many of the other techniques here, structured data makes Google’s life easier. By implementing it, you can spoon-feed the search engine specific information like price, quantity, or brand.
So, what is structured data?
Structured data is code written in a specific format that makes it easier for the search engines to interpret it.
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 in all your pages. It’s not a must for everyone, but product pages, recipes and videos don’t have a chance at ranking at the top 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:
If you’re unsure about something, refer to Google’s General structured data guidelines.
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.
Here are the tags you can use in your image sitemap:
Source: Google Search Console Help Center - https://support.google.com/webmasters/answer/178636?hl=en
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 how important speed is:
When the NCC Group reduced the average page load time for one of their clients by 850 milliseconds they saw the following results:
Source: Web Performance Case Study by the NCC Group for COOK
Over 10 years ago, Amazon also found that every 100ms of latency cost them 1% in sales.
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 images bytes.
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 if you don’t want to spend too much time testing image types, go with WebP. According to Google, WebP images are 26% smaller than PNGs and 25-34% smaller than JPEGs. The only downside is that WebP still doesn’t have 100% browser support.
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 The Image File Size
There are two ways of reducing (compressing) the file image file size - lossy and lossless compression.
Lossy 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 method. 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.
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, I highly recommend Imperva’s Essential 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.
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. That’s why using a CDN is huge for image optimization.
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. If you don’t already have a CDN, I highly recommend you get one right away.
Here’s a list of the top 16 CDN providers in the world to get you started.
Serve Responsive Images
A common mistake people make is uploading only one large image and serving it on all viewports.
At first glance 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 the heavy lifting.
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. In a lot of cases, you’ll be surprised by the results.
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.
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 - unsplash.com - https://unsplash.com/photos/Oalh2MojUuk
Or this picture in websites selling courses or legal services:
Stock Photo Source - unsplash.com - 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.
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 recognisable 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.
Now that you understand what image optimization can do let me reiterate some crucial points.
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.
Finally, consider using a tool to solve most of the image optimization problems for you.
For example, here’s what NitroPack can do for you:
- Image compression. NitroPack uses both lossy and lossless compression. You can adjust your image quality and compression strength with a few clicks. This is great for testing and finding that balance between quality and size we talked about.
- WebP conversion. For all browsers that offer WebP support, NitroPack will serve a WebP version of your images.
- Preemptive image sizing. NitroPack automatically adds width and height properties to your images. That way, the browser knows how much space to designate for each image in advance. This speeds up the rendering of your page tremendously.
- Adaptive image sizing (available in pre-release). This feature makes sure that images match and don’t overflow their containers. This is an awesome boost to page speed, as it reduces the image size.
- NitroPack also comes with a pre-built CDN.
Finally, NitroPack takes care of all other aspects of page speed for you like caching, code minification, critical-rendering path optimization and more.
If you want to test all of these features, sign up for a free NitroPack plan today (no credit card required).