How can i make my 950x200px image load fast on site?

Hi guys,

I have an image sized 950x200px that I need to use on the main banner of my page, what would be the fastest way of getting this to load when the page is visited, cut it up and float the images side by side perhaps?

Thanks in advance.

Kyle

Have you optimized the image said image at all?

If you cut the image up into slices then it will actually take longer to load in full because of the extra requests required. Just keep it as one image and optimise the image file size as small as possible as mentioned above.

You can find some other factors involved in speeding up a site here.

The best thing to do is to save the the image at the lowest acceptable quality (high compression rate) so that it has the smallest possible file size.

Image slicing isn’t the panacea it once was - back in the days of 56K modems, large images took a long time to download, so slicing it allowed several sections of the image to download simultaneously.

With broadband now being widespread (depending on where you are and who your target market is), download speed of a single image is less of a problem - if you slice it, you are more likely to get latency issues caused by the number of HTTP requests to the server. One request followed by a large image can often be quicker than several requests followed by smaller images.

Thats great, thanks guys!!

I would also pay attention to the format you are using, you may be able to trim off some extra bytes by reducing the color usage (in preference to lowering the overall quality in the sense of artefacts). I find that on large images PNG is the best format (I tweak the settings to squeeze it as small as I can manage) however JPEG can give you a good quality to size ratio. You may find the following couple of articles useful… :slight_smile:

I guess JPG images have less size in terms of byte, you should try them out

Since PNG was designed specifically for the web it will most likely be the format that produces the smallest file size for the image once you have it properly optimised.