How to optimize images for SEO

Here's some useful tips on how to optimize and format your images for SEO, to make them more Google-friendly, regarding some technical issues such as speeding up your pages and consequently creating a better user-experience.

This technical stuff covers some of the best practices that Google preaches: implementing these rules makes the loading time of web sites faster and they contribute in some way to get a better position. As HTML5 is getting more popular (with good reason) I'll also show you how to take advantage of the new tags, now supported in all major browsers.

Making your web site's images more Google-friendly is quite and easy task. Let's start with a do list:

* Give your images detailed and informative file-names. Here's an example: src="images/croissant-jam-breakfast.jpg" instead of src="images/IMG00037.JPG". Naming your files is not as easy task as it would seem: soon I will cover this issue about seo urls and best practices. For now, urls should be obvious, short and each word should be separated by a hyphen;
* Create descriptive alt text, not only to provide Google useful information about the subject of the image, but also to make your web pages more accessible and to have correct and valid html code (another factor Google appreciates);
* Provide good and descriptive titles for your images: title="Croissant and apricot jam for breakfast";
* Store images in a directory of their own;
* Publish good-quality photos, putting them high up on the page to create a great-user experience;
* Specify a height and a width for all images. This is one of the best practices Google recommends to the webmasters: it allows the browsers to render the web-pages faster;
* Serve scaled images. Sizing your images properly, avoiding scaling them on the fly with HTML or CSS, can save many bytes of data. If you want to display the same image in different sizes, to use a little one as a thumbnail, you should use an image editor and resize it;
* Optimize images in order to save many bytes of data by performing the following basic optimization on all images:
o Crop unnecessary space;
o Reduce color depth to the lowest acceptable level;
o Remove image comments;
o Save the image in the proper format (see below);
o Performe lossless compression of JPEG and PNG files.
To perform further lossless compression on JPEG and PNG files there are several tools such as Jpegtram, OptiPNG, PNGOUT, but you can also use the Page Speed tool as well to test your images and download an optimized version of them if they fail the test in some way;
* Save your image in the proper format. PNGs are almost superior to GIFs and are the best choice. GIFs is better for very small or simple graphics (i.e. less than 10x10px or a color palette of less than 3 colors) and for images that contain animations. If you are in doubt try them both, as PNG and as GIF, and pick the smaller. No doubt for all photographic-style images: use JPGs. Never use BMP or TIFF (not all browsers support them);
* Test the content by using a text-only browser such as Lynx;
* Use anchor text within the site that is useful and relevant;
* Provide good and descriptive titles and captions for the images (see below);
* The surrounding text should be image appropriate.

Of course I haven't forgotten the do-not list! Here it is:

* Avoid embed text inside images (keep it in regular HTML);
* Fill alt attribute with keywords because the site could be perceived as spam (use your keywords wisely);
* Use gzip for your images, because they are already compressed and a further compression won't provide any additional benefit and usually makes them larger.

I also suggest you write the img tag to conformity of certain rules, to make compression (minify html, enable gzip compression) most successful. Infact, specifying CSS key-value pair, HTML attributes in the same order where possible, for instance alphabetize them, use lowercase wherever possible and use consistent quoting (i.e. always single quote, or always double quote).

I noticed Google does not use quotations for several attributes because it makes the compression's algorithm more successfull. Now I do not use quotations either me, I just use them in this example: I guarantee that using values unquoted, the code is still valid if they do not contain spaces or any of = < > " ’ etc.

Even if the title attribute is not crawled by Googlebot get used to putting them. You will improve the accesibility of your web pages.

I usually put one or a group of images in a figure tag. Then, I surround a caption and a single image with a anchor tag that links to a larger dimension or, generally, to another page (for example to an article that includes the same image). I use h5 tag for the captions and of course the img tag for the image itself.

1.

Formatting images for SEO and Google Images is the hardest work: there are many ways of doing it and the example above is just one of them. Use your imagination! I'd never used h5 tag before: using it to have my images be captioned I found it an excellent idea. Instead of having very long tool-tips, consider adding a caption to your images. Here is the final result!

Now, I will show you another very interesting techique to make your web page's loading time very fast. Since image files (but also media files, PDFs, Flash files etc.) rarely change and take time to download, it is better to allow these static resources to be cached by a browser or a proxy in order to reduce:

* The round-trip time by eliminating HTTP requests;
* The payload size of the responses;
* The page load time;
* The bandwidth and hosting costs.

There are several ways to do it: by modifying the .htaccess (Hypertext Access) file or using a server-side script to manually set the expiration to your images if you do not have the access and modify the .htaccess file.

.htaccess is the default name of Apache's directory-level configuration file. Here you can customize the directives defined in the main configuration file. Below, some examples of what you can add into your .htaccess file if you are allowed to change it:

1. # CACHING #
2. ##############################################
3. # YEAR
4. 
5. Header set Cache-Control "max-age=29030400"
6. 
7. # MONTH
8. 
9. Header set Cache-Control "max-age=2592000"
10. 
11. # HOUR
12. 
13. Header set Cache-Control "max-age=3600"
14.

If you are not allowed to change the .htaccess file, you can create a separate page where you put the path of the image you want to display. In this page you will modify its header. I wrote the script in Php, but you can follow the underlying idea and do it in another server-side language.

Create and save a new php page, giving it the same name of the image. If the image you want to display is named "croissant-jam-breakfast.png", save your page as "croissant-jam-breakfast.php". Then you can copy and paste the following code, taking care to make the little changes you need.

1. <?php
2. $image = 'croissant-jam-breakfast.php'; // Your image's path
3. header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($image)).' GMT', true,
4. 200);
5. header('Content-Length: '.filesize($image));
6. $expires = 60*60*24*365; // 1 year
7. header("Pragma: public");
8. header('Expires: ' . 200);gmdate('D, d M Y H:i:s', 200);time()+$expires) . ' GMT');
9. header('Content-Type: image/jpeg');
10. print file_get_contents($image);
11. ?>

The header() function sends a raw HTTP header to a client. Its syntax is:

1. header(string,replace,http_response_code)

The string parameter is the only one required; replace and http_response_code are optional. To read a complete PHP header() reference, full of useful examples.

After creating your "croissant-jam-breakfast.php" page, you have only to make a little change in your html code. Just change the extension from jpeg to php and modify the path of your file if you put it in some other directory:

1. 
3.

To verify if your page loading time has improved, run the Speed Page and check the Leverage browser chaching and Leverage proxy chaching. Usually if you do not specify a cache expiration you will get:

1. The following resources are missing a cache expiration. Resources that do not
2. specify an expiration may not be cached by browsers. Specify an expiration
3. at least one monthin the future for resources that should be cached, and an
4. expiration in the past for resources that should not be cached:
5. · http://www.seoxgoogle.net/images/croissant-jam-breakfast.jpeg

Also remember to check Optimize images, Serve scaled images and Specify image dimensions.