JPEG images (typically used by digital cameras) use all the colours available (left) GIF images use a maximum of 256 colours so gradated tones do not work as well (right - can be better than this if 'dithered')

 

JPEG applies 'compression' to an image. This will remove detailed colour and brightness information. Compression is useful as it makes file sizes much smaller than for original images of the same dimensions . Small file sizes mean images will load onto a web page more quickly. An important factor especially for users on slow connections to the internet.

 

JPEG photographs should also be 'resized' before they are placed on a web page. If you upload an image at the full size it was taken on a digital camera it will be much too big to be displayed unless it is 'shrunk' into a small slot on screen. Though this is possible such an image will typically dramatically slow down loading time for the page and may not look as good as it would if resized to be only the size needed for it to display.

Graphics software such as Irfanview (basic / free) or Photoshop (advanced / expensive) allow you to resize and offer a compression scale you set when saving images as JPEG. Online services such as picnik.com can also be used to prepare images. Some web platforms such as Flickr or Wordpress offer automatic image sizing and compression. Nevertheless an understanding of both image compression and image size is important.

Compression

Highest quality (100%).
File size: 15.3Kb image (large images MUCH larger file sizes)

Going for top quality whilst desirable in theory is not best for web use.

 

High quality (70%).
File size: 6.6Kb image

Very good results with almost no noticable difference in quality yet half the file size so double the speed!

 

Medium quality (40%).
File size: 3.4Kb image

Some 'artefacts' creeping in with edges no longer looking as sharp as before - acceptable for many images though.

 

Low quality (10%).
File size: 1.9Kb image

It may arrive on a users screen quickly but if they don't like what they see is it worth it? Distinct 'blockyness' as compression does its worst.

Size

Size of JPEG and most other images is measured in pixels. A single pixel is an individual 'dot' making up a picture on your screen. You need to get a sense of the typical width and height you should use for images on your site. The two pictures at the top of this page are 250 pixels wide by 255 pixels high. The smaller images above are 192w X 94h

 
Some useful sizes are:

100 pixel wide = small (thumbnail)
215 pixel wide = (typically 1/3 'page' width)
325 pixel wide = (typically half page width)
670w X 500h = (often a 'maximum' size before an image is considered 'outsize')

 

So what about GIF?

GIF images have their place as they are actually better for images with flat colours. One big advantage they have is that they can have a transparent colour so that the background will show through these areas. They can also contain more than one 'frame' and so display simple animations.

PNG is a more recent file format that can have transparency like GIF but full colour like JPEG. PNG images are becoming more common on the internet.

 

Useful online and desktop tools for image preparation

 

rsizr.com (offers 'intelligent' resizing where picture content is variably squeezed or expanded)

 

www.rw-designer.com/picture-resize (drop a jpeg file on a desktop icon to resize)

sourceforge.net/projects/phototoysclone/ (integrates with Windows Explorer)

www.faststone.org (Various great tools for viewing and manipulating images, some free)

 

xtralean.com/IWOverview.html (crop / size / annotate / batch save)

seashore.sourceforge.net/index.php (a free well-featured image editor)