Optimize your images for Search – Search Engine Optimization tips for Image Optimization:

Optimize your images for Search

It is really painful to sit and wait till the images load on the webpage. Especially in the scenario where websites are built on Web 2.0 techniques, you have only got a couple of seconds before your user hit that back button….

 

 

 

Here are 10 quick tips for decreasing the load time on your images and graphics.

 

1. Use Height and Width (Size) Attributes.

 

Example: width=”144″ height=”259″

 

Every time a browser loads a webpage it looks for the height and width attributes (size) of each image in your html code so it knows how to lay out the text and the graphics on that page. When the proper attributes are used, the browser loads the text before the graphics. If you don’t use the attributes, it causes a delay waiting for the browser to download the images first and then lay out the text. The browser has to play catch-up game. It can’t load text onto the screen until it has figured out the exact size of the graphics.

 

2. Size Your Image Correctly

 

Use an image editor to change the size of the image to the correct dimensions first. Then use the correct size attributes in your html. By resizing the image before you plug it into your html code, the file size will be smaller and the browser will load it quicker.

 

3. Animations

 

Animations are attention getters, but they quickly become annoying. They also slow down the loading of your page. Limit the number of animated graphics on your page and set your animation at a specific number of repetitions rather than allowing them to loop endlessly.

 

4. Use the Correct Image Format

If your image is simple with a small numbers of colors try converting it to a gif format. Good choices for this are clipart, bullets, buttons, charts and such. Not all images are suited for the gif format. Complex images, photos or those with enhancements such as reflections and drop shadows don’t display well in this format. The jpg format is suitable for complex images with lots of color variations.

 

5. Slice Those Images

 

Image slicing is a technique used to breakdown a large image into smaller pieces to make it load faster.

 

6. Limit the Number of Graphics you Place on Each Page.

 

If your pages are loading too slowly, consider removing some of the images. Keep only those that absolutely necessary.

 

7. Use Thumbnails

 

Use a java script to display a thumbnail and load the larger image only when the reader rolls their mouse over the thumbnail.

 

8. Browser Cache

 

Graphics and text are stored in what’s called cache on your hard drive. This makes it easier and quicker to load files that are displayed in your browser. It loads them from the cache rather than over the net each and every time, if it’s available. To improve your visitors experience, take advantage of their browser cache. The best way to do this is by not putting identical images in more than one folder, subfolder or directory on your server. If the browser always calls the image from the same folder, it loads much quicker.

 

9. Optimize Your Images

 

Optimizing your images is a great way to reduce the load time. Greater percentages of optimization may leave your images blotchy with speckled blocks of color. It will often make your colors look washed-out and you may lose some of the fine details.

 

10. Progressive Optimization

 

A sneaky little trick we can use is to select progressive settings when you’re optimizing your images. This doesn’t really make your images load faster; however, they do load first at a very low resolution and continue to load progressively, with more detail, until they are fully loaded.

 

Your visitor at least has something to view and content to read while the loading process finishes up.