Whether you use stock photos or create images yourself, your website should make use of images to help convey your brand and message. Images evoke a feeling and help users feel more connected to your site and its content. An image is worth 1,000 words, right? But equally important is image optimization, i.e. all the words associated the image. (Thought you could get by with just the image, huh? Think again!)
Why is Image Optimization Important?
First and foremost, every site should be designed with the end user in mind. Images make the site visually appealing, capture interest quickly, and allow people to immediately understand what your content is about.
You must also optimize your site for SEO if you want to drive any organic search traffic to it. This means including all the relevant text/meta data/etc. for image optimization.
And it’s also important to be sure your site is accessible, meaning it renders well for those with disabilities and/or those who have images turned off.
How to Optimize Images for SEO
We provide SEO services for many of our clients, helping them improve their organic search rankings and increase conversions from search traffic. Part of that service includes image optimization. Here’s an inside look at what we’re doing when we optimize the images on your site:
Alt Text
Within the image tag, we specify the alt text. With a CMS (like WordPress), there is usually a field to enter this in. Otherwise it can be added directly to the img tag in the coode.
Example: <img src=”image-name.jpg” alt=”Alternate Image Text”>
The alt text is the alternate text you want displayed in case someone has images turned off or if images aren’t displaying for them (like if they’re viewing your site on a slow internet connection and images haven’t loaded yet.) This text should describe the image, but it’s also a good opportunity to add a few relevant keywords. Any text entered here will help search engines understand what the image is about.
For example, if you’re writing a blog post about caring for puppies and have a photo of a puppy in the bath, the alt text could be: “Caring for Puppies: How to Give Your Puppy a Bath.” Now you have “caring,” “puppy,” and “bath” as keywords.
Title Text
Another meta tag that should be specified for each image is the title tag. Again, with a CMS there’s usually a field to enter this text. Otherwise it can be entered in the code for the img tag. The title text is what a user will see if they hover over the image. It’s also another place you can put a few keywords, which helps search engines understand what the image is about.
Example: <img src=”image-name.jpg” alt=”Alternate Image Text” title=”Descriptive Title”>
The title text should be slightly different from the alt text, because (a) users don’t want to read the same thing twice and (b) it’s a chance to use different keywords when telling search engines what the image is about. For example, the title for your puppy image could be “Bath Time Tips for Your New Dog.”
Filename
The image’s filename is another opportunity for optimization. Here, we can explain to users what they are seeing and clarify for search engines what the image is about. While most people won’t see the image’s actual filename, it can’t hurt to optimize it.
The image of the puppy taking a bath could be named puppy-bathing-tips.jpg (descriptive, optimized) as opposed to 23he98hu.jpg (not descriptive or optimized at all).
File Size
While we want the image to be high resolution enough to look good on all screens, we don’t want a large file size slowing down the page, which can affect both the user experience and search engine ranking. It’s tough to give an exact file size to aim for since page speed depends on how many other images are on the page (among other factors), but in general we aim for the smallest file size that still looks good. You can use Photoshop’s built-in compression tool or a tool like Tiny Jpg to compress an image’s file size while still retaining quality resolution.
Image Caching
If you want to get really fancy, you can adjust your image caching settings so that site visitors view a cached version of your images instead of having to reload each time, which slows load speed. This article has a great explanation of the benefits and the how-to’s of adjusting your image caching settings.
Conclusion
While an image is worth a thousand words, the words we use to describe an image can be just as important. We focus on users first, then SEO (e.g. we never jam your meta data full of keywords) to see the best results. If you’d like help optimizing your images, or with any other SEO efforts, we’d love to help!