How do you optimize images on your website for SEO and a high-quality user experience? Well, here are some steps:
1. Alt Text
Not everyone who visits your website experiences the web completely the same. Some users have sight impairment, and others simply experience loading issues. Alt text offers a verbal (or in the case of loading issues, just a visual text box) description of the image present so that everyone knows what’s supposed to be present. As an added bonus, alt tags help search bots crawl your page more effectively.
How do I write effective alt tags?
First of all, you want to be descriptive and specific. How would you caption this image?
You could say “a sitting panda,” which isn’t that bad. What would be better is “a panda sitting on a log ramp at the zoo” The second example here adds context to the image, while being descriptive and specific. Adding context is the difference between a good alt tag and a great one. Finally, you should not use alt tags to stuff keywords. Alt tags are for the user first, not the SE bot.
2. Add Captions
Captions are very helpful for all readers because they can connect the context of the image to the article. (Note: captions do not replace alt tags. Alt tags are for user accessibility and captions are for the flow in a page) Consider this image that is placed in an article about conservation:
While the picture is pretty, just cutting from that to the article about how gardens can help conservation can be a bit jarring. If the picture had the caption “An endangered species of hummingbird feasting on the nectar of a native flower,” the flow of the article would be better.
3. Compress Your Images
Compressing images makes them smaller in download size, which makes your webpage load faster. This is not only beneficial for the user, but for you also because Google looks at the page’s size as a whole and not just individual images. This increases ranking in return. Typically, images should be 100KB or less, and there are a multitude of tools that can help you achieve this.
4. Use Original Images
Google prioritizes original content, images included. Original content is often more interesting, and if you are trying to sell something, having an accurate visual for your product is very important. Customers are more likely to be satisfied with what they purchase and trust will be built.
5. Name Your Image Files
Which of the following options is more helpful for SE bots when indexing the panda image above? “IMG_0382” or “sitting_panda_at_zoo?” By naming your image with keywords, you can help Google index your site more easily and get a higher ranking. However, image names should not be full of keyword stuffing.
6. Make Your Images Responsive
It’s important that your website is optimized for both desktop and mobile devices. By making your images responsive, you make sure that they show up correctly for both platforms. Here is some example code from Hubspot.com:
HTML:
<img src=”nature.jpg” alt=”Nature” class=”responsive”>
CSS:
.responsive {
width: 100%;
height: auto;
}
7. Use Images as an Opportunity for Backlinks
While it’s great if you can create high quality images for your website, it’s even better if you can create them for other companies too. If a company likes your graphics, they may ask you if they can use it on their site. These images can be photos or even graphics made from InDesign or Canva. The backlinks you earn will boost your ranking.
8. Add Your Images To Your Sitemap
A Sitemap is a file which organizes your website into a list of links that make it easier for Google to crawl and index. You should include all files present on your website, including images. Creating a sitemap can be scary at first, but if you need help creating one, Klientboost can help you out.
Additional Content
Would you like a more in-depth look at image optimization? Or perhaps you need some tools to help you get started? Well, Hubspot has a more in-depth version of this simplified article with everything you might need. Click here for this extra support.
3 Responses
Very informative post! I love how it is set up and looks. The content mentioned also is great. My favorite section is the ability to use Images as Backlinks. This is very helpful for me and my site and I think it will be helpful for others as well. I like how you used the ‘click here for more information’ too, great representation of how our sites are supposed to look.
This is really well done. I like how you distinguished the difference between alt text and an image caption. At first thought, an inexperienced web developer may use them as the same thing. I also like the description of how to make an image responsive. That is a very simple step that is often overlooked for other, more complex, SEO tricks.
This was a very comprehensive posts and I like how you included images to explain your points!