Search engine optimization is important because it can make your posts more visible on both Google Search and Google Image Search .
But what does image optimization in SEO really mean?
The short answer is:
- Help search engines understand what your images illustrate.
- Do not let images degrade the loading time of the web page too much.
- Optimize with user-friendliness in focus.
Therefore, search engine optimization of images is an essential part of the more comprehensive on page optimization .
Below we look more at how you can you can achieve this with the help of 9 concrete techniques. But, first I explain why images are so important on websites.
Pictures enhance the experience on the website
For many websites, images are not only a good addition, but rather something that visitors expect to see when they land on the web page – especially on web shops.
Pictures enhance the user experience by, among other things:
- Complete the text with visual information.
- Improve the look / aesthetics of the website (in some cases).
- Act as proof of what products look like on e.g. webshops.
… And as they say: A picture is worth a thousand words – especially if the pictures you show are descriptive and appropriate in the specific context.
Visual information is therefore golden online! But when we look at the question from a search engine optimization perspective, it gets a bit nerdy because the images should technically be optimized for search engines.
Below we take a closer look at how this optimization takes place.
Image Optimization – 9 steps to search engine optimized images
- Relevant pictures
- Optimal image size
- Compress images
- Choose the correct image format
- Delete metadata
- Naming images SEO-friendly
- Alt-text – what do you see in the picture?
- Location and ease of use
- Automated solutions for image optimization
1.Relevant pictures
First and foremost, you should have relevant images in your posts. It may sound bland, but sometimes it can go wrong.
So what are relevant images?
I think it is visual information that makes it easier and faster to understand the message of the SEO text (the body text) . Depending on the content, it can be anything from photographs to more descriptive diagrams and infographics.
Example:
In an online shop, it is natural that you should have pictures of products you sell as an incentive and confirmation. In a guide on how to change settings on WordPress, however, screenshots may provide the most value for the visitor.
Optimal image size
Images are among the heaviest files on web pages and can significantly affect the loading time. The next step is therefore to reduce the size of your image so that it is not larger than necessary.
Strive to reduce the image size so that it does not exceed the pixel width displayed on the page.
Example : If your images are displayed max 1000 pixels (px) wide on the web page, it is unnecessary to upload images that are larger than that. So if you have an image that is 2591px wide, then it pays to reduce it to 1000px before uploading it to the page. Then you have already reduced the image by about 60%!
How to change the image size?
There are several image manipulation tools for this. Photoshop is my favorite tool when it comes to image optimization, but there are other free tools you can do it with, such as:
There are also automated solutions for adjusting image size, which we go into more in section 9 below.
Compress images
The next step is to compress the image that you have now reduced in size. In short , image compression means that you “degrade” the image quality .
The goal is for you to degrade the quality only so much that the perceived image quality is kept more or less the same . In many cases, you can technically degrade the image quality a lot before you actually experience any noticeable change in perceived image quality.
To exemplify this, compare the linked images below:
- Original image (1,118 kb)
- Compressed image (254 kb)
Do you see a big difference? Hardly. Despite the fact that the compression has “degraded” the quality by 77% and saved 864 kb!
It therefore comes as no surprise that the experts at Google strongly recommend that we both compress and reduce the size of our beggars .
How do you compress images then?
Personally, I usually use the “Save for web” function in Photoshop, because I think it often gives the best results.
But there are also other user-friendly compression tools that are free and that give good results, such as:
- Image format – which format is best?
The image format affects both image quality and file size, which means that it has a direct impact on the user experience and page load time.
So which image format is the best?
It depends on the specific image / illustration you are optimizing, but you can use the following rules of thumb…
JPEG for photographs
The JPEG file extension is best suited for photographs with many colors and shades because they can maintain high quality with a relatively small file size. Note that JPEG does not support transparent background images.
PNG icons and graphics
Therefore, use PNG files mainly for graphics, icons and similar illustrations that are more “simple” considering the number of colors and shades.
Then you can take advantage of the high quality of the PNG file while you can preserve a relatively small file size. PNG can also be used if you need a transparent background.
SVG for the logo
SVG is a vector graphics format defined in XML text files. If you have an SVG version of your logo, it may be a good idea to place it in the navigation menu.
The file type can be scaled up without quality losses, so then the logo is always kept sharp and professional regardless of size.
WebP and modern image formats
The idea behind new image file types such as WebP (developed by Google) is that they can maintain high quality in smaller file sizes compared to traditional JPEG files.
So why not simply run WebP everywhere on your site?
The problem is that modern image formats are not supported by all browsers. This in turn risks that some visitors do not see your photos. Therefore, it pays to use modern formats only in combination with dynamic solutions presented under heading 9 below.
Delete metadata from images
Images usually have some form of metadata. It can be camera information, GPS information or any other invisible data that is only found when inspecting the image.
If you do not need this information, you might as well get rid of it – and save a few extra kilobytes!
Imageoptim is a very user-friendly and efficient tool for this very purpose. Unfortunately, the program is only supported by Mac. Like TinyPNG, it is a simple drag & drop tool that optimizes the image lightning fast, without compromising quality.
[Picture]
Now you have the images optimized and ready to be published on the website, without compromising the speed of the website !
File name and URL – to name images SEO-friendly
The next step is to make the images more understandable to search engines . Start by naming the images (file names) so that they are descriptive, contain keywords and do not contain unnecessary characters.
Look at the picture below as an example:
A descriptive URL (and file name) could be, for example:
example.se/images/nike-sneaker-white-black-red
… Instead of for example:
example.se/images/produkt-9800967
… Which you still see very often in several web shops.
The first option describes the product more specifically than the second. It will thus be easier for the search engine to determine what the image illustrates , if someone searches for the product with the search engine.
The example can probably be improved with a more specific model description, or e.g. by specifying the type of sneaker (high tops).
The main thing is that the image URL is unique, descriptive and contains relevant keywords in view of your SEO strategy.
Alt text – to describe what the image illustrates
Once you have the image uploaded to your CMS system, the next step is to optimize the alt text for the images in your posts. Alt text , or alternative text, is an html code used to describe the content of the image .
In the screenshot below, you can see both what the image file and the alt text look like when you inspect the image’s html code.
Among other things, Google uses the Alt tag as the primary tag to understand what images illustrate . It is therefore extremely important that you optimize your alt texts both to:
- spur your on-page optimization, and
- increase the likelihood that your images will appear in image search.
Then you write a good alt text
Write a short and concise description of what you see in the picture , preferably in a sentence. Also include relevant keywords if they fit naturally into the description.
It is important that you write natural texts in your alt tags, as they are not only used to help search engines understand the content of the image. It is also used to help people with disabilities, such as the blind , understand what the pictures on the page illustrate.
Place images where they provide the most benefit
Think about the placement of your photos to improve usability . Place them where they provide the most benefit to the reader and support the body text.
Also keep in mind that the content should enable content scanning , ie. that it is easy to look through the text and still get the most important information. Images combined with headlines and other prominent fonts can help you achieve this.
Can your posts be seen through? Test for yourself!
Choose one of your posts you want to test. Then scroll down at a pace so that you only have time to read all the content that stands out from the crowd.
Typical protruding elements are:
- Headings, bold markings, deviating colors in the text, etc.
- Pictures and illustrations that break the text.
- Tables, punk lists and so on.
The idea is that you should be able to quickly understand what the content is about without having to read the text word for word.
But why do this? People read…
No, some read and others “scan” . Many web surfers do not have the patience to read everything word for word, so make sure your content works for different types of web surfers. This is also important when optimizing your website conversion .
Automated solutions for image optimization
Image optimization for SEO purposes thus includes several steps and can thus be time consuming. If you want to get rid of the workload but still optimize your images as well as possible, then I recommend checking out any technical solutions to take care of the optimization. In this case, you may have to pay for certain services.
Lazy loading
Lazy loading is a smart technical solution that ensures that images are only loaded when needed.
Think of a post with dozens of heavy images far down the page. Then it is unnecessary to allow these images, which are not visible to the visitor immediately when they land on the page, to affect the loading time on the content that visitors actually see at the top of the page.
Lazy loading thus ensures that the image files further down the page are loaded only when the visitor has scrolled to them.
Given that images are among the heaviest files on websites, lazy loading can have a noticeable effect on the website’s speed and user experience.
The image below is from Google and exemplifies how lazy loading works on Medium’s website. Read more at Google Developers .
Automatic image size adjustment
Another smart solution is to let the system automatically adjust the size of your images.
So instead of having to resize the images for each post, you can upload a large image and the system will take care of the rest. You only decide how big the image should be in the different sections of your website, and the system automatically reduces the size.
A solution like this is a very good way to guarantee high image quality regardless of screen size, as well as a way to guarantee that too large image files are not loaded on the page.
CDN
Delivering your images via a CDN (Content Delivery Network) to the website can make your pages faster and thus improve experiences. It basically means that your images are on a separate fast server where the images are loaded from. So there will be slightly less load on your primary server.
Especially if you have a global website with many images, CDN is a very efficient image management system. Many CDN providers have servers spread all over the world, which means that they are always within short reach of the users and can thus offer fast charging times.
Automatically select image format based on visitor’s browser
As noted, there are modern and fast image formats that are not currently supported by all browsers. If you want to go all-in, you can automate this process so that modern image formats are always used when the browser supports them.
Example : The first visitor uses Google Chrome, so the images load in the fast WebP format. Other visitors use Internet Explorer that does not support WebP, so the images are loaded in traditional image formats.
However, these solutions are slightly advanced and are mainly seen among larger companies.
Service providers like Cloudinary can offer just this type of solutions with CDN and image optimization included, which can be worth the money.
Hope these tips help you along the way. Read more about how to identify heavy image files through SEO analysis (heading 5).