How to optimize website images from a SEO perspective.
Product images, screenshots, your beautiful team members, catchy images for your website content, corporate images, logos, icons, you name it – all your online images should join forces and work for your website success, rigorously planning to embrace the new era of universal search.
If you want to get the most out your images though, just sitting and watching how pretty they are won’t help you too much. You need to optimize your images to get faster loading times and attract more traffic to your website. You can do that by paying your highest respects to search engines rules. This article presents most common techniques of optimizing images for image search engines like Google Images, Yahoo Images or Live.
Let’s get practical now:
1. Image file name
Insert your desired keyword in the image filename, which also describes the content of the image. You must do this because, currently, search engines do not “see” images, but “read” their titles, filenames, alternate attributes , descriptions and so on.
For example, change you image name from DSC00004536.jpg to keyword.jpg. And if you’re wondering which one is best: word1-word2.jpg or word1_word2.jpg, go with the first one, because some search engines don’t consider the underscore (“_”) a words separator.
2. Image alternate text
Make sure the search engines fully understand your tribute by adding alternate <alt> attributes to your images. The alternative description should also include an expressive keyword for your image.
3. Image title
Yes, the image also has a title and using the attribute guarantees that on mouse over the title of the image is visible, unlike the “alt” attribute that is not fully supported by all browsers out there. This recommendation is more of a usability issue than a SEO one, but don’t underestimate it – deep down inside, search engines want to be treated like human beings. Well, maybe not human, but beings for sure, artificial intelligent beings that is.
4. Image file size
Keep it as small as possible, so that PDA users as well as users with slow internet connections may get the same intended, fast experience. The optimal image size is 20-100kb and the best resolution would be 300×400 px and 72dpi. It is also recommended to set the image size as part of the corresponding tag for the image.
5. The URL of the image
What is the best URL for you image? Again, Google recommends you place all your images in a folder named “images”, “pictures” or something similar, so that the final URL of your image will look like: /images/image.jpg
While you’re at it, make sure you don’t block access to the image-containing folder in your robots.txt file.
6. Get the full option “htmlised” image
- Specify your image height and width in pixels or percent – using the width and height attributes;
- Properly align your images – it is recommend to do this directly in the CSS style.
Other attributes to be defined directly into the CSS styles:
- Image border;
- Hspace and vspace – set the horizontal and vertical space around the image. Please note search engines recommend to place relevant content around your image, that is related to the image and its description.
7. Placing the images in the page
It is best to place your images in context. This means that the more relevant the text around your image, the better the ranking will be for your image.
You do know that it is not advisable to insert vital information – like contact details, address and so on – as images, don’t you? :)
Now that we have finished what we might just call a HTML tutorial for OnPage image optimization, let’s see how images can be optimized OffPage for better rankings in search engines.
Let’s get physical:
If you’ve followed all the steps above, you now have a fully functional image, ready to be indexed and bring benefits to your business. The next thing you should do is tell the people out there about it, because this is the most important part of your image optimization. First of all, make sure you activate the enhanced image search option in Google Webmaster Tool.
1. Image filename: usability-start-300×261.jpg
2. Image alternate text: usability gurus
3. Image title: usability-start
4. Image file size: 28.74 KB
5. URL: http://blog.avangate.com/wp-content/uploads/2008/08/usability-start-300×261.jpg
6. width: 210px; height: 183px
7. Placing of the image: well, I think this is its strong point, because it belongs to an article about usability gurus, that contains the keyword both in the title and content of the post.
In a previous post I’ve written about the benefits of using Flickr for your website images. Some argue that Flickr is getting less tolerant with using it for business purposes, but nevertheless, there is no strong reason why you should not give it a try anyway.
And if you’re looking for sources of images for your content, you may start with any of the three recommendations below:
- Free Stock Libraries
- Sources for free images recommended by Search Engine Journal
- Great list with free images websites
What else do you think that “the all mighty” (Google) would be pleased with?