This site, and all its
contents are copyright
©2003-2008 Keith Cooper
Saving images for the web
Keith is often asked about how to go about presenting photos on the web. This article covers some of the issues – and some potential solutions when using photographs for web use.
|
Why can't I just put pictures on the web? The What's New Page gives a quick overview of the hundreds of pages of articles and picture on this site. |
This page is part of the Articles section of our Info and Resources feature
A montage of images used in part of the commercial section of this site - all have been specially prepared for web use
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. Mac OS X users can also get basic web gallery functionality from Apple's iPhoto application.
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. There are also numerous links to other parts of the 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?
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 5000x4000 pixel image – how do I get round this?
Image quality
How good does your picture look? There is no way that I can fit the detail of a 5000x4000 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?
Some 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) There is more details of this in the Digital Imaging section of the main Photo Links page
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 450x336 pixels from an original 3072x2293.
It 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. I guess it comes from being a long time Mac user, and having used 21 inch monitors for the last 10 years. 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
In going from the original huge file, we are making a number of decisions that will tend to reduce image quality. For example, 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. When you save a JPEG file you can usually adjust the quality setting which will vary the file size. The image above was saved at the 'best' setting. Too much compression (a low 'quality' number) looks bad!
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 very useful 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?
|
A much reduced image with no 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 in the reviews section of this site.
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 (examples #1 here and #2 here). 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 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.
|
Adobe98 colour space + tag |
sRGB colour space + tag |
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 seems 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.
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.
This picture shows what happens when you take an Adobe98 file and simply assign it an sRGB profile.
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.
- Note - If you have ever wondered why Apple still uses a gamma of 1.8, this was posted on an Apple list by someone at Apple (2004)
- 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.
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.
More Info
- Photos for the web - some quick tips on getting better photos on your web site
- Sharpening in Photoshop - Bruce Fraser looks at various sharpening features in Photoshop
- http://users.wfu.edu/bennettk/sharp.html - some general sharpening info
- http://www.earthboundlight.com/phototips/smart-sharpen-cs2-and-more.html
- http://www.earthboundlight.com/phototips/high-pass-sharpening-photoshop.html
- Keith's reviews of hardware and software
- Articles and tutorials on this site
- Colour management
- Keith's Landscape photos
- Collection of photography and digital imaging info
We have a version of Google's Search engine, optimised for photography related items that may be of use in finding more information...
Keith is always happy to discuss matters raised in his articles. You can contact Keith at the address below.
The views above represent those of Keith Cooper. Articles copyright ©2003-8 Keith Cooper.
Other areas of our site that may be of interest...
NEW -- Create your own customised A3 size wall calendar from a choice of 90 of Keith's images. Choose your own images for your own custom printed calendar - 12 months starting any month of the year - many all new images not yet in our main gallery.
Digital Black and White. Keith was recently interviewed about digital black and white photography for a magazine article. We have an expanded version here covering some of his thoughts, techniques and tips for those thinking of trying black and white.
As well as our Commercial Photography services and Training there is a growing collection of photography Articles and Reviews on the site aimed at helping you get the best out of your own photography. We also have a growing collection of Photography related information and links that we hope you find useful.
New site features and some of Keith Cooper's latest work are always covered in the What's New page.
Visiting Leicester or wondering where it is? We have views from the Leicester traffic cameras.