How can I improve loading times on a static HTML site?

Question

We are working on a website and noticed that the GIF images(100kb - 200kb) are loading very slowly.

The site is a static site with CSS/HTML.

Does any one have any pointers to why the images might be loading slowly?

Would using JPGs improve the performance?

Here is the HTML code for that image:

<div><img src="images/mainImg_3.gif">

Answer 1

They're loading slow because they're huge. 200KB is a very big image file. I don't know exactly what the going recommendation is for web images, but it's a very good idea to keep them under 50K.

GIF images are not very efficient for photographic images. You should experiment with other formats like JPG and PNG to see if you can get the same quality with smaller file size. You should be able to shrink the file size quite a bit while retaining the quality.

Another trick: use thumbnails. Save two version of each image, one 25% the size (by resolution) of the other. Your site visitors can click the thumbnail if they want to see more. This will speed loading times and reduce your bandwidth bill.

Answer 2

Are your images properly sized? If you displaying them on your webpage as 300x300 pixels make sure the original image is the same size.

This helps two-fold, one its less data to download, and 2 it doesn't require extra processing power for the browser to resize. Additionally, the image will look crisper if its the exact size.

As far as the difference between GIF and JPG, (with the exception of transparency, which JPG doesn't support), it boils down to what your image contains. GIF uses a color table and a map to that color table to store the image, while JPG uses a compression algorith. So, if you image contains few color variation you will get a smaller filesize from a GIF. Conversly, if you have a photograph with lots of color variation you'll want to use a JPG.