jpg or jpeg
gif
png
What are the main differences?
JPG files are more often used for photo-type images. GIF images allow a transparent background - so if your picture has an irregular shape, and you want it against a coloured background, it will need to be in .gif format. PNG is a more recent format.
What is "optimising"?
Picture files can be huge, which will cause your page to load very slowly. So why can files that show the same picture vary in file size? The width and height of an image make a difference, but the main difference is in the depth of a picture. Image files are made up of pixels - "picture cells", dots similar to those that make up old newspaper photos. The file records information on each pixel, and the more colours or depth an image has, the more information has to be stored. So for a black and white line drawing, each pixel will either be black or white, and the information can be stored in two bits of data. To show a photo, with the full range of colours, 24 bits will be needed for each pixel - so the file is much larger. This is Webopedia's definition of colour depth: http://www.webopedia.com/TERM/C/color_de...
Here's a good explanation of picture depth, and how it affects the speed of your pages: http://webreference.com/dev/graphics/int...
Humans can quickly spot the difference between a monochrome and a colour picture - but the human eye can't tell the difference so easily between a full-depth image, and one with fewer colours. The differences between the different colour depths are most noticeable in photos. Clip-art is affected much less.
If you just want a picture to break up your text and provide interest to your page, use as few colours as possible. Only use full colour depth when absolutely necessary.
If you need high-quality graphics, you could have lower-quality "thumbnails", linking to high quality pictures which visitors can view if they want to. This would be a good solution if you need photos of your stock but don't want a slow-loading page. So how do you optimise your graphics? I used the freeware IrfanView from http://www.irfanview.com to optimise my graphics. Here's how:
Step One - load IrfanView, and open your picture file (File, Open). In the status bar at the bottom, you can see the dimensions - width, height, and colour depth (BPP) of your picture. You can also see the filesize. Click the "Info" button on the toolbar for more details about your picture file.
Go To Page: 1 2
