HTML Image File Type and Size

When using images on the internet it is crucial to remember that file size is much more critical than it is when you are just using images on your home computer. Your computer will quite happily load images which are several Megabytes in size, but over an internet connection this could take several seconds, or even minutes. Research has shown that when visitors reach a site full of very large, slow-loading images, it can be very off-putting, and most people will simply leave the site and go somewhere else.

On top of this, most web hosting comes with a limit on bandwidth usage. This is simply a limit on the amount of data which can be transferred from your website to user's computers in any given month. The larger your images, the higher your bandwidth requirements, and therefore the more likely you are to reach your limit and have your site temporarily disabled.

This should all make it clear that you should try to make your images as small in file size as you can. There are a few ways you can do this:

Make your files physically smaller

If you are using images taken using a digital camera, the chances are they are several million pixels in size, and far larger than you would ever need on the internet. Therefore it makes sense to use a graphics program to shrink them down to the size you actually want. You will find that this can make an absolutely massive difference to your file size.

Choose the right image file type

As well as shrinking your images down it is important to choose the right file type. Different file types use different compression algorithms, and this can have a big impact on file size. The best file types to choose for the internet are jpeg (or jpg), or gif. jpegs are great for images with lots of detail and colors, such as photographs, because they can contain a lot of detailed information in a small file size. gif files are even smaller but they support far fewer colors. They are best saved for things like logos which might be made up of relatively few colors.

Alter the image quality

Finally you can change the quality of your images. In most graphics programs, when you come to export a jpeg or gif file you can select the image quality on a scale from 0 to 100%. Obviously this is a tradeoff - the higher the percentage the better the image quality but the larger the file, and vice versa. You should choose a quality level that gives an acceptable image quality, but without reducing it so much that the image starts to look pixilated and scrappy. If in doubt go for a higher quality - even a jpeg file on 100% quality will have an acceptably small file size.