This post will be dedicated to tips on how to optimize images for SEO.
A lot of people are arguing that image SEO is dead, because of the Google AI for image recognition.
But I have to argue that, that is not true.
Image SEO optimization is still alive.
And Google AI isn’t perfect.
So it’s a good idea to turn that into your advantage.
Search engine bots are still relying on text to identify what the images are all about.
It also offers you an additional ranking option.
But first things first.
Should You Use Images?
The answer to that should be categorical YES.
We live in a world where you can add additional context with images and make your post even better.
As we see the visual search is getting more and more important
So the answer is yes you should use images in all your posts and pages.
It’s also worth noting that it will improve your user experience.
What Does Image Optimization Mean?
It means that you reduce the size of your images to the lowest possible point so that your website loading speed is fast.
Besides that, you also have in mind that you don’t reduce the quality of the image.
Image optimization also includes image SEO which will help you rank your images in image search.
Now let’s see the tips.
Tips To Optimize Images For SEO
This is where the fun begins.
Here you’ll find out how to optimize the images for the web so that you make your website fast and SEO friendly.
1. Be Careful When Using Stock Photos
When using images on your website it’s not about having stock photos.
It’s about having inspiring, and original photos.
Especially avoid stock photos that are widely used.
Remember any bank websites or maybe corporate websites?
You know that smiling businessman or businesswomen.
Be unique with them.
No image optimization will help with that.
2. Choose the Right Images
Use high-quality images. If possible unique and original images.
I know that’s not always possible, but try to use them as a story amplifiers not just something you put on your page.
If you need an idea to find some great images, check out our collection of websites with free images.
Some of these sites are set up by photographers that share some amazing original images.
Another option is to create your own.
By that, I don’t only mean by photographing them but creating your visuals.
This can be done by a designer or if you want to do it yourself, you can with some tools.
They can be infographics, data representation.
I mean when you are showing something or explaining you can even use screenshots.
Have a purpose behind your images and graphics.
Don’t force it. Let them compliment your content.
3. Check the Copyright and Licence
I’ve seen quite some people that have taken images directly from Google image search.
But please don’t do that. Unless you search for images that can be reused.
You can get into trouble.
Well, the word trouble is really downplaying it. It can become expensive.
On most sites, you can see if the image is free and you can use it and on which terms.
If you still want to use Google, here is a way to find images that can be reused, but still, make sure you check that there are no restrictions.
Even Google will tell you that.
First, you go to Google and search for your topic.
I searched for a “car”.
Then click on images. You’ll see in my image that I am already there.
Then click on settings and choose advanced search from the dropdown menu.
Once the advanced search opens up, go to the bottom where it says “Usage rights” and select “free to use, share or modify, even commercially” from the dropdown menu.
See the image.
As said above, still check for copyrights and license.
If you are not sure, contact the site owner.
It’s better to be on the safe side.
4. Chose the Right Image File Type For Your Needs
There are different image formats that you can use.
All of them serve a different purpose.
The most common image formats are:
- JPEG
- PNG
- GIF
- WEBP (new)
JPEG Image format
This is the most common format used, as it’s suitable for photographs and it offers the second best ratio between file size and quality when optimized.
It works great with colors, plus its commonly supported.
The downside of it is that it doesn’t support transparency like GIF’s or PNG’s.
PNG format
It supports transparency and can store layers.
The most common use is for logos, as the image is small maintains its quality.
This format is not the best solution for colorful photograph images as the file size will be enormous an affect the page loading speed.
GIF format
This format is also more suitable for small sized images.
It only has 256 colors, similar to PNG-8.
The advantage of GIF format is that it can be and is used for short animations.
As PNGs, it can also be used for logos.
It also supports transparency the same as PNGs.
The industry leaders are not recommending it for photographs or images, as it can be quite a load on the website and by that on the loading speed.
WEBP Format
This is a new format introduced by Google in 2010.
The format had a slow start because not a lot of browser support was there.
But as the time has passed the support grew and now it’s starting to be a serious contender.
Especially if you consider that it can replace both the PNGs and JPEGs, plus it can reduce the size by 30 % with the same quality of an image.
That’s huge and speed is an important aspect of SEO and image SEO.
But it is worth noting, that some versions of browsers don’t support it, so you will have to make sure your website is serving JPEG and PNG format to those.
This can be done in WordPress with a plugin WEBP Express or either a cloud-based software like this one called Cloud Image. You can start for free.
5. Make Sure You Name Your Images Appropriately
Yes, even the file names matter.
If you name your file in a descriptive way you’ll help Google identify the object on the image easier.
But anything is better than “untitled-1.jpg”.
Let’s say that you have an image of a dog.
Then name it “dog.jpg”, or “my-new-dog.jpg”.
It’s a good idea to use keywords in your file names.
But remember that a file name should be short, so don’t go overboard with the file name.
It should make sense.
You can see more about what Google says about it here.
6. Create Descriptive Alt Text and Image Descriptions
Alt text is the text that is shown on screen when the browser has problems loading your image.
This usually happens on slower connections.
It’s also the text that is shown to users that are using screen readers.
Alt text improves your websites accessibility and user experience.
Besides what says above, writing appropriate alt text is also a good part of an on-page SEO.
So make sure you include words associated with the image.
It also provides valuable information to Google, so it knows what to show in an image search for a certain query.
Example:
<img src=”bubblegum-2.jpg” alt=”bubblegum”>
It would be even better to make it like this:
<img src=”bubblegum-2.jpg” alt=”Pink cherry flavored bubblegum”>
In some countries, there is a law that demands the usage of alt text for people with disabilities who can’t view the image.
7. Create Descriptive Image Captions
The image captions are one of image SEO best practices.
What’s more important is that they are visible to your visitor.
They can give a more detailed context of an image and provide a better user experience.
It’s even said by many experts that if you include captions they can decrease bounce rate.
The thing is that we don’t always read the full article but to better understand it we are drawn to captions.
So it’s a good idea to have descriptive captions included to better illustrate what the image is about.
They also give extra insights to search engines to better understand the image.
8. Use Images of the Right Size
While the images are a must on your website and in your blog posts, they are also the main reason behind slow loading speeds.
It’s for this reason that it is important for you to make your images (width or height) fit your needs.
A good practice is not to make them a lot bigger than you need them to be.
You may be asking, but doesn’t the browser fit the image to the required size?
The answer is yes it does.
But the problem is that the browser still has to load the full-sized image, even if it shows it only in a width of 500 px.
On my blog, every image (except for the featured one) is 800 px wide, never more.
This can be different for you, it’s your call but remember that bigger the image (pixel-wise), the bigger the file size.
And with that in mind, the browser needs more time to load it.
You can resize the images in Photoshop or any of these free photo editors.
If that is not enough or you just want to resize them in bulk, here is a great tool to do so.
Just remember that you need to change the width.
The height will change automatically.
9. Reduce the File Size
Now that you have reduced the image size (yes even some file size), it’s time to reduce the file size.
To do that you can again use Photoshop or Gimp and combine file size reduction with image resizing.
If you don’t have any of the tools or you are not comfortable using them, there are other tools to use.
One thing to note when reducing the size of the image is, that you are reducing the quality of the image.
But don’t be afraid to do it.
The results will most likely still be a great looking image with a big size reduction.
To know if your images need a size reduction you can simply run a Google Page Speed too, and it will tell you which ones are in need of size reduction.
Here are some of the tools to use:
- ImageOptim (Google suggested)
- ShortPixel (WordPress plugin also available)
- TinyPNG
- Compressor
- Optimizilla
Remember that none of these work with .webp format, except the ShorPixel.
Webp format itself should optimize the jpeg and png files even further.
10. Use and Create Image Sitemap
It’s a way to tell Google about your images.
Similar as you create a sitemap for your pages and posts.
This means that if you create an image-sitemap.xml and list all of your images in this file, your images will have more chances to be shown in image search.
The image sitemap will also help you tell search engines about images that have been uploaded through javascript.
Let’s see the tags that are used in it.
If you use WordPress this task is a breeze, as you can use Yoast SEO plugin that creates an image sitemap automatically.
Just remember that Yoast SEO doesn’t add captions in it, even if you created them.
This is something you need to add by yourself.
11. Use GeoTagging in Your Images
Adding Geo data into the metadata of an image can have its benefits for showing the image when someone is searching that specific location.
It’s really useful for Photographs as it can help them rank their images.
This can be done with special tools:
These two tools are free.
If you have Adobe Photoshop you can do it there too, see the image below.
Or if you use Gimp there is an option to do that too.
See the image below to know where to look
That’s about GEO tagging. Let’s get to the next one.
12. Use Images As Citations
If you don’t know what I am talking about, don’t worry.
Citations are mentions of your business that can help you rank in local SEO.
And a good thing is that you can embed this data into images and then use them as citations on platforms where you can publish them.
Use your NAP and be consistent to improve your local SEO.
The tools above can be easily used for this purpose too.
Just don’t upload them to your website.
13. Be Careful With Decorative Images
What are decorative images?
Well, these are images that you use as backgrounds, buttons or borders.
Background images can be a great addition, but they can also slow down your website.
Make sure that you use CSS boxes and backgrounds where you can.
This can really help your website speed.
If you want to use images or graphics use SVG graphics.
They are smaller in file size and hold the quality no matter how small or big you make them.
You can optimize SVGs with this tool suggested by Google called SVGOMG.
It’s a web app so it’s not a difficult tool to use.
See how the size has reduced shown in a blue box.
14. Use Responsive Images On Your Website
This means that the image is exactly the size that the browser needs.
Or near as possible not too much bigger.
So on desktop, you have an image that is 2500 x 1000px and that’s fine.
But then your user comes on your website with a mobile device that has the screen width of 350 px.
Yes, the browser will scale it, as we already talked about.
But it will still load that massive image.
That’s why it’s important that you serve an image that is more appropriate to the screen size.
Now if you use WordPress this is done for you automatically.
The WordPress backend inserts the srcset attribute when you upload the image.
Otherwise, you have to do it manually.
The srcset attribute makes it possible to serve different sized images for different width of the screen.
Useful for tablets and mobile devices.
This will also help you optimize thumbnails (WP does this automatically).
15. Use Schema Markup For Your Images
Structured data are known for their value in rich snippets in Google search.
But the thing is that you can also use it to enhance your image SEO.
Google is supporting tags for recipes, products, and videos.
These are used mostly on mobile devices where you can see suggestions about products and recipes.
You can see a little tag on the right side of the image in image search.
You can clearly see the tags in this image above.
This can help you gain more traffic from your images in search engine.
16. Use Lazy Loading
What is lazy loading?
Well, it’s an optimization that will make your website load faster because the images will load after your website loads.
If I try to explain a bit better, the images are loaded when they are needed.
So there is no bottleneck when loading assets.
Images that are needed will load as is, no delay.
This is similar to the optimization of your asset loading, you can defer CSS or JS to load later and not all at once.
17. Leverage Browser Caching
Browser caching is not just for images but it’s also for other assets on your website.
What it does is, that it saves your images and other assets in your visitor’s browser.
So when and if they come back the images and your website loads faster.
On WordPress, this is quite an easy task, just install one of many caching plugins.
Some are:
If you don’t use WordPress add this piece of code to your httaccess file.
<IfModule mod_expires.c>
ExpiresActive On
#Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
#Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
#CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
#Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month" </IfModule>
This piece of code will take care of your browser caching for all of your files. You can change the time you want for the files to be stored.
Note: Make sure you check this piece of code is compatible with your type of server.
18. Use CDN For Your Website and Images
The content delivery network will make sure that your website is served from the nearest location to your visitor.
If you are located in the UK and someone from UK lands on your website, that is not a problem.
But if that someone is coming from the USA then the loading time is a big problem.
However, there is a small problem with CDN.
Because it will assign it’s URL to you so images won’t have your domain name.
Which isn’t good for SEO.
But not to panic there is a solution that you can create with a new CNAME record on your hosting.
That will make sure you get your domain name in your CDN URL like this:
Example:
Instead of cdn.provider.com.
You’ll get an URL like this cdn.yourdomain.com.
To get to know more, see this guide.
There is another solution if you use a hosting that is combining hosting and CDN, like Pantheon.
You can also use image CDN hosting, that is presenting file management services.
Some of them are these:
- Cloudinary (Free plan available)
- Imgix
- Sirv (WordPress plugin and Image CDN provider – Free plan available)
19. Use Open Graph and Twitter Cards
These are basically small snippets of code that will guarantee that your image is shown on social media like Facebook and Twitter.
On the WordPress platform, you can edit them in the Yoast SEO plugin.
You can even change the title and description that will be displayed on Facebook.
Even the image can be different from the one that you have selected for your featured image.
You can also set the OG tag by yourself.
Just add the following tag to the header of the selected page.
<meta property=”og:image”content=”https://yourdomain.com/my-image.jpg”/>
This way your shared post will always have an image and be more sharable.
Let’s move to the last tip.
20. Surround Your Images With Relevant Text
It’s the same as with the design.
Images are here to complement the text and vice-versa.
So it’s a good practice to surround your images with text that can further enhance the relevancy of your images.
For both users and search engines.
You know have a purpose with images.
Key Takeaways
We’ve come to an end.
If you do anything from my tips to optimize images for SEO then I would like you to remember the following:
- Always improve stock images (use tools like Canva)
- Choose the right file size
- Reduce the file size
- Use responsive images
- Don’t stuff keywords into your image name, alt text or captions
- Create image sitemap
- Use lazy loading
- Use Open Graph and Twitter Cards
These are the thing that can play a big role in your image SEO and your website loading speed.
As you can see it’s not a small task, but believe me your users and visitors will be pleased with enhanced user experience.
SEO specialist and Founder of Nomiscom WebDesign. Here to help you grow your business with the strategic approach to designing your business website and growing it to become the tool that is increasing your revenue.
