The purpose of this post is to review best practices for image search, also to inform people who haven’t heard, you can now include images in your XML sitemaps. For up to 1,000 image you can add per page, I will point you to the resource on Google and also provide the syntax and required and optional fields that you can use when adding images to your sitemap.
Google has come a long way when it comes to the type of media that it can index and serve up on the results pages of Google Searches. This is just another step that Google has taken to improve the user experience and help people find what they are looking for, regardless of the medium. Now, from Google’s standpoint, they want image search to be useful to their audience so what they recommend here in terms of best practices are the following recommendations:
The page the image is on and the content around the image including captions, titles all help Google determine what your image is about. The example given is an image of a polar bear on a page about tomatoes. This could send mixed signals to Google about the subject matter of polarbear.jpg.
Many webmasters are concerned with people stealing their images and using them on their own sites, which are legitimate concerns. What Google says about this matter is somewhat telling of how they use links to images as a signal of what the image is about as well as the original source of the image. Duplicate images are found all over the Internet and Google ‘s image index, and all they want is indication of who the original source of the image is. What is somewhat of an image paradox, these sites that disallow people from linking to their images or using their images on other sites are saving their bandwidth, but also preventing the discoverability and reducing the potential audience for their images.
What is suggested is to use a creative commons license that requires attribution. It is also helpful to provide a JavaScript snippet that allows people to link to your images, but with the alt text that you suggest. These work by disabling the regular right click options and replacing them with the code you will need to use to link to the particular image you were just about to link to. Some also use watermarks to inform users of the source of the image. While this helps, it might hurt your click-through-rate on the image in universal search due to the watermark that most people tend to shy away from.
Use detailed informative file names for your images. Try to make your file name a good indication of the content of the image. For example, my-new-black-kitten.jpg is a lot more useful to Google than IMG098743.jpg. Descriptive file names are also helpful for the user. According to Google, if they are unable to find suitable information on the page in which the image is on they will use the image file name as the image’s snippet within the search results.
So it’s possible, if your good, to rank an image that has a filename like IMG98123.png and there isn’t suitable content surrounding the image, or a caption that in the SERPS the snippet would be quite confusing to users, so remember again the point about using targeted, descriptive file names, if not just for that reason.
Image Alt Tags are what people usually associate with the single element of the image that has the biggest impact on how Google views the content of the image. Indeed the Image Alt tag is important for several reasons:
To give an example from the Google Image Search page, consider the following image alt tags:
Not Good: <img src=”kitten.png” alt=”" />
Better: <img src=”kitten.png” alt=”kitten” />
Best: <img src=”kitten.png” alt=”kitten playing with string of yarn” />
It is also important to note that keyword stuffing penalties still apply to alt tags as it does to title tags and other meta information associated with a piece of content, in this case – image content. So avoid tags that look like this:
<img src=”puppy.jpg” alt=”puppy dog baby
dog pup pups puppies doggies pups litter puppies dog retriever
labrador wolfhound setter pointer puppy jack russell terrier
puppies dog food cheap dogfood puppy food”/>
Matt Cutts, head of Google’s Web spam team provided the following video on creating great alt text:
Along the same lines of optimizing image content, Google also suggests using some techniques to make your site load faster. In case you haven’t noticed, Google has been pushing page speed as a factor in how they rank sites. This means that if all else is equal in the eyes of Google, they will put the page that loads faster above a slower loading page.
There is some controversy about this in the community due to the fact that a lot of video based sites, or sites that use complex processing all to enhance the user experience are perceived to be getting “dissed” by Google because a lot of flash based, image and video heavy sites, like Disney’s site for example is optimized to take advantage of the tools to load pages faster, but they are still going to load slower than a flat static, or even dynamic site that is not as video centric and filled with images.
The file format is important because each one has it’s unique profile of advantages and disadvantages. For images containing flat illustrations or artwork, use the 8-bit PNG or GIF format and reduce the number of colors in the palette. Some image programs such as PhotoShop allow you to save the image for the web and fine-tune the image settings. By reducing the color palette from 256 to something like 32, you greatly reduce the size of the file. The less colors that the image has, the smaller the file size is going to be. According to Google, they suggest the following:
For very detailed and colorful artwork or for photographics, JPG and 24-bit PNG are typically used because they have a much larger color palette. While a 24-bit PNG results in superior image quality, this comes at the price of a larger file size. When you can, use JPG instead and adjust the quality setting so you can compress the image as much as possible within your desired tolerance for image quality.
To compare and contrast, here are the file sizes of the above graphic in various formats:
- JPG, 60 quality – 32K
- PNG-8, 256 colors – 37K
- GIF, 256 colors – 42K
- PNG-24 – 146K
Also note that JPG has an option called “Progressive” mode. This option adds multiple copies of the image at lower resolution to make the image appear quickly on the screen, while progressively improving in quality. But it also increases the overall size of the image.
PNG also has a similar feature called “Interlaced”. You may want to turn this feature off so that the full image downloads quicker.
Because the 8-bit PNG and GIF formats have the potential to result in much smaller image files, try to keep this in mind when creating graphics and illustrations for your site. Try to keep the amount of colors to a minimum and use flat graphics instead of photographs. This way you can create images with palettes of 16 colors, keeping the file size extremely small and fast to download.