10 Image search Optimization Techniques To Gain SEO Benefits
Do yourself a favor, take the guesswork out of the picture and register at GTmetrix.Com now. This is not a sales pitch even though it sounds like one. Optimizing images is a lot more difficult than you might imagine, and making corrections is a pain. When you join GTmetrix – which is not an image optimization site, by the way, you get a few benefits that save you valuable time plus lets you see the improvement to your site immediately. Disclaimer: we are in no way associated with GTmetrix and we certainly do not profit from your registration there unless you come back and leave us a comment and share this article on your social media network!
1. OptimizeWell, the sub-title could have been catchier, but not more to the point. Before anything else, you need to use the optimization settings in your image editor to make sure your image does not slow down site loading and yet appears totally professional. 70 kb is a standard maximum size for most images, but like we said, let’s take the guesswork out of the picture. Use your eyes an image editor (Photoshop or free alternatives like Irfan View) to determine what looks good. Play around with .jpg and .pnj formats and .gif as well if the image is thumbnail size or slightly larger. Post the images and do what you have to do with the entire page – add text, follow the directions outlined in the remaining 9 points and so on.Now go to GTmetrix and measure your site load time. If your images are not optimized enough, the site will tell you. You can also use Google Pagespeed and get the same benefits but GTmetrix has one added feature which we shall come to presently.2. Mention Dimensions
The height and width attributes are extremely essential for SEO. When you tell the browser that you have a 550 x 450 px image on the page, the total download process will not pause to guess what size it is or wait till it downloads completely. If there is a bandwidth problem, the exact dimensions will be left blank while the rest of the page downloads. Often, you see pages partially downloaded and not responding. Not good – and easily remedied with the dimensions mentioned. The additional advantage of GTmetrix is that if you did forget to include dimensions in any of the images, the site will point it out and tell you what the dimensions are, as well.
3. Alt Attribute
Use this to describe the image so that visually disabled visitors have a complete experience of your site (by using readers for the alt text) and bots can index your image – both go down well with Google. Include your keyword naturally in the description if possible.
4. Use keyword in Image Title
This is often overlooked – the alt tag is not a replacement for the image title – bots will crawl your site and index the image’s file name as well, and if it reads something like DSCO22304, well…! Think of a proper, simple and descriptive title and make an effort to include your keyword in it.
5. Optimize – Don’t Shrink
It is possible to crunch a large image through source code to make it fit into a smaller space. Please don’t take that route – your image will download full size anyway, and your site will lose valuable loading points. Also, older browsers can have problem rendering a shrunk image properly. Just go back and read the first point we mentioned.
6. Alt Attribute – Where Not to Use
Thumbnails are great for shopping sites or galleries, but make sure you don’t worry too much about their quality. They are meant to be clicked on for a larger, high quality image. And don’t put an alt tag description on them unless you can think of something very different from what you put in the larger image. You don’t want Google to index the thumbnail instead of the higher res one or penalize you for keyword spamming through alt tags.
7. Add Image Maps
Google Webmaster Tools has detailed guidelines concerning how to create proper image maps. Image maps do not guarantee that the images mentioned will be crawled, but they usually are, and you get a better result with image indexing than without a map. Also, providing a site map is mandatory (you will receive notification from Google if your sitemap is missing) for a good site image, and an image map is a bonus that tells the search engine that you are going the extra mile to make your site search bot friendly. That is definitely a plus for your SEO.
8. About Borders and Backgrounds
Buttons, lines, borders, background images – they all contribute to site load time. Very often, you can use CSS styling to replace them (not the buttons). This article cannot teach you coding, but now that you know what to do, we are certain you can make an effort to actually replace those non-essential images. The only thing that you need to worry about is using complicated CSS rules (yes, you can get carried away by the magic of CSS) that can make the CSS file heavier than the combined weight of the images you are trying to replace. This is rare, but not unheard of, so beware!
9. Don’t Host Your Images Elsewhere
By elsewhere, we specifically mean the Content Delivery Networks that help secure and speed up your site. When your entire domain passes through such a network, there isn’t much to worry about except the normal glitches that sometimes come with it. However, it is possible to lose ownership of your images if you choose to place them on the CDN. This practice has its advantages only when the speed and bandwidth savings prove so profitable that you don’t need to associate your domain with the images at all. Choose well is all we can say – use a CDN only if you need one, not because they are all the rage now.
10. Use CSS Sprites
This is a bit complicated, but there’s an easy solution. But first, what is this all about? The buttons and other non-essential images that we spoke of? Well, buttons are not really non-essential, and the rollover effect can be great (already achievable through simple CSS rules), and you cannot really do without icons. Let’s say you have 10 such images. When the page loads, the browser sends HTTP requests to the server for each element to load. With each request (10 separate ones in this case) the browser has to wait for the server to reply. This, naturally, increases the site load time. You can use CSS sprites to combine all 10 images into one and send just a single request. Since icons and buttons are usually very lightweight, they don’t require significant time to download – the time spent is on the requests we mentioned. You have a super-efficient site when you are using sprites.
Now for the easy solution – we don’t expect you to learn coding. Just create your site and then head over to SpriteMe.Org. This is a bookmarklet that will show you in a panel the number of images that can be sprited. Choose them and click the ‘Make Sprite’ button, and you have the code. Now use the export option which will give you your current code with a strikethrough and the sprite replacement for a simple copy paste solution. There you go: easy as a pie!
Those were the 10 image optimization techniques to gain SEO benefits – and don’t forget the GTmetrix check up to ensure that you have, indeed, achieved the desired level of optimization.
