Images

Images are a great way to keep people reading your website engaged and interested in your content.

There are some things you need to know about putting images on a website versus on your own computer: mainly, you need to worry about how big the images are so that website visitors don't need to spend 3 hours waiting for them to download!

Image size

The pictures taken by digital cameras tend to be very large... typically a few megabytes in file–size and with dimensions larger than many peoples' screens (although you probably won't notice this because photo programs always squish them to fit on your screen).

Note that file-size (measured in megabytes) and image dimensions (measured in pixels, inches or centimetres) are different concepts, although they are co-related.

Image dimensions

An image's dimensions are the physical size of the image when it's displayed on the screen. If you put a ruler against the screen, you would be measuring the image dimensions. When stored on the computer, however, image dimensions are measured with pixels (tiny dots of a single colour which happen to be the smallest thing a computer screen can display).

Images that you want to embed in the text of your page should usually be between 400 and 200 pixels wide: wider pictures will start to overlap parts of the page, and smaller images are too small to see clearly. Images that you use for banners or backgrounds can be up to 960 pixels wide.

It is best to upload images that are already the correct size to your website. Making a small image larger will cause it to look blocky, and images that are too big will take a LONG time for your visitors to download and will waste bandwidth (which costs you money).

You might notice that you can upload a large image and then tell the web page to resize it. However, this still forces the user to download the big image (which wastes bandwidth and costs money) and then resize on the fly (which is slow).

File-size and format

The file-size of an image depends on the image dimensions (discussed above) but also which format the image is stored in. Different image formats are designed for different uses:

• JPEG images are designed only for photos. Photos stored in JPEG format look good and tend to be really small. But, diagrams, charts and logos stored in JPEG format look fuzzy.
• PNG images are designed only for diagrams, logos and charts. You can store photos in PNG format too (and they'll look great), but they will have really big file sizes.
• GIF images are out-dated... they can only store a limited number of colours (so diagrams look bad and photos look much worse). Plus, PNG is more space-efficient than GIF.

Other photo formats, like BMP, TIFF, TGA and RAW are not supported by everyone's computer: if you use one of these formats, the image probably won't show up.