Use Graphics Correctly and your Web Site Downloads Faster

Graphics can visually make or break a web site. For a visitor, a web page with mostly text can look an awful lot like one of those “end user license agreements” and nobody wants to look at those things :). So, you need to grab your visitor’s attention and some well placed pictures can do wonders to that end.

But failing to optimize those graphics can have just as negative an impact as using no graphics at all. A graphic saved in the wrong format or one that is not compressed correctly will result in a painfully slow download time for visitors to your web site. This can cause them to lose patience and leave your site even before the Home page finishes loading. If that happens regularly, why even have a web site?

Well, here are a few tips to keep in mind when using graphics on your web pages. The purpose of these techniques is to keep the graphic file size small without compromising the quality of the finished image.

Tip #1 – Blur your .jpgs

The next time you are going to be placing .jpg files on your web page, open your photo editing or graphics program (usually Photoshop or Fireworks or maybe one of the free Photoshop alternatives we have recommended) and add a slight guassian blur to each of the images you plan on using. “Make the graphic blurry”, you say? That’s right. Now, I am obviously not talking about making the image so blurry that its visual quality is affected. No, I am saying that by adding a slight gaussian blur to a .jpg file, you will actually decrease that image’s file size. You will have to play around with the exact amount to add, but try it next time. You will be surprised at the results and the visual difference will be imperceivable.

This is an especially good trick for e-commerce web sites that display dozens of images per page. Reducing the file size of each of those images results in the total page loading faster and you thereby avoid the risk of your visitors becoming impatient and leaving.

Tip #2 – Know your .gifs

It is important to know exactly how a .gif file is compressed in order to take full advantage of this image format. A .gif file is compressed horizontally and from top to bottom. This means that a .gif image with the majority of its solid colors running horizontally will be smaller in file size than a .gif image with the majority of its solid colors running vertically. Here is an example:

Image size: 118kb	Image size: 163kb

So, if you are using .gifs on your web site, see if you can orient the image so that most of its solid colors are running horzontally.

Now, if you are only using a few small images on your web page, don’t worry about it spending the extra time on these techniques. The big payoff happens when you are using lots of graphics on your web page and you apply these techniques. In that case, you can dramatically decrease the time your visitors spend waiting while your web page is downloading.

If you have some additional tips, don’t be stingy – leave a comment below with your tip :).