Contact us: +44 116 291 9092
Title Image

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 Photography training:

curve side view at night

Better pictures on the web

It’s easier than ever to produce well lit photos that look great on your phone, but do you need to do anything special to use them on your web site?

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. Sometimes moving just a few feet will make all the difference to a shot.
  • 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 good image editing program (Photoshop Elements is good enough) Much camera supplied software is not for serious use – The same goes for many cheap photo editor packages.You might also want to have a look at more recent photo editing packages such as Luminar or Topaz Studio – Reviews have links for free trial versions. (We have a free introduction to digital photo adjustment course using PS Elements – old but still covering the basic points).
  • For web use, work in the sRGB colour space (see the Photos for the Web and Web Browser Colour Management articles for more)
  • Correct the image tonal balance and colour balance (the shadows and highlights tool in PhotoShop 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 1000 articles/reviews here...

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

No Comments

Post A Comment