Photography: Preparing photos for the Internet

How to ruin a good photo!, 26 kb
How to ruin a good photo!
Move the mouse pointer over the photo for the good copy

This article covers how best to resize your scanned or digital photos down to a size suitable for using on the Internet. Hundreds of photographs in the UKClimbing galleries are ruined by uploading them at the wrong size (too big to view comfortably or too small to appreciate the details), or by saving them with the wrong JPEG settings.

 

Update May 2008: You can now upload full size images straight out of your camera, and UKClimbing will automatically resize them for you. If you prefer you can still resize the photos yourself, for maximum control over how the photos will appear on the site.

 

The methods described in this article can be used with pretty much every graphics and photo editing package available on all types of computer. You may use a free package that came with your digital camera or scanner, and there are many dozens of alternatives, some of which are available as free downloads. The Rolls Royce of photo editing packages is Adobe Photoshop, but at a cost of £600 it is definitely overkill for this sort of simple work! See the Links section at the end of this article for some useful downloads.

Here are 4 simple steps to follow for better photos in your UKC gallery:

1. Resizing your photos
2. Sharpening after resizing
3. Saving as a JPEG
4. Check before uploading to the Internet

The example I'm using in this article is a cropped section of a photo of Hey Jude, a climb in Sardinia.

1. Resizing your photos

Most photos, whether they are from a digital camera or scanned from film, will start off at a high resolution, suitable for printing. Even a basic 2 megapixel camera will take photos at around 1600 by 1200 pixels, which is too large for easy viewing on a computer screen.

So firstly, choose a size (measured in pixels wide by pixels tall) that will work well on most computer screens, without forcing people to scroll their browser window in order to see different parts of your photo. Most people use 15" - 19" screens, with a screen resolution of between 1024 and 1280 pixels wide. A "good" size for a photo on the Internet is around 1000 pixels wide if it is a 'landscape format' photo (i.e., wider than it is tall), or around 800 pixels tall if it is a 'portrait format' photo (i.e., taller than it is wide).

Next you need to use a program to resize your photo down to this size (this is also called 'resample' or 'rescale' in different programs). Don't confuse this with cropping your photo, which means chopping bits off of the photo - resizing will keep the whole photo, but just reduce the number of pixels to the size you want.

photo
Resized with anti-alias
photo
Resized without anti-alias
photo
Resized with Microsoft Photo Editor

 

Some resizing methods leave you with 'jaggies' or jagged lines. If you are getting these try using a different resizing method. There may be an option in the resizing tool called "anti-aliasing" which you should switch on. The worst packages for resizing photos seem to be Microsoft Paint, and Microsoft Photo Editor (included with Office 97) - you are better off using one of the free packages like Irfanview or The GIMP.

We've prepared a page that shows How to resize Photos in your Graphics Package, with screenshots & clear step-by-step instructions.

2. Sharpening after resizing

For some photos, you'll notice that they look a bit 'soft' and out of focus after resizing. These can be improved with use of a sharpen tool (called Unsharp Mask or USM in Adobe Photoshop).

photo
Slightly soft after resizing
photo
Sharpened version
photo
Over-sharpened version

As with any tool, it is easy to get carried away. A photo that has been obviously oversharpened can look much worse than a slightly soft photo. It is also worth realising that a sharper photo will save as a bigger JPEG file (because of all the edge detail) which might make it harder to create a small, high quality JPEG.

We mentioned basic sharpening here, but there are dozens of specialised techniques and expensive Photoshop-compatible plugins that can provide very realistic sharpening. e.g., focus the subject while keeping a background soft, not introducing sharpening 'halos', etc. There is a good article "Understanding Sharpening" on the Microsoft website, with Photoshop examples.

3. Saving as a JPEG

