Optimizing Your Images for Accessibility and SEO
So there you are, putting the finishing touches on your latest, greatest blog. Just a few more little tweaks and then it’s ready for the masses! Awesome! Except you just realized it needs a little more flair. How about a few images to spice things up? Just throw them in and you’re good to go!
WAIT! Hold up one second. You can’t just throw images in and call it good. In fact, you’re missing a couple key considerations crucially important to usability and search engine optimization! Not only should you be making sure your images are accessible to all types of users – especially the visually impaired or blind – but also to search engines for that all-important search ranking. So how do you do that?
WHY SHOULD YOU OPTIMIZE IMAGES?
As mentioned above, there are a number of great reasons to optimize your images before slapping them on your site and calling them good, including accessibility, search engine optimization and heading off possible technical issues before they pop up.
MAKING IMAGES ACCESSIBLE
As you’re probably already aware, lots of different types of people use the Internet on a daily basis. That includes people with varying degrees of visual impairment and blindness. Many of those people use a screen reading software to browse. These programs essentially read aloud what’s on the screen. But what does a screen reader do when it comes to an image? Technology has come a long way, but it’s not quite to the point to where it can decipher what an image is and describe it. So that’s where you come in!
You need to make the image accessible and understandable to everyone, otherwise your message could be lost or confused. Whether you’re hard coding or using a content management system like WordPress, you should always include an alt attribute with your images. If a screen reader or other piece of software comes to an image with an alt attribute, it’ll be able to read the alt attribute describing what the image is. That way nobody is left confused or wondering.
PREEMPTING TECHNICAL ISSUES
As an added bonus, that same alt attribute can also work as a fallback when technical issues arise. Whether it’s a server issue or someone just needs to upgrade their browser from IE6, if an image doesn’t display correctly, the browser can still show the alt text. Obviously it would be optimal if the image popped up 100% of the time, but in the off chance that something happens and it can’t, at least anyone on the page still has a description of the image that was supposed to be there and your message isn’t completely lost.
OPTIMIZING IMAGES FOR SEO
And as an added added bonus, that very same alt attribute also helps with SEO and search ranking for your page! As we discussed earlier, machines aren’t quite at the point yet where they can “see” images (this isn’t Bicentennial Man after all). That includes search engine crawlers.
They can tell there’s an image there thanks to the <img> tag, but don’t know what it is. But if there’s an alt attribute attached to the image, it will analyze the short description, add a dash of trust that you’re describing the image accurately and include it with the information it gathers up from the rest of the site crawl! If you’ve supplied an outstandingly descriptive alt attribute, it could help boost your page’s search engine ranking.
HOW DO YOU OPTIMIZE IMAGES?
So that’s all very well and good, but how do you actually go about optimizing an image for your site? Well there are a few things to keep in mind that can quickly and easily make that image upload-ready!
THE ALL-IMPORTANT ALT ATTRIBUTE
We’ve discussed it a few times already: the alt attribute. Out of all the way to optimize an image for your site, it’s one of the most important because it functions on so many levels.
For those of you who are coding or developing the site, all you have to do is add the alt attribute inside the image tag. It should look like this:
<img src=”http://www.awesomeexample.com/grizzly-bear-eating-pie.jpg” alt=”Big brown grizzly bear eating cherry pie” >
If you’re not coding your own site or using a content management system like WordPress, many times you can find a place to enter an alt attribute on the image properties. Here’s an example of the image property settings on a WordPress site:
Now that you know where to find and put the alt attribute description, what all should it include? There are a few easy things to keep in mind:
- Keep the description to about 4 to 10 words. Don’t get too lengthy
- The more descriptive the better, use those adjectives
- Incorporate keywords when and where applicable, but…
- Don’t keyword stuff. If you use keywords in ways they don’t sound natural, search engines could penalize you
- Imagine if the image didn’t exist, would it make the same point and get the message across?
If you remember those, you’re in great shape. Like all things with your website – and with SEO especially – quality trumps quantity. Keep your users in mind and the rest should come naturally!
GIVE IT A DESCRIPTIVE FILENAME
The alt attribute is pretty important, but it’s not the only thing you should think about. The image’s filename itself also factors in. Remember, both users and search engines are able to see that information as well. Use a filename that is short and descriptive. It should also use only lowercase letters and hyphens in between words. For example:
Is going to make much more sense to the user and search engine than:
This doesn’t carry a ton of weight when in comes to SEO and algorithms, but it certainly goes a long way when it comes to users and search engine crawlers. And as we’ve said before, quality and usability are key!
Yup, size does matter…at least when it comes to images. When adding images to your site, you should always try to make sure you’re uploading the right images for your needs. Clearly if the image is going to be the full width of the page, it’ll have to be a little larger. But you’re certainly not going to need a 4000 x 3000 pixel image for a thumbnail. It’s best to keep the image only as large as you’ll need in both dimensions and file size while maintaining quality.
Why is that important? You don’t want to bog down your site. If it starts to get weighty and slows down, your user isn’t going to be happy. Neither are search engines – and yes, page speed is a factor when it comes to rankings. So keep everyone happy and make sure you keep things streamlined!
ARE THERE TOOLS THAT CAN HELP?
That’s a lot to keep in mind, but there are tools that can help you make sure your images, and site as a whole, are optimized as much as possible!
FEED THE BOT
This is a great site not just for images and alt attributes, but also for everything SEO! It has a number of tools – including one that checks Google webmaster guideline compliance – that help you optimize everything from content to code.
Moz is another great resource for everything compliance and SEO. They have some amazing tools for SEO as well as incredible blog articles to find all the answers you need. When it comes to images and content specifically, they have a detailed Web Developer’s SEO Cheat Sheet.
There are a number of free image editing resources out there to help optimize images specifically. Pixlr has a lot of great options and works a lot like Photoshop if you’re already familiar with that. Several of you also sent in some great suggestions! If you’re looking to get your image as small as possible without quality loss, try running it through JPEGmini. And Google’s Picasa lets you edit images as well as add location information!
PUTTING IT ALL TOGETHER
If you’re looking for official word on any of this, you can always turn to the ones in charge. Google has an article all about best practices for its web crawlers. They also have a super nifty video straight out of 2007 about optimizing images for crawling. Take a look:
This is far from an exhaustive list of optimization tips, tricks and tools. If you have any suggestions or things to add, feel free to add them in the comments below!