This website stores cookies. Click here to accept them.cookie information page

"images" category

Images and the web

30th December 2011
Categories: basics, images

When adding an image to a web page, you'd be forgiven for thinking that you simply fire up your favourite content management system and upload the image, or add an image element to your HTML like so:

<img src="sunflowers.jpg">

Apart from design considerations, which we won't cover in this article, there are various practical considerations to be taken into account, including format, quality, and size.

Image format and quality

Web images come in a variety of formats for the web, but there are three popular ones: GIF, JPG (or JPEG), and PNG.

Both GIF and JPG are 'lossy', that is, from an original photo, saving as a gif or a jpg will lose some information.

GIFs take out image information by reducing the number of colours to 255.  So for example in a photograph with gradients (see below), the GIF version will cut out certain colours, losing the gradient effect (see inset).

png image of ship with inset to show gif gradient

GIFs are most useful for cartoons and other images with low colour resolution.  Here they come into their own, offering the best compression from original images, which means faster downloading on a web page.

JPGS offer a good compression ratio for photos and detailed images.  When saving a jpg using most software you are offered a quality option, 0-100%, which also determines how much the image is compressed.  JPG compression is lossy, but at 100% it is not noticeable.  At 50%, however, you get some odd 'jitter' effects such as shown below (jpg inset):

ship png with jpg inset

PNGs are not lossy, but may not always offer the best overall compression, although it is worth experimenting with a given photo.  Generally speaking, slightly low quality JPGs are best if you want photos on your website but want to reduce loading times.

Image size

It is best to size images to the exact pixels specification before inserting into a web page.  For example, if  you add a 100px wide image to your web page and then ask the web page to size, using the following code:

<img src="sunflower.jpg" width="250px">

Then the browser is downloading the whole image (which could be 1MB or more in disk size) before resizing when it gets shown.

In addition to increasing download size, if you don't resize images yourself, you're not in control of the resizing process.  Generally, photo resizing programs give you a couple of options: cubic and linear.  If you're resizing down, linear is often best, but again it's good to experiment with the specific image. Resizing up isn't generally a great idea, but we've found that cubic resizing, in small increments up to your chosen size, generally gives the best results.



© Alberon Ltd 2018

8 Standingford House
26 Cave Street

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).