JPEG files (filenames with the suffix .JPG on some computers) are photographic images that have been compressed using a particular method that makes the files much smaller and hence much faster to download. Your graphics package will let you save your photo as a JPEG with various different quality settings - unfortunately these options are called lots of different things, depending on which graphics package you use! For example, the JPEG quality setting might be called the compression setting, and it might be a simple high/medium/low setting, or a number 1..10 or even 1..100.

photo
High quality JPEG (level 85)
photo
Low quality JPEG (level 50)
photo
Terrible quality JPEG (level 25)

The higher the quality of the saved JPEG, the less compression that is used, and the larger the file ends up being. You can experiment by saving a photo at different settings. As you reduce the quality, you'll begin to see unwanted 'compression artefacts' such as halos around detailed areas, blocky colour in skies or seas, and eventually bleeding of colours and loss of details.

UKClimbing limits photo uploads to be no more than 250kb, which makes for faster downloads and also saves money on the site bandwidth bill. So the 'trick' is to find a JPEG quality where your photo looks good, but is also under the file size limit. For some photos with a lot of detail in them, it might seem impossible to get them under 250kb, in which case you will need to start again from your original hi-resolution photo and this time choose a lower resolution, such as 800 by 600 pixels instead of 1000 x 750 pixels.

A good rule is use the highest JPEG quality you can, which means a file size of between 150kb and 250kb. You can read more about JPEG settings with screenshots from popular packages at about.com.

4. Check before uploading to the Internet

If you aren't confident about whether you've used the right JPEG quality, load the photo back and check it. When you save your photo, most packages don't show you how the quality is being effected, so the best way to check is to load the new JPEG into your web browser, so you can see exactly what it will look like on the Internet. If you are using Windows, you can view a local photo in your web browser by clicking the filename with the right mouse button, then choosing 'Open with -> Internet Explorer' from the menu.

If you don't like the settings, delete the photo, and save again at a different setting. Make sure that you use the original file to work from, not the poor quality one!

When you are happy with the file, you can upload it to your UKClimbing gallery by going to Upload your photos.

 


Nick Smith is an enthusiastic amateur photographer. He welcomes constructive criticism of his photo gallery.

Links to Photo Editing software:

  • How to resize Photos in your Graphics Package, with screenshots & clear step-by-step instructions.
  • Irfanview is a free Windows photo browser/organiser, which includes simple resizing and saving options. Small download.
  • Picasa 2 is a free Windows photo browser/organiser, which includes simple photo editing options.
  • The GIMP is a free graphics package, available for Windows, MacOS and Linux, with a complicated set of editing options.
  • Paint Shop Pro is a popular £90 photo editor, again with a free downloadable demo version, available for Windows only.
  • Photoshop Elements is one of the best low-cost photo editors, available for Windows and MacOS, priced £70.
  • Photoshop is the top-of-the-range £600 graphics package, used by many professionals on Windows and MacOS.

Please post corrections, additions, etc. to the thread about this article in the forums:




10 Feb, 2005
Paint Shop Pro is a good alternative to Photoshop. Not quite got all the bells and whistles, and not the industry standard, but much cheaper: www.jasc.com/en/products/
10 Feb, 2005
Nice succinct summary, not too sure if it will improve the actual standard of shots on the site though. When are you doing one about what makes a crap photo?? Chris :-)
10 Feb, 2005
grin. I don't feel qualified to talk about composition, but I hope that some other photographers on the site will stick their necks out and give some tips in the form of an article. We already have a couple of photography articles being developed, so please get in touch if you have an idea for one. I think the most popular topic of discussion on the forums is "which camera should I buy?" quickly following by "best camera at altitude" and "digital vs. film?" so those articles would be very welcome. Cheers
10 Feb, 2005
Thanks, I've now updated the article to include PSP.
10 Feb, 2005
Right! I nominate YOU to write the "why digital photography works for me" article ;) Now we just need someone to be volunteered for the film photography... are you out there Gordon?
More Comments
Loading Notifications...
Facebook Twitter Copy Email