Posted by koirala

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.)

Searching for “black car” on Flickr.

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
  • Public Domain Archive: Repository of high-quality, public domain images from across the web
  • 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.

Compress JPEG

If you compare the compressed image with the original, you barely notice any quality loss.

Original Image vs Compressed Image

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.

Original Image vs Compressed Image using Photoshop

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:

<img src=”http://example.co.uk/uploads/big-steak.jpg”> 

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

Google encourages you to use image sitemaps to give their search engine more information about the images available on your website. This allows them to find even those images that are loaded by a JavaScript code, which is often the case with product images and slider galleries.

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:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://example.co.uk/sample.html</loc> <image:image> <image:loc>http://example.co.uk/image.jpg</image:loc> </image:image> <image:image> <image:loc>http://example.co.uk/photo.jpg</image:loc> </image:image> </url> </urlset> 

You can find more information and a complete set of image tag definitions here.

If you are running a WordPress website, you can also take an advantage of available plugins. For instance, Google XML Sitemap for Images and Udinra All Image Sitemap both automatically create Google XML sitemaps for images.

8. Don’t rely on third-party image hosting

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.

Image Not Found error

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.

Image Social Sharing Example

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

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?

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!

Advertisements