Batch Optimization with IrfanView

Yesterday I talked about load time and optimizing website images with IrfanView and you might of felt overwhelmed at the process of doing this for each and every image in your website. Fear not as there is a quick way to do this for many images at once.

Open your handy dandy IrfanView tool and under the File menu select Batch Conversion/Rename. In the dropdown labelled Look In choose the directory where your images are located. This should bring up a list of all of the images in that directory. Now highlight the images to optimize (use Shift and/or CTRL to select multiple images) and then hit the Add button on the left hand side. This will add all of your selected images into the box at the left. In the Output Directory box enter the path where you want your new optimized images to go.

For jpeg images click on the options button and then pick the quality. For gif images click on the advanced options button then enable change color depth and enter the number of colors. Note that you will need to do the jpegs and the gifs separately as all of the images you optimize at the same time will come out as the same image type.

Hit the Start button at the top left to get started with your optimization. Your images should now be optimized and they can be uploaded to your site.

How to Optimize Images

Im a big fan personally of the freeware programs Irfanview which does an excellent job of compressing .jpg and .gif images for the web. The Irfanview program can also crop images and resize and is easy to learn and download.

To optimize a jpeg image with IrfanView open the image and select File-->Save As. In the Save dialog there will be a small slider from 0-100, this is where you pick the quality for your .jpg file. Hit save to save the graphic with the new quality. Remember if you give it the same name you will overwrite your original so I highly recommend that you put it into a different folder so you can always revert back if needed. Irfanviews default quality is 80% but on most images you can get away with 70% and the image will still look great.

To optimize a gif image with IrfanView open the image and select Image-->Decrease Color Depth. Now enter in the number of colors and select Ok. The less colors you use the smaller the size of the image will be and the quicker it will load.

Its also important to note that sometimes changing an image from a jpeg to a gif can sometimes signifigantly reduce its size. Images that are photos with alot of colors and detail are usually better as jpeg and simpler images that are drawn with few colors are usually better as a gif.

To resize an image using IrfanView open the image and then select Image-->Resize/Resample. Enter your new size and hit ok. If you keep the preserve aspect ratio box checked the image will keep the right dimensions and wont get distorted.

Once you are done optimizing your images reupload them to your website and you should notice a signifigant decrease in the time it takes to load the pages.

So what do you do if you have thousands of images? This could take a lot of time right? Yes, it would but of course it is worth it however there is good news, you dont have to do the images one at a time. IrfanView offers a batch tool to optimize or resize many images at once. More on that later.

Netmechanic also offers an excellent utility called GifBot, available at http://www.netmechanic.com/GIFBot/optimize-graphic.htm that can optimize your images and it will show you all of the different versions etc upfront. My only complaint about the gifbot is that you can only see one image at a time over the web so for large sites or people with slow connections this could be a slow way to go about it.

Why Optimize your Images

The single greatest factor affecting loadtime on most sites is the images. While they look pretty they take time to load. So in order to lower the load time of your site the first thing to do is to try and reduce the number of images on your page(s).

Take a cold, objective look at your site. Try to view it through a visitor's eyes. Which graphics are necessary and which are superfluous? Can you manipulate the text with HTML (bold, italic, font face) as opposed to using a text graphic? Can a clickable image be replaced with a text link? Cutting expendable graphics can greatly speed page load time. Assess each graphic one-by-one to determine if it should stay or go; keep only those that are essential.

You will of course be left with the most important images and the next step is to reduce the size of the remaining images because smaller images load faster. After you've pared down your images to the essentials, it's time to reduce the size (byte-wise) of what remains. You can do this in two ways:

* Reduce image dimensions (Width x Height in pixels).
* "Optimize" the image.

Reducing the dimensions of an image isn't always a viable option. The layout of your page may depend on a particular image being a specific size (the way the page appears, though, is of course relative to screen resolution). If you can safely shrink your image dimensions, do so, and then optimize. If you cannot change the dimensions of the images, optimize only. "Optimizing" an image means reducing the file size of the image. This is accomplished primarily by removing extraneous colors from the image. For example, a GIF saved at 256 colors can usually be reduced to 128, 64, or 32 colors - sometimes even less - without compromising image quality. This can *drastically* reduce the file size of an image which, in turn, (often) shaves seconds off load time. A JPEG saved at 100% quality can usually be reduced to 50-90% quality without compromising image quality and will load in less then half the time.

Remember to never use your webpage to resize images on the fly. If you upload an image thats 500x500 pixels and then only display it on your website as a 100x100 pixel image you are making the user wait unnecessarily for detail they dont need. Even though the webpage is displaying it in the small size the user still must download the entire large image before they are able to view it . Try optimizing that image to the right size before uploading it and you will notice a huge difference in load time and the size of the image. Recently I found one site that took 250 seconds to load. The site had a row of Visa, Mastercard, Discover and American Express labels that were about 50pixels each in size on the screen. When I ran it through the html toolbox I found that each of those images were uploaded and were larger then my screen size and they were being resized inside the webpage. Once we resized the actual image files the page took 30 seconds to load. As you can image as a result of this the merchants sales increased greatly because the site loaded faster for everyone.

Once you've pruned the extra images and optimized the "keepers", upload your lighter page. Remember to always keep an a copy of your original graphics before optimizing them. There is nothing worse then picking the wrong size or optimization and not being able to go back.