|Home||About us||Commercial Photography||Print Gallery||Articles/reviews/blog|
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.
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 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.
If I want to use the web for displaying photographs, I am faced with several potential problems...
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?
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?
Few people have monitors capable of showing a 5000x4000 pixel image – how do I get round this?
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?
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?
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?
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
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
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.
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 18 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.
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.
In 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.
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 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?
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 :-)
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.
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.
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.
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.
Thank you to everyone who has ever purchased something via these links. If you follow a link and then buy absolutely anything it helps me run this site (the articles are all written by myself in my spare time)
- Keith (Other ways to help the site)
Amazon UK link / Amazon France / Amazon Germany
Amazon USA link / Amazon Canada link
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.
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.
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.
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 :-)
The views in this article represent those of Keith Cooper.
Keith is always happy to discuss matters raised in his articles. You can Email Us
Northlight Images prides itself on its independence when giving advice. We do not sell hardware or software and have no direct commercial links with any of the software or hardware vendors that may be mentioned here. See our Review Policy for more information.
You can search all the hundreds of articles on the site for more information
Have you found an article on the site useful or helpful? If so, please consider sharing a link to the article or mentioning it on a forum - Thanks to everyone who's helped the site become better known. Explore our site... Digital Black and White photography and printing - some of Keiths thoughts, techniques and tips for those interested in a digital approach to black and white. New site content appears on the News, articles and reviews page. We've lots of original Photography Articles and Photography Reviews on the site to help anyone interested in photography.Thanks to the visitors who've made Amazon purchases (any kinds of items whatosever)
via: Amazon UK/Amazon France/Amazon Germany/Amazon USA/Amazon Canada
It won't save extra money we're afraid, but it does help in the running of the site, and we really appreciate it...
Commercial Photography - Architectural Photography - Industrial - Print Gallery - Landscape Photographer