Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Articles & Tutorials

10 Quick Tips For Making Your Large Graphics Load Faster

by Heather Colman


« Prev · 1 · 2 · 3 · Next »

Summary : There's nothing worse then having to sit and wait while the images are loading on your webpages. We've become a society of convenience with microwaves, instant soup and lightening fast servers. We want things in the blink of an eye.

There's nothing worse then having to sit and wait while the images are loading on your webpages. We've become a society of convenience with microwaves, instant soup and lightening fast servers. We want things in the blink of an eye.

Your visitors expect nothing less when they land on your site. You've only got a couple of seconds before they hit that back button.... and they are gone... to a faster site that will give them the information they want instantly!

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

1. Use Height and Width (Size) Attributes.

Example: width="144" height="259"

Every time a browser loads a webpage it looks for the 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.

This all takes place instantly behind the scenes. When the proper attributes are used, the browser loads the text before the graphics. This is good. It's faster this way.

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 catchup. It can't load text onto the screen until it has figured out the exact size of the graphics.

Make sure to use attributes on all your graphics, even those little tiny ones, like buttons and bullets.

2. Size Your Image Correctly

Lets say you're trying to place an image with a file size of 30k and height & width attributes of 300 pixels wide by 400 pixels high in a spot on your webpage that is designed to hold an image sized at 200 pixels wide by 300 pixels high.

To accomplish this you've changed the height & width attributes in your html code to 200 x 300.

You may think that since the image will be displayed at the lower size (200x300), the file size will be smaller and the image will load faster.

Not true. Regardless of what size attributes you use, that file size is still 30k and it will load at the same speed any other 30k image does.


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 annimation at a specific number of repetitions rather than allowing them to loop endlessly.

« Prev · 1 · 2 · 3 · Next »