Contact us: +44 116 291 9092
 

Saving images for web use

  |   Article, Articles and reviews, Colour management, Image Editing, Photography Business, Usability   |   No comment

Saving images for the web

Simple ways of improving the quality of your photos on the web


Keith is often asked about how to go about presenting photos on the web.

This is one of our older articles, but still valid.

This article covers some of the issues – and some potential solutions when using photographs for web use.

Old john - sharpened image

Why can’t I just put my photos on the web?

The simple answer is that you can!

There are packages that will bundle up your pictures and even produce HTML code for making a web photo gallery.

This article is aimed at those who want that bit of extra quality in their images.

If you’re looking to create a gallery I’d recommend having a look at the Jalbum site, which not only has great free software(Mac and PC), but some useful tutorials as well.

Photoshop was my main application for creating the majority of the images for this site. Photoshop Elements also allows you to automate the process and create a quick site

By considering just a few extra factors when preparing your photos, you can ensure that as many people as possible can appreciate your work at its best.

I’ve included some sample images in this article which I hope shows the difference you can get.

640x150 test web image

A montage of images once used in part of the commercial section of this site – all have been specially prepared for web use

There are also numerous links to other parts of this site and external sources of information where some of the technical issues are covered in more detail.

At the end there is also a section on how your browser manages colour with a set of test images to check.

Some Issues

If I want to use the web for displaying photographs, I am faced with several potential problems…

File Size

My pictures tend to be rather large, so the files for the pictures on this site are all a fair size. For example, the Stonehenge Winter Solstice Sunset is around 70MB. How do I reduce this big file and by how much? How does this affect how it looks on the web?

Midwinter sunset

File format

Most of my images are kept in Photoshop format, with original scanned film images as TIFFs and digital camera images in the camera’s Raw Image Format. – what’s the best format for the web?

Dimensions

Few people have monitors capable of showing a 5000×4000 pixel image – how do I get round this?

2015: Even with higher resolution screens and faster internet connections, you would want a pretty good reason to include such a huge image.

Image quality

How good does your picture look? There is no way that I can fit the detail of a 5000×4000 photograph in a small thumbnail image – what trade-offs are there?

Colour matching

I use a colour-managed system for working on my Mac (yes, even for black and white), my monitor and printers are calibrated and profiled for accuracy.

There are no really bright colours on my desk or near the monitor and I’m careful with room lighting. OK, that’s fine for me since much of my work depends on this accuracy, but what about the person looking at my site on their PC at home?

Copyright

The images on this site are only part of my photographic work (dull boring presentations do not easily make for an interesting site). If I put my work on the web, what is to stop people taking it and using it?

Old John, Bradgate park, LeicesterSome Solutions

I’ll illustrate some of the ways I address these issues with this image of Old John (it is the same one as in the Converting Colour to Black and White section)

Old John, Bradgate park, Leicester

The original photo was taken with an Olympus E20 digital SLR camera

File Format

The picture of Old John has been saved in the JPEG format, which is supported by all current web browsers that display images.

For photographic images JPEG is usually the best but you could try GIF for small thumbnail photos. JPEG is a very widely used standard.

The newer PNG and JPEG 2000 (j2k) formats provide numerous advanced options such as lossless compression and image meta data (additional info that can be included with your images)

For graphic images there are a number of alternatives, some examples we have found include: a page with a discussion about some file options and more info on the use of colour on the web.

File Size

The full resolution 48 bit TIFF file for this image is about 40 Megabytes. The reduced JPEG version is around 130 Kilobytes. This is still quite large, and would take quite some time to download for someone with a dial-up connection. It is wise to warn people if you are going to use large images — they might just go elsewhere rather than wait.

Dimensions

The image has been resized to 450×336 pixels from an original 3072×2293.

image sampleIt looks a little fuzzy, but the native (what the camera tags it with) resolution of this image is 240 ppi, whereas this is at screen resolution (typically 75-95 ppi) so consider looking at it from about 2 metres away to get a better impression of its ‘real’ sharpness.

There is also a bit of colour fringing caused by ‘Chromatic Aberration’ in the camera lens. Some techniques for getting rid of this (to some extent) are discussed in the article ‘Why Raw‘, about using raw format files from your cameras

Your choice of image size depends on its intended use. If this was the only image on a page then a large size might be appropriate.

Don’t forget that not everyone views their web pages the same way that you do. I find it uncomfortable using a machine where all the windows automatically open up to fill the screen.

2015: When I first wrote this article, no-one looked at photos on phones…

I guess it comes from being a long time Mac user, and having used 21 inch monitors since 1990. I’m not saying that my way is in any way better, it’s just something worth remembering when putting pages together for other people.

A small portion of the original image displayed at full resolution.

Colour matching

The original image file uses the Adobe98 colour space to preserve as wide a range of colours as possible. However very few browsers (see later) correctly interpret image colour space tags (a bit of the JPEG file format which can record this info)

A fairly safe bet is to use the sRGB colour space, which also matches up quite well to typical PC monitors. Many cameras produce JPEG files using this colour space anyway. In any case it is always worth checking your pages on someone else’s machine. I usually get some of my PC owning friends to give things a quick check.

Image quality

bad web photo gallery imageIn going from the original huge file, we are making a number of decisions that will tend to reduce image quality.

The JPEG format was developed for compressing photographic images with a minimum of visible degradation (some information is thrown away during the compression process- this is why JPEG is known as a lossy compression technique).

When you convert an image to JPEG you are losing information for good – it’s one of the reasons I rarely work using JPEG images and use my digital camera at its highest quality (raw format).

There is the newer JPEG2000 format which includes a facility for lossless compression, but it is not yet very widely used (2015: and never was).

When you save a JPEG file you can usually adjust the quality setting which will vary the file size.

The image further up the page was saved at the ‘best’ setting. Too much compression (a low ‘quality’ number) looks bad! – the one just above was saved in Photoshop as a JPEG at image quality 0 – not very good.

Another less obvious result of reducing image size is a loss of sharpness in the image.

One of the final steps I apply to most images is some sharpening. The amount and level varies with the type of image and its size. Once again this is a destructive process (some information is lost) so I tend not to work on images in their sharpened form.

With many image manipulation programs you can apply the curiously named ‘Unsharp Mask’ filter to sharpen your images. (Some useful Photoshop info on sharpening)

The overall amount of sharpening is very dependant on what you are going to do with an image. For example, with the same image I’d sharpen an A4 sized print differently to an A3 sized one. Web images need sharpening to look their best and the more you shrink them the more you need to do.

Look at the two thumbnails, which one grabs your attention better?

needs sharpening

A much reduced image with no sharpening

after sharpening

The same image but with vigorous Unsharp Masking applied (in Photoshop)

The judicious application of sharpening can make all the difference (it is virtually essential for printing), but equally if overdone it can easily ruin things.

One application I’d suggest looking at is Nik Sharpener Pro (demo available). It analyses your image and applies selective sharpening appropriate for whatever use you want to make of the image (print/web). There is a lengthy review of Nik Sharpener Pro 2.0 on this site.

benefits of sharpening

A bit of sharpening for web use — image is of Keith in Colorado with a rather large car :-)

Copyright

As someone who depends for much of their livelihood on the visual image, I’m acutely aware that there is a trade off between putting your work into public view and keeping control of its use.

Fortunately, as the originator of the work you have the full weight of copyright law behind you. You can take precautions to stop people saving images from your site but remember that if an image is dislayed, then someone can copy it.

My own preference is to limit the size of displayed images and make sure that my assertion of copyright is stated clearly.

Note that you do not need to put a © symbol on your photos – the copyright is automatic. If I find unauthorised commercial use of any of my work I tend to be less than sympathetic!

If you find that someone is linking directly to one of your images from their site, it can be amusing to rename the image (and all links to it on your own site) whilst leaving a new image (with the old name) containing a message of some sort that will be displayed to visitors of the offending site.

There are many more links to copyright and Intellectual Property info in our Copyright section.

Web Colour Management in browsers

Or, more accurately this should be the lack of it!

Look at the following three images. If your browser correctly manages colour they should look the same.

web colour management 1

Adobe98 colour space + tag

web colour management 2

sRGB colour space + tag

web colour management 3

AppleRGB colour space + tag

Don’t be too put out if it doesn’t work. Internet Explorer 5.1 on the Mac is one of the few browsers to do it correctly. Omniweb also gets a medal here -in both browsers there is an option in the preferences to turn colour management on.
Apple initially got it wrong with their browser ‘Safari’ but OSX 10.3 with V1.1.1 of the browser seemed to get it right. They even removed their own test page from their site that showed up the deficiencies!

We have a web colour management test page that shows larger images saved in a number of different colour spaces both with and without icc profiles.

June 2008: PC users now have the availability of Safari (from Apple) or Firefox 3, both of which support colour management.

Unfortunately Firefox 3 currently needs colour management enabling – see this article for instructions.

Assigning or Converting profiles?

Remember, that if you have an image that uses a particular space (say Adobe98) you need to -convert- it to sRGB and not just assign the sRGB profile. Simply assigning a new profile will produce the wrong results and usually results in changes of saturation and hue.

web colour management 4

This picture shows what happens when you take an Adobe98 file and simply assign it an sRGB profile.

web colour management 5

This picture was converted to sRGB.

The aspirations of the W3C for web colour standards are set out (1996) in this document, which is still quite appropriate.

So, what will my images look like to other people?

Difficult to say :-)

Much of what I’ve said assumes that you have some reasonable idea of how your visitors monitors are set up and can match it.

For example, Macs have traditionally been set up with a display gamma of 1.8, leading to a whole different look when browsing sites – like many Mac users I now have my monitors set at 2.2 – and things are a bit better.

2015: a gamma of 2.2 has now been standard for many years.

Why was it originally 1.8 on Macs? The short story is:

1) A gamma of 1.8 roughly equals the transfer function of printed pages.
2) Many, if not most, images are ultimately printed on some output device.
3) A gamma of 1.8 roughly equals the inverse of the human visual response in average lighting.
4) Most users view their displays in very bright environments.

Here is one very useful FAQ list about Gamma I found.

If you want relatively consistent colour you will need to test with lots of browsers and different machines, but remember that what your viewer will see is ultimately set by the actual viewing setup they are using and that is rather difficult to control.

If all that still confuses you, then you are in good company … I hope things are a bit clearer though :-)

More Info

Other areas of our site that may be of interest...

All the latest articles and photo news items appear on Keith's Photo blog 

We've a whole section of the site devoted to  Digital Black and White photography and printing. It covers all of Keith's specialist articles and reviews.

Categories include Colour management and Keith's camera hacks - there are over 800 articles/reviews here...

Articles below by Keith (Google's picks for matching this page)


If you start your buying of anything whatsoever from Amazon (not just what's listed) via one of our links below, it helps myself and Karen to keep the site going. We really do appreciate this - thanks 

[link for Amazon UK | Amazon US]