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.

Determining Load Time

So now that you know load time is important how do you find out what your sites load time is? Netmechanic offers a subscription to a service you can get for your website that tells you this and they also offer a free 1-time tool as well at http://www.netmechanic.com/products/HTML_Toolbox_FreeSample.shtml

All you have to do is enter your website address in the box and hit Test Now. Give Netmechanic a minute or so to process your information and then your reports are ready. Click on the detailed load time report and Netmechanic will tell you not only how long it takes to load but also which images, etc are taking the longest. They highlight the worst offenders in red. And for each image Netmechanic also tells you how long that image takes and if you click on the image it will show you different optimized versions of the image and how they will look. Im sure you will be amazed at how much less time it will take to load a jpeg that was saved at 90% quality versus 100% quality.

Remember some people still have 28.8 modems, and while that number is coming down if you want to make your site accessible to everyone you should keep the load time as small as possible.

Why loadtime is important

What is load time and why you should pay attention

Load time can be loosely defined as the amount of time between when a user requests to go to your site and when they actually see the content.

Slow sites drive visitors away. It's that simple. 26% of online users rate slow load times as the most frustrating factor in using the web. $4.35 billion in e-commerce sales have been lost each year due to user frustration related to slow downloads. In fact 48% of users report that they gave up trying to purchase an item online because the web pages took too long to load. Generally 8 seconds is the maximum amount of time that a web user will wait for a page to load. Consistently websites with load times above this had higher bailout rates than those with faster load times.

Know your audience

There are billions of internet users out there. Some have slow connections and some have very fast connections. So how do you know which one you are targetting? Look at your site, do you target younger families, or sell technology products? If so, chances are your target audience has high speed connections. On the other hand if you sell prescription drugs, or glasses your target audience is probably older and most likely has slower internet connections. For the technology site packing it with graphics and a cool design will probably not deter sales. But doing so on the prescription drug site may lead to many frustrated users who leave the site before it ever fully loads. Always pick a design that suits the lowest common denominator.