How to use images in websites

How to use images in websites


The graphics you use in your Web page should be in a format that the major operating systems recognize. Presently the two most widely used formats are Gif and JPEG, with PNG gaining in popularity.


More than 80% of people are using 24 by 32 bit monitors, which is significant increase compared to the 50% usage 2002. The trend is definitely toward “True Colour” in which any of 16miliion colours can be used.


Resolution can mean one of two quite distinct concepts: the actual number of pixels on a monitor or in an image, say 640 x 480, or the number of pixels in an inch of that monitor or image, say 72 or 86ppi (pixels per inch). On paper, pixels can add details or size while on screen more pixels always translate to a bigger image.


Using smaller images is key to faster downloads, however compressing the image also works as a second option. There are three popular compression methods: LZW (for GIF images), JPEG, and PNG. LZW is good for computer generated art like logos, rendered text and other images that have large areas of single colour. JPEG, on the other hand, is better at compressing photographs and other images that have may different colours. The drawbacks for LZW is that it used to be patented (until 2004) and developers had to pay royalties on the software that used it (This is one of the principle reasons that PNG was developed), and Gif images are limited to 256 colours. JPEG’s drawback is that its compression information takes up a lot of space and it’s simply not worth it for smaller images, also it’s a lossy compression – permanently eliminating details in order to save space. Uncompressing the image will not restore the lost data.


You can take advantage of transparency by using complex layers and making one image move behind another, also you can give an image a non-rectangular outline, adding visual interest on your pages. GIF and PNG allow transparency but JPEG does not.

Scroll to Top