Techniques

Processing and Saving Photos for the Web

by Juza | April 30, 2007

© JuzaPublishing photos on the web is the best way to share experiences and to learn with other photographers, and it is a great way to publicize your work. To create an effective web presentation, it is necessary to follow some basic steps top resize, sharpen and save the photo.

Image Size window

Resizing and two-step sharpening

The first thing to do is resize the full size file from 8/12/20 megapixel to “web size”. The full size photo is way too big and heavy to be published on the web; usually I resize it to 720 pixels on the longest side. This size is a good combination between quality and file size. To resize the photo, click Image > Image Size. Be sure to check the box “Constrain Proportions” and the box “Resample image”; set the combo box on “Bicubic” (this is the most advanced resizing algorithm).

Other than that, remember to convert the image to 8 bit and to sRGB color space if you have not done it yet (it is not possible to publish on the web a 16 bit photo and, while it is possible to publish a photo with Adobe RGB color space, it would appear very flat and desaturated).

The resizing and the sharpening are closely related, since resizing softens slightly the photo, and you need to apply sharpening to improve the detail. Instead of resizing directly the image to 720px, I use a two-step technique and the layer mask to get the best results. I begin by resizing the photo to 1200 pixels on the longest side and I apply one or more times a simple sharpening with Filter > Sharpen > Sharpen. The photo will appear quite oversharpened: don’t worry, this is just an intermediate step, the oversharpening won’t appear in the final image. If the photo has out of focus areas, I make a copy of the background layer on a second layer (Right-click on the layer Background and select Duplicate Layer from the pop-up menu) and I apply the sharpening on the copy.

Finally, I resize the image to the final size (720 pixels on the longest side) and I apply the much finer Smart Sharpen.

Smart Sharpen (and Layer Mask) for web-sized photos

The Smart Sharpen, introduced with Photoshop CS2, is one of the most powerful sharpening algorithms currently available. The SS uses an algorithm that is far more advanced than the one of the old Unsharp Mask; the practical difference is that the images processed with Smart Sharpen are crisper and they have less artifacts than the ones processed with Unsharp Mask. After resizing the photo to 720px, I select the SS from the menu Filter > Sharpen > Smart Sharpen.

Smart Sharpen window

I use the Basic interface: it is easy, fast and it has all the controls that I need. First, I set the “Remove” box on “Lens Blur” (the default value is “Gaussian Blur”; that works like the less advanced Unsharp Mask). Other than that, it is important to check the “More Accurate” box to get the best results.

To get good results, it is very important to set the Amount and Radius on the right values. Depending by the image, I used a Radius of 0.1 or 0.2 pixels, and an Amount between 30% and 120%.

These values look pretty low, but they work really well for the images that had been resized in two steps as described in the previous paragraphs. That said, many times it is necessary to apply the sharpening with the Layer Mask to avoid artifacts. In landscape photos, it is easy to get sharpening halos around the edges. To avoid the halos, after resizing the photo to 720 pixels, I make a copy of the layer and apply the Smart Sharpen on the copy, then, using the Layer Mask I apply the sharpening on the entire image, except the edges.

In fauna, flora and macro photos, there are often out of focus areas. If you apply sharpening on the entire image, it is easy to see some noise, in particular using sharpening techniques as this one. In these cases, I make a copy of the background layer as first step (after resizing to 1200px, but before applying the simple Sharpen filter). I use the Layer Mask to apply the sharpening technique only on the subject, without exacerbating the noise in the background.

Before and after image sharpening

Before and after: it is impressive to see how much you can improve the photo with a good sharpening technique.

In some photos taken at high ISO (400 or 800), I apply a bit of noise reduction on the background; even for web-size photos the resizing eliminates the majority of noise, and by using noise reduction it is possible to get silky smooth backgrounds at every ISO. Of course, it is necessary to use the Layer Mask to apply sharpening on the subject and to apply noise reduction on background.

This technique takes a little time, and it is necessary to have some experience to get good results (it is easy to oversharpen the photo). If you want to minimize your effort with Photoshop, resize the photo directly to 720px and apply Smart Sharpen with Radius 0.2 pixels and Amount 80% (the results are quite good, even though not as good as the results of more advanced techniques). Personally, I prefer to spend a little more time with PS, since I want to get the best possible results.

Applying the signature

It is not essential to apply a signature or copyright to your photos: all photos are copyright of the photographer, even without any copyright notice. That said, I like to apply a small copyright notice and the name of my website on the photos: it is pretty easy and it is a good “reminder” of the copyright.

Horizontal Type Tool window

The text should be easy to read (use a white font for dark background and black font for light backgrounds), but it should not distract from the photo; I recommend using small fonts and placing it in a corner.

In my opinion, it is nonsense to publish photos on the web with big watermarks or text right in front of the photo – it is almost impossible to appreciate the image. If you are so worried that someone might steal your photos, don’t publish them at all. Personally, I have earned more in thanks for the good web presentation than what I’ve lost due to unauthorized use of my images.

Saving for web: the JPEG format

The last step to publish the photo on the web is to save it as JPEG. JPEG is surely the most popular image format for the web: it allows effective image compression and it is widely compatible; all the image editing programs, the browsers and many other programs can show JPG images.

Saving for web from Photoshop

The JPEG (Joint Photographic Experts Group) is an image compression algorithm used by many file formats; nowadays the most popular JPEG format is JPG (.jpg). The human eye is not able to perceive with precision minor color changes, so JPEG compression analyzes the image and it sacrifices some color information to reduce the file size (a JPG image can be 10-20 times smaller than its uncompressed equivalent, while maintaining a good quality).

The degree of JPEG compression can be set by the user; if you use a strong compression you have a very small file size but poor image quality, and vice versa. Remember that it is a lossy compression algorithm; in other words, when you save the file you throw away some information to achieve a smaller file size.

You must avoid saving two or more times on a JPEG image, because every time that you save as JPEG the compression artifacts accumulate. If you plan to edit again an image before preparing it for web, save it as TIFF.

To save the image for web, select File > Save For Web. Saving an image as JPG requires a little experience; many photographers use a wrong compression value, resulting in unnecessarily heavy files or overly compressed images that show very evident artifacts. In the “Save For Web” window, be sure to select JPEG as the file format (the default format is GIF), and set the Quality on a value between 60 and 80; usually, these values give the best results. In the preview window, you can see the effect of JPEG compression and the size of the image. The size depends on the detail of the image (very detailed photos have a larger file size than photos with out of focus areas) and by the compression value. I recommend choosing a compression that gives a file size near 100-120kb. In any case, the file must be no bigger than 200kb; otherwise the photo takes a lot of time to load (remember that not everyone has a fast internet connection!).

Editor’s note: We strongly recommend placing your copyright and URL information on any image transmitted electronically, whether for display on the web or sent via email. If a photo then appears elsewhere on the internet without your permission, the ownership is clear and you can more easily pursue your rights under the Digital Millennium Copyright Act. At the very least, the name and URL appearing on your photo will provide you with additional exposure.

About the Author

Juza lives in Italy. Ever since his childhood he has been fascinated by nature. In 1999 he began photographing nature subjects with a Nikon N60 film camera. Since 2005, he photographs exclusively with Canon digital SLR cameras, and is now a full time professional photographer. His goals - as nature lover and photographer - are to create photos that are both artistically pleasing and valid natural history images. To see more of Juza’s work, please go to www.juzaphoto.com.

Comments are closed.