This YouMoz entry was submitted by one of our community members. The author’s views are entirely his or her own (excluding an unlikely case of hypnosis) and may not reflect the views of Moz.
Times have changed since the era of dial-up Internet, when users had to wait minutes for a single image to load. Today, we can enjoy fast Internet access—even on our mobile devices. But make no mistake, image optimization for users and search engines is just as important as it ever was, if not more so.
In this article, we will take a look at the many ways you can optimize your images for search engines.
1. Use the right image
Finding and using the right type of image for your website is an essential step towards success. A great place to start is good old Flickr.com. It has a wide selection of different photos to choose from, along with an ability to filter content by license.
That means that you can easily find a picture that you can legally use for commercial purposes—or even one that has no copyright restrictions. (Make certain you have all necessary permissions to use or modify the image for your own purposes.)
Images delivered for a search of “black car” on Flickr.
Other popular options include:
Freeimages: Massive community with over 2,500,000 registered users and around 400,000 photos online
New Old Stock: Vintage photos from the public archives of institutions participating in Flickr Commons
Unsplash: Ten new high-resolution photos available every 10 days, free of charge
2. Choose the right file format
After you have chosen the right image, you need to decide which file format is optimal for your needs. Since we are mostly concerned with pictures and relatively complicated “photorealistic” graphics, we have to choose from three commonly used raster image formats: GIF, PNG, and JPEG.
JPEG is the most commonly used image format today. It uses lossy data compression; which means that, depending on your settings, the image quality can suffer quite a bit. There is also no support for transparent backgrounds like there is with GIF and PNG formats. The biggest advantages of using this format is it keeps file sizes small and it is supported almost everywhere.
GIF is a bitmap image format used for simple art and animations. Because it supports only 256 colors, it's not recommended for photographs or more photorealistic images. However, its small file size and support for transparent backgrounds make it ideal for company logos and various page elements of websites.
PNG is a modern alternative to GIF and JPEG file formats. PNG supports transparency, has a better color range, and automatic gamma correction ability. PNG can even store a short text description of the image’s content to help search engines categorize your images. This file format is the newest of all three, which means it's not so readily supported. Also, file sizes can be a bit larger.
3. Optimize your images for the web
When optimizing images for the web, your goal is to reduce the file size as much as possible, without sacrificing too much in terms of image quality.
You have several options, but the easiest means of making this happen is to use an online compression tool like TinyPNG or Compress JPEG. Simply upload your image and the web application will take care of everything for you.
If you compare the compressed image with the original, you barely notice any quality loss.
The compressed image is on the left.
Adobe Photoshop (shown below) places all of the control in your hands, if that's what you want.
4. Use informative file names
For images downloaded from your camera, give them a new name that's descriptive, making it easier for search engines to find them.
A good example would be something like this: IMG_Seattle_MusicFestival_2015_01.
5. Pay attention to alt text
Alt text (short for “alternative text”) is used to highlight the identity of an image when you hover over it with your mouse cursor. It also shows as text to all users when there are problems rendering the image. Additionally, it is used by screen readers that help the visually impaired navigate the web.
The simplest HTML code for an image looks like this:
Apart from the file name, search engines visually impaired people have limited information to help them figure out what a web image is about. However, by including alt text like that below, you can precisely describe the content of your picture.
<img src=http://example.co.uk/uploads/big-steak.jpg alt=”Old man eating a big steak in the restaurant”>
You can also look at tags like the “title” property, but a simple alt image tag is enough to tell Google and other search engines what the picture is about—and help you rank better in the SERPs.
6. Separate your thumbnails from main pictures
Ideally, your thumbnails should be as small as possible to minimize page load time. That means you need to resize them and use the appropriate level of compression. Since they tend to be pretty small anyway, you can sacrifice a little bit of picture quality for increased speed.
To do this, you can use a photo editing powerhouse like Photoshop, or you can use one of many free tools that are available today. These include online picture editors like Pixlr, PicMonkey, and Fotor; and also GIMP, which is a freely distributed program that can do most things Photoshop can (but sometimes in a way that is much less user-friendly).
7. Create image sitemaps
If you already have a sitemap for your site (and you should), you can add image information to it or create a separate sitemap just for your images.
Creating the sitemap is not too complicated. Basically, for each URL you list in your sitemap, you can add additional information about images on that page. Google gives us an example for the URL http://example.co.uk/sample.html:
Image hosting services like Imgur and Postimage allow you to upload images onto their servers, which is great for saving some space and lessening the overall bandwidth your site consumes. The major downside is your images may become deleted or blocked when the hosting services are overwhelmed with high amounts of traffic.
This is what you want to avoid.
Because of this, it is always a good idea to use your own servers to host your images. You will definitely see how beneficial it can be in the long run.
9. Integrate social media
Social media plays an important role in your overall SEO and customer acquisition strategy. The easiest way to integrate your images into social media platforms is to add social media sharing buttons to your website.
One of the most popular ways to encourage visitors to share your images to Pinterest is to add a simple "Pin It" button to each one.
A great tool to use is Image Sharer by SumoMe. With Image Sharer, you can easily allow visitors to share the images on your site and link back to you. It supports Facebook, Twitter, Pinterest, and Yummly. You can customize the way Image Sharer icons appear; and if you buy the Pro version, you also get 24/7 help and the ability the ability to remove Image Sharer branding.
Image Sharer in action.
10. When in doubt, consult Google’s Webmaster Guidelines
Google has prepared a set of image publishing guidelines to help you optimize your site for their search engine and your visitor as part of their Webmaster Guidelines. You can find the complete guide here. It includes detailed information on the topics discussed in this article, and much more.
What tactics are you employing to ensure that your images show up in Internet search results?
About koirala — Avi Koirala oversees search and social for the De'Longhi Group, covering De'Longhi, Kenwood, Braun and Arietebrands globally. The De'Longhi Group has an online presence in 50+ countries. Avi has a BSc degree from Cyprus Institute of Marketing and has completed his postgraduate from University of the Highlands and Islands, Scotland. His personal blog can be reached here avi.me.uk