Images are extremely important in today’s digital world. The average internet user does not want to read a huge wall of text. They want to see a combination of text and images.
Images arouse a user’s attention and help break up chunks of writing into manageable blocks. Furthermore, images can help convey messages and provide complimentary info to the text such as infographics.
Alternatively, professional photographers and digital artists may simply want to showcase their images to potential clients. Whatever the reason, any images used on the web must be optimized. This article looks at why optimization is important for SEO purposes, together with images SEO best practice advice.
Why is it Important to Optimize Images for SEO and Google Search?
- Why do images need optimizing?
- Why can’t you just simply insert images into your web pages without any prior alterations?
The reason is simple:
Optimized images can help improve your SEO and thus provide higher rankings on Google searches.
Let’s look at an example to explain:
We have two web pages for travel photography.
- Website A has images that have not been optimized but does have other sound SEO techniques in place.
- Website B, on the other hand, has optimized images, and also good SEO practice.
If a person searched for “travel photography” for example, although both websites have good organic SEO; chances are that website B would appear higher, however, purely due to the fact that their images were optimized.
If you optimize your images for Google Search
- they can be read and indexed easier,
- they will have useful SEO data that Google looks for,
- the loading times of the images will be quicker,
- the accessibility will be spot on for those who may be visually impaired,
- and last, but not least, optimized images will actually provide an improved experience for the user (e.g. when they download images, hover over them with the mouse, share or bookmark them.)
When Should You Use Images on the Web?
Now that you understand why it is important to optimize images we should consider their actual usage. When is it appropriate to use images in your web content?
The following are some examples of when you should use images to enhance your work to:
- break up large sections of text
- add useful information to a piece of text such as stats and figures
- provide visual aids to tutorials and guides
- use in a portfolio
- enhance the web content
Basically, images can be used as you wish but they should always have a valid purpose. Never use images just for the sake of it – an image should always enhance your web content.
Finally, we should point out that you should always try and use your OWN images. Stock photography can serve a purpose, but photography and images that you have created will give your web content a greater level of authenticity.
How to Optimize Your Images for Google Search
4 Steps to Take Before You Insert the Image
Now we get to the good bit – the actual optimization techniques! The first step involves formatting your images before you even consider inserting them into a website. When you save an image or edit it, there are several steps you can take to improve its optimization straight away:
👉 Step 1: Filename
The most basic form of image optimization is the image filename. This is SEO 101 and one of the easiest things you can do to improve the readability of your images. The basic premise behind choosing an image filename is that you want Google and other search engines to be able to understand what the image portrays without even looking at it.
An image file name should always describe what the image displays – it should never be a generic title or the default name that the camera chose for it.
Example: you have an image of the Colosseum in Rome at sunset. The original filename is DSC1798.jpg – if you left the filename is this, how could Google interpret what the photo is? The simple fact is, it can’t! The filename should be something like Colosseum-Rome-sunset.jpg.
This filename clearly states what the image depicts. Furthermore, the central keyword i.e. Colosseum has been placed first to show its importance and to denote that it’s the central theme of the image. Always rename your images and choose a descriptive filename!
- Using generic filenames like “5678image.jpg”
- Writing extremely lengthy filenames.
💡 Read more tips at Search Engine Optimization (SEO) Starter Guide > Optimize your images.
👉 Step 2: Scaling
Page loading times improve search rankings – this is a fact.
A web page packed full with poorly optimized images will take an age to load. One simple method of improving load times and thus optimizing your images is to use the correct scale. If you have an image that is 1024x768px, but only you want to display it at 600x400px DON’T simply leave it at the larger size and allow it to be scaled down.
Scaling images when loading takes time and increases loading times. That same image should be scaled down beforehand and saved at the desired size of 600×400.
Some platforms such as WordPress actually have features that allow you to create multiple versions of one image. This could help speed up the process. Always be sure to choose the right file version when inserting, however.
Pro Tip: If you want your images to display at a higher resolution on retina screens (e.g. Mac devices), you may want to upload your images at double the size and have a plugin detect the visitor’s screen resolution and serve the image file “@2x” (double the size). This will, however, slow downloading time. You have to decide what is more important in the eyes of your visitors: loading time or high-res images?
👉 Step 3: Responsiveness
In today’s world, you must optimize images for a variety of different devices including smartphones and tablets. When creating an image you can use the “srcset tag” which is part of the <img src=””> HTML tag. By using this tag, you can allow the image to automatically display depending on what type of resolution display is used. For example, the below code would use 4 different images depending on the monitor pixel resolution:
<img src=”sunset-src.png” srcset=” sunset -1x.png 1x, sunset -2x.png 2x, sunset -3x.png 3x, sunset -4x.png 4x”>
- Sunset-1x.png = for monitors with a regular resolution
- Sunset-2x.png = for monitors with 2x device pixels per CSS pixel
- Sunset-3x.png = for monitors with 3x device pixels per CSS pixel
- Sunset-4x.png = for monitors with 4x device pixels per CSS pixel
This tag is an absolute must and some platforms can insert the srcset automatically such as WordPress.
Note: Most pre-built themes are now mobile responsive themes. So you don’t need to worry about the responsiveness of your images. If your website theme is however not responsive, you may want to update it (very soon!).
👉 Step 4: File Size
The actual file size of an image can make a huge difference to SEO ranking and also loading times. If you have a page full of images that are 5mb in size, for example, the loading times will be horrendous. However if you compress those images or save them as a smaller file type, the loading times will be much more favorable.
Try to avoid original file types such as PSD and CRW as they are generally uncompressed and contain all the original data (CRW files can be 25mb+).
Next, consider using tools such as:
These tools are superb to help reduce your image sizes.
When Inserting Images
The second step involves actually inserting an image into web content. Now that you have processed your image and improved its scaling, filename and file size you can edit several aspects when inserting it into a web page. These steps are just as important as the first section and will really help search engines such as Google read and index your images efficiently and with greater detail:
👉 Step 1: Captions
It is surprising how many people do not use captions when inserting images. Captions are often overlooked but they can boost SEO and also help readability. A caption is a small text you usually see underneath an image – it describes what the image is or what it represents; captions often also include a link to the image source.
Statistics show that captions are actually one of the most-read aspects of a web page.
You can use the <figure> and <figcaption> HTML tags to insert an SEO caption. When using captions, always consider if it is actually needed – don’t simply insert a caption because you think it will improve SEO – a caption should enhance the reader’s experience and understanding of the article.
👉 Step 2: Metadata
Image metadata is hugely important and every single image you use should contain an ALT tag and a TITLE tag.
The ALT tag is an alternative text that is displayed if an image cannot be displayed for whatever reason. For example, a user may have images disabled, or they may be using a screen reader due to a disability. An ALT tag should describe what an image depicts, and it should also contain the main SEO keyword for that page if possible.
- stuffing keywords into the alt text or
- copy & paste entire sentences into your alt description field
The TITLE tag is just as important and is another tag used to describe what is seen in the image – much like a caption. When a user hovers their mouse over an image, the title will pop up and display the title text.
The title tag is not as highly used for SEO purposes, but it is still important to add it into your HTML code. As with the ALT tag, ensure that the TITLE tag describes what is in the image, and contains the major SEO keyword for that piece of content.
👉 Step 3: Alignment
Image alignment can be a nightmare – find the right HTML and CSS code combinations to align an image within a block of text can be a trial, but that’s another story! Although image alignment is not necessary for SEO, it is important to consider to improve your user’s experience.
An image should never break the left reading line. This basically means that you should never see a paragraph of text to the right-hand side of an image – it simply looks wrong! Blocks of text should always display entirely underneath or above an image!
Note: On a desktop view, intro images can be on the left/right as it is important to get at least one image above the fold along with the relevant title and intro text.
👉 Step 4: Social Media Sharing
It is actually possible to insert several different snippets of code that can improve your image sharing on social media. The two main methods are OpenGraph and Twitter Cards.
- OpenGraph is a technique used to ensure that a specific image is used when a Facebook post is shared. Read more here: OpenGraph.
- Alternatively, Twitter Cards can be used to add extra information to your Tweets such as images, video, and audio. You can find out more information about Twitter cards here TwitterCards.
Once you are comfortable with the SEO image optimization basics, you could consider trialing these social media sharing options for your images too.
👉 Step 5: XML Image Sitemaps
Standard XML sitemaps are hugely important for a website’s SEO – a sitemap can allow a search engine such as Google to crawl through the website hierarchy and see what pages are included. An XML image sitemap performs the same function but indexes every image within your website.
For full information, you can check out Googles webmaster guide on XML image sitemaps. XML image sitemaps are not vital, but they could help improve the likelihood that your images will be found in search results.
Conclusion: How to Optimize Photos for Google
There you have it – an all-encompassing guide to optimizing your images! We hope you have found this article illuminating. It is hugely important to take this advice on board and optimize your images for Google Search indexing.
You will hopefully see an improvement in your rankings in no time at all. If you do not, consider using an SEO analytical tool such as Yoast to see what other improvements you could make. Maybe your keywords are too infrequent, or maybe your metadata need tweaking.
To help sum up the main pointers of this article we have provided a few useful bullet points below:
- Only use images if they serve a valid purpose
- Take care of filename, scaling, responsiveness and file size first
- Then create captions, metadata and the correct alignment next
Good luck and happy image optimizing!