Image of lock unoptimized

Optimized image

I often visit web sites that have poorly optimized images on them. You probably have done this, too and may not have even know. One of the signs of a poorly optimized image is that it takes that particular image a long time to download and display. Sometimes this show itself by the image seeming to “build” itself from the top to bottom. Sometimes, depending on your browser and site settings, the offending image may just cause the page to take longer to display. In either case, this can be very annoying, may cause problems with site SEO, and can have issues on your site bandwidth usage.

The two images above are the same image and display at the same size on the page, but if you click on them you will notice a huge difference in size. The top image is 1.2MB in size and the bottom one is 37KB. Can you tell much or any difference in their appearance? Which one do you think will take longer to display?

Why does this matter?

First of all, if you have images that are large in size they can take a long time to download and you run the risk of frustrating your site visitors. I know this is not a huge issues these days, since most of us are running on Internet connections with plenty of speed. However, ten years ago, this was a huge problem. When we (those of us old enough to remember) were using a dial up connection to access web pages, a small image file was very important. In those days, optimized images were a necessity. Today, they are still a good measure for best practices in web design.

Secondly, there is a lot of talk about the effect of page download speeds on the overall search engine placement for a web page. Our jury is still out on whether this is a big issue or not, but you can click on the link above to read an article that I wrote about that topic, if you want more information.

Today, many web designers just don’t seem to care or are just too lazy to do the extra work to optimize an image.

How Can I Optimize an Image?

Many image editors out there will allow you to scale or size an image file to the size you need to display on the page where you are using it. That is the first step. The images at the top of the article only need to be 675 pixels wide, in this case, so anything larger than that is a waste. There is little reason for an image to be over 72 dpi in resolution for use on a web page, so that will save you some on file size, also. Just using those settings, will shrink your image size down quite a bit. However, you can go a step farther by using a program that has features to “compress” the image and make the file size even smaller. For example, the optimized image above would have likely been a couple hundred kilobytes in size without that compression.

PhotoShop, for instance, has a “Save For Web & Devices” feature that will allow you to see what the image will look like at various compression settings and in different formats before you save the image. The optimized image above was compressed to a medium setting and saved as a .jpg file type. If the image had been a logo and contained only a few solid colors, for instance, it might have been better to save it in a .gif format or .png format. These types of images often look better and are smaller file sizes in those formats.

I hope that these thought will make you want to take a minute to evaluate the images on your web site and see if there is room for improvement. If you would like more information on this topic, feel free to contact us. We are always glad to help.