Image processing
for Web Use

home  I  galleries  I  trip reports  I  checklists  I  beginners  I  sites  I  articles  I  guestbook  I   misc


Resizing tips for presenting images on the Web
Using Adobe
® Photoshop®
by Sumit Sen



© Sumit Sen

Resizing in Adobe Photoshop®
Cropping in Adobe Photoshop®
Adding text in Adobe Photoshop®
Tips on submitting images for identification

Many first-time bird photographers face issues sharing their images with others in forums, websites or even with friends and relatives. The main problem is an issue of size. Digital cameras these days are competing with each other in a megapixel war - adding more and more (often useless) pixels to impress an unsuspecting market. This has the side effect of creating very large files regularly crossing 5MB in jpeg format. Many users have no idea about processing/resizing and share the images as shot, aided by ever improving broadband services often paid for by others. Not only is this a great wastage - it can also be a source of embarrassment for both the sender and the receiver.

Most widely used monitors can display a full screen image if the dimensions of the image are 1024x768 pixels. This translates to 14.2 x 10.7 inches at 72 pixels/inch (dpi). As computer screens does not resolve images better than at 72 dpi, it is not necessary to size images at a higher dpi when the viewing is done only on computer screens. Prints require higher dpi's.

Any image resized to 1024x768 pixels is already about 1/4th the size of a native image shot in a 10 megapixel camera. So resizing to the largest size that one can view the image in, without scrolling, reduces file size by 1/4th to say 1.25Mb. But even this is too large for sharing and most public forums insist that images have to be lower than 200Kb. How does one reduce a 4-6Mb file to meet this target? Here is how it is done by those who use Adobe's Photoshop® software:

Resizing in Adobe Photoshop®

Open the image in Adobe Photoshop (PS) as a jpeg image, edit as per your taste including colour, exposure correction etc to arrive at a final full-sized image (Fig 1). [ If you want to crop the image then go directly to the Crop section ]

© Sumit Sen
Fig 1: Full size image viewed in Adobe PS3

Step 1: To resize image select Image > Image size and enter (Fig2).

© Sumit Sen
Fig 2: Choose Image Size

Step 2: Fix resolution at '72' in the 'Image Size' box (Fig3)

© Sumit Sen
Fig 3: Select resolution for web viewing

Step 3: To create an image of 864 pixels (12 inches) wide at 72 dpi, fix width at 12 and make sure that both 'Constrain Proportions' and 'Resample Size' boxes are selected. Press OK (Fig4). To fix the height, change 'Height' only and 'Width' will be chosen automatically. Usually images loose sharpness on compression. Sharpen selectively after the image has been resized.

© Sumit Sen
Fig 4: Select Width (or height) keeping Resolution at 72

Step 4: Select 'File' and 'Save for Web' from the drop-down box. Press Enter (Fig5).

© Sumit Sen
Fig 5: Choose 'Save for Web...'

Step 5: Select the 'Optimized' tab on top. This fixes a 'Quality' at 60. Check the resultant file size at the bottom left and change quality to meet your target file size. 70 to 75 quality will give best results for normal images and anything higher will be a waste. Below 60 quality, the image will start loosing details and become flat. Choose a quality that gives you a file size less than 200Kb for efficient web use (Fig6).

© Sumit Sen
Fig 6: Use 'Optimized' compression & select desired quality

Step 6: 'Save' and give a file name in the save window that pops up. Note that images shot and processed in Adobe RGB will, on saving, tend to get a little darker and gain yellow and red because 'Save for Web' converts images to the sRGB colour space.

That's it! You have now managed to reduce a 2,300Kb file to 29Kb for presentation!

Cropping in Adobe Photoshop®

Cropping is an essential tool in any thoughtful and eye-catching image presentation. Almost all bird images benefit from some amount of cropping by removing unwanted elements, helping to focus on the subject of the presentation, allowing images shot horizontally to be presented vertically, or simply by resizing the image.

Crop 1: For a horizontal presentation, a) choose the rectangular 'Marquee tool' from the 'Tools' (Window > Tools). b) On the tool bar preferably choose 'Fixed Ratio' and fix a 'Width' and 'Height' ratio according to the image needs. Popular ratios are 6x4 and 7x5. c) Drag cursor over area you want to present (Fig7).

© Sumit Sen
Fig 7: Choose a fixed ratio and select presentation area

Crop 2: Select 'Image' > 'Crop' and enter. This will only keep the cropped area (Fig8).

© Sumit Sen
Fig 8: Crop only the desired area

Crop 3: Resize the image as in Step 3 above (Fig9).

© Sumit Sen
Fig 9: Resize for presentation.

Adding text Adobe Photoshop®

Adding Text: Text, be it image details or copyright information is often added to images. The steps involved are:

Text 1: a) Choose 'Type Tool' from the 'Tool' drop-down; b) Choose font, font size & colour; c) Place cursor where you want the text to be inserted; d) Type necessary text (Fig 10).

© Sumit Sen
Fig 10: Inserting text with 'Type' tool

Text 2: Choose 'Layer' and 'Merge' or 'Flatten Image' after the typing is over and enter. This will complete the text insertion process (Fig11).

© Sumit Sen
Fig 11: Flatten layers to preserve typed material

Text 3: Follow steps 5 & 6 above to complete image for presentation.

Tips on submitting images for identification

Submitting images for the purposes of seeking identification is a regular image processing activity of bird photographers. However, most images are submitted incorrectly hampering the process of identification. Usual mistakes include:

1. Abnormally large files containing irrelevant information like open sky, water, vegetation etc.
2. Dressed up images including adornments like borders and using image enhancement tools like saturation and contrast.
3. Lack of descriptive information on the image itself.

That often makes some of us believe that the presentation of the image is the main intention and the identification is only incidental. Such requests often draw no response and who can blame those who spend time and money trying to help others.

Here is how I would go about seeking identification help for the duck (behind the Gadwall) from the image I shot in Fig 1, above:

© Sumit Sen
Fig 12: Identification presentation

a) I have kept the Gadwall in the frame to offer a size reference
b) I have eliminated all the other birds and open space
c) I have inserted the shoot details in the image itself.

I now have a file which takes up only 12kb (original (2,300Kb), is focused, contains location and date details, and can be easily mailed and received by the people who will help me with the identification. With a file this light I can even add a couple of more images (if I have them) on the same mail/post without feeling embarrassed about the inconvenience that I could cause to the potential identifier.

All the tools to achieve the image in Fig 12 have been explained in this presentation. Please think of using them the next time you you want someone to help you with any identification using an image as the source.

Note: All images processed with Adobe® Photoshop® CS3 of Adobe Systems Inc.


Sumit K Sen 2001 - 2010    I   
All rights reserved    I    Last updated 21 Apr 2011    I    Contact Us