There’s a good chance that you’re going to use images at one point or another, regardless of the website you run or the publication you manage. We’re a very visual society these days, after all; a few well-placed pictures can drastically improve the look, feel, and readability of a site. Of course, if you fail to properly optimize these images, you’re going to be losing out.
Don’t underestimate the amount of traffic you can draw to your page with Google Image Search. Ensuring the images you use are properly optimized from both a user and search engine standpoint can work wonders for your site. By that same vein, improper image optimization could actually cause the rating on your entire page to drop.
Today, we’re going to go over a few best practices for your website’s images.
Do: Use A Descriptive Image Name
The first piece of advice I’ll give you is to give your image a descriptive name. Think about what your target audience is going to search for – the most common naming patterns they’ll use – and change both the image’s title and filename to reflect that. Look at your website analytics if you’re having trouble working it out.
For example, let’s say you’ve got a picture of an Xbox One console. The filename when you download it is “CONSOLE-PHOTO-1304.jpg.” Not exactly the sort of title that your audience is going to search for, right? Instead, try one of the following:
Microsoft Xbox One
Xbox One Gaming Console Microsoft
Xbox One Game System
You get the idea.
Don’t: Go Overboard With The Title
While you should definitely be descriptive with your image title, you need to avoid being too wordy. If your image titles end up being full paragraphs in their own right, you’re doing something wrong. As a general rule, try for 3-6 words at most. Anything more might cause Google to assume you’re keyword stuffing and blast your search rank.
Do: Optimize Your Alt Tags
For the uninitiated, an image’s Alt Tags (also known as Alt Text) basically refers to what a browser displays when it can’t properly render an image. Optimization of your alt tags basically follows the same principle as title optimization: be descriptive and use plain English to describe what the image is about. Make sure it’s relevant, and different from the title.
It’s worth noting at this point that, in the case of thumbnails, you should vary the image title and alt tags so that there’s no duplicate text.
Don’t: Keyword Stuff
It goes without saying that you want to avoid stuffing your alt text with keywords. Doing so basically equates to spam, and will meet with limited success – if it succeeds at all. There’s a good chance you’re simply going to find yourself getting penalized by Google, instead.
Do: Reduce Your Image’s File Size
In addition to being visual creatures of habit, today’s consumers are infamously impatient. Most users won’t wait more than three seconds for a web page to load (five seconds on a mobile device) before giving up and moving on. As you can imagine, you want to do everything necessary to speed up their experience — and that includes reducing the file size of your images so that they load quickly. A good rule of thumb is to aim for somewhere below 60-70 kb.
Most editing software these days has an option that allows you to ‘save for web’ or to modify the quality of the image when you save it. Make liberal use of this feature. You might also consider reducing the resolution of your images, if at all possible. It might also be a good idea to strip the meta-data off your images if you’re particularly strapped for space, though I’d not necessarily recommend it; according to Google’s Matt Cutts, meta-data could potentially be a ranking factor for Google Image Search.It’s also a good idea to strip the meta-data off your images, unless it’s absolutely necessary for your website.
As for thumbnails, make them as small as humanly possible.
Don’t: Sacrifice Image Quality
Reducing the filesize of your images is something of a delicate balancing act. On the one hand, if they’re too large, your page will hang and you’ll lose visitors. On the other hand, if they’re too low quality, your site’s going to look awful. Use your best judgment.
Do: Know What Image Types To Use
Currently, there are three primary image types online: jpeg/jpg, gif, and png. Each one has its own strengths and weaknesses, and its own specific use cases. It’s vital that you know when and where to use each one:
- JPEGs are currently the unchallenged image standard, likely as a result of how much they can be compressed without suffering any noteworthy degradation in quality. Product photos, article images, and thumbnails are all likely to be jpegs.
- GIFs are generally of significantly lower quality than JPEGs. That said, they can be used to great effect for decorative images, icons, and animations (though I’d advise against that last one).
- The main advantage of PNGs is that they support transparency, and offer support for both 8-bit color (GIF) and 24-bit color (JPG). They’re also completely lossless – meaning they suffer even less quality degradation than JPEGs. As such, they can be workable alternatives to either of the two prior image types, though they also tend to be much larger than either format.
Don’t: Use Images In Place Of CSS
This is actually a distressingly common mistake, even on many authority websites. Instead of using images for your icons decorative images, make use of CSS. This allows you to add such features as shadows, rounded corners and special fonts to a page – all without sending load times through the roof. Of course, the problem with doing this is that, in older browsers, CSS’s modern functionality isn’t supported. If you want to offer support for these browsers, make sure you either degrade your markup to a functioning design or employ an emulation solution like CSS3 PIE.
Do: Resize Your Image For Different Devices
By now, it should be abundantly clear to anyone with even a passing knowledge of optimization that one ignores mobile at one’s own peril. That applies to image sizes, too. Members of your audience are likely seeing your page at a number of different screen resolutions – make sure your images are resized to account for these.
Don’t: Resize Your Images Browser-Side
It’s easy – and incredibly tempting – to simply use a single image across all mediums, resizing it client/browser-side where necessary. Don’t. This wastes a ridiculous amount of bandwidth, and actually serves to increase load times for your visitors. Instead of using a single image across all delivery mediums, upload a copy of that image to be used on each medium. It’s more work, certainly, but it’s better than the alternative.
Do: Use Image Sitemaps
Particularly if your site uses image pop-ups or javascript galleries, look into Google Image Sitemaps. By mapping out your website in such a fashion, you’ll give Google more information about your pictures, increasing the chance that the search engine will index them. For more information about Sitemaps, go here.
Don’t: Use Content Delivery Networks That Offer No Link Juice
Last, but certainly not least, it’s become common practice for webmasters and authors to host the majority of their images on content delivery networks, reducing the strain on their servers. This can, in turn, lead to reduced load times and bandwidth. So far, it sounds like a win/win. What’s the problem, then?
Backlinks. Though they don’t carry as much weight with Google as they used to, hosting images on a content delivery network nevertheless could mean you’ve fewer backlinks under your own domain and thus a lower rank in search engines. Make sure whatever network you use allows you to upload images as a subdomain of your website.