Contact us: +44 116 291 9092

Better pictures for your web site

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

I want better pictures on our web site…

Making web site images look their best

Simple things that make your photos look better.

We often get asked why some photos we supply to clients look particularly good on the web.

There are lots of simple steps you gan take to get the best image quality from digital cameras, for web use.

This short article has some of Keith’s thoughts on where to start.

… of course we would also say that getting professional photography can make a huge difference, but do discuss what you really need first. We’re quite happy to help people do some work themselves.

Better looking photographs

We have also linked to lots of related (free) resources on this site.

Northlight Images offer specialised training in the UK covering such areas as Product Photography and Photography for Estate Agents.

curve side view at night

Pictures on the web

It sounds a simple question, but the comprehensive answer easily fills a days training — and yes, Keith does offer photography training ;-)

You should consider the whole process from start to finish. The ten steps below are not an exhaustive guide but will help if you take them into account (and you do not need to do them all). There are more links to further information on this site

If you are going for top quality then…

  • Lighting and location – capture the best view to start with, this may mean moving, waiting for the weather to change or coming back at a different time.
  • Shoot at as high quality as your camera can manage – resize the pictures for the web afterwards.
  • Take lots of pictures and pick the best – If I get one picture good enough to put in the landscape gallery of this site from 40, I’m happy.
  • Work in a colour managed environment on your computer (at -very- least make sure your monitor is set up correctly)
  • Use a decent image editing program (PS elements is good enough) Most camera supplied software is not for serious use – same goes for most cheap photo editor packages. (We have a free introduction to digital photo adjustment course using PS Elements)
  • For web use, work in the sRGB colour space (see the Photos for the Web and Web Browser Colour Management articles)
  • Correct the image tonal balance and colour balance (the shadows and highlights tool in PhotoShop CS is excellent for tonal balance)
  • Sharpen images with Unsharp masking (USM) after resizing to the final web size (see the Photos for the Web article)
  • Save your files with embedded profiles (see the Photos for the Web article)
  • Don’t compress jpegs too much (see the Photos for the Web article)

There are lots of other details I could add, but they all really fit into the categories above.

What’s the real key to giving pictures on the web a bit more ‘oompf’? — sharpening — by just the right amount that it doesn’t detract from the image. For example, I often use Focus Magic with a ‘remove focus blur’ setting of 1 to sharpen images before putting them on the web, rather than fiddle around with USM settings. You use it on the image at the size it is going to be on the web, i.e. for an image and thumbnail you sharpen each at their final sizes.

One adjustment you might like to try on your original size images (i.e. from the camera) is to run Unsharp Mask at around 5-15% intensity, with a radius of 70-200 (threshold = 0) This does not sharpen in the way you might ordinarily do with USM, it provides a subtle contrast enhancement and for some images it is very effective, particularly where you have a big dynamic range in the picture.

Oh, and don’t forget to check out what the picture looks like on other peoples’ computers…

unsharpened picture of building picture of building after sharpening
Image not sharpened and just reduced in size for web Lighter shadows and some sharpening give the image more punch.

However, consider whether the picture might have looked better from a different angle, or later/earlier in the day when the lighting would be different. That shadow of a lamp post would not be in the same place…

Never miss a new article or review - Sign up for our Newsletter (2-4 a month max.)

Enjoyed this article?

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

All the latest articles/reviews 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]