Back to Index

Resizing Graphics

Introduction

There are people who are fond of taking pictures with their digital cameras and posting their photos on the web. Some however do not realize that photos generated by digital cameras may have resolutions larger than that of a normal web browser. And so, surfers visiting their webpages are met with something like this...

Opera Browser

The image is so much larger than the browser that one can only see a part of the picture. Below is the image that was intended to be shown through the browser. Notice the top left corner of the image: that is what the browser was able to present.

Picture in the Opera Browser
It is a good thing that there are some browsers that provide the facility for automatically resizing the pictures it presents while at the same time offering the option to see the picture full size. But not all browsers have that facility.

Graphic Manipulation Software

When one purchases a Digital Camera, there is also an accompanying CD that contains utilities for allowing one to transfer photos from the camera to one's computer. Among the utilities provided is a graphic software that would allow one to edit the pictures one has created with the camera, to resize or resample them or even to rotate them this way or that. In addition to these graphic softwares, there are graphic manipulation softwares on the web that complement the facilities already provided by the accompanying CD of one's digicam. It would do one no harm to download one of these and use them for the simple task of preparing your photos for the web.

Among the graphic softwares I use for the purpose above is      Irfanview, perhaps the most popular made- for-Windows graphic file viewer on the web today. It is a standalone graphic viewer but with the additional plugins that its author provides, it can also function as a graphic manipulation software that can change the way a picture appears in many different ways. For the purposes of this tutorial, it would help if the reader also has a IrfanView installed. And did I already say it is free?

Browser Screen Resolutions

In the example given above, the web browser could only show a part of the whole picture because this latter had a resolution that was greater than the browser's. The photo above is 2272x1704 while the browser has a resolution of 1024x768. If it was an old browser -- with a resolution of 640x480 -- had been used to browse the image, could you imagine what would have appeared on its screen?

If one will post pictures on the web, one will have to consider browser resolutions. Old browsers have a size of 640x480 while the newer ones have a resolution of 1024x768 upwards. There are more browsers however that have a resolution of 800x600 (this observation is based on statistic reports in 2005). One will do well to take into consideration the fact that the pictures that digital cameras produce have greater resolutions because they are meant to be printed in a photo shop. These may appear very small in the digicam's preview window and when printed may be only as large as 8"x5" but looking at them through a browser's window can show one a different perspective on the matter.

Loading Time and BandWidth

Large pictures will load slower than smaller ones. Your digitally produced photos may load quickly in your computer when you view them through a browser. But the story is going to be different when the same picture is seen through another one's browser with a 56k modem connection. The 2272x1704 photo in our example is 994kb in size. That size can crash a browser on an ordinary modem connection.

Seen from the viewpoint of the server that hosts such a large picture, the 994kb size will mean not only space but also bandwidth. And bandwidth can be very costly.

Resize Your Pictures

The solution to the problem posed by large pictures is to resize them in proportion to the browser resolution used to view them. As a rule, even graphic hosting websites like Photobucket will not allow photos that are more than 800x600 in size. Graphic files of that size and lower can be accomodated by most browsers. I however would suggest a smaller size, not only for the sake of browsers but also for bandwidth, webspace and loading time considerations.

Using IrfanView

To resize your digital photo using IrfanView, just follow these steps:

  1. Open the photo to be resized (File --> Open --> Browse --> Select)
  2. Go to Image --> Resize/Resample

Below is an image of IrfanView's Resize/Resample Panel

Resize your pictures

There are two possibilities offered by IrfanView: either automated (right panel) or manual (left panel). If you choose to resize the picture manually, be sure to have "Preserve aspect ratio" ticked. That way, you only have to adjust either the height or the width of the picture and IrfanView will calculate the proper proportion for it. Do not change the value of "DPI" (Dots Per Inch) nor should you tick "Apply sharpen after resample" if you are not sure what these mean.

If you choose the automated process, just click on your preference from the options given. Again, do not do anything with the filters option if you are not sure what they mean.

After making your choice, click OK and "Save As..." so as not to overwrite the original file. Give it a name like "[original name]_sm.jpg" so as to distinguish it from the bigger photo. Always be sure that the extension name is JPG if you are saving a photo.

Conclusion

Digital photos may look small in the preview window of your digicam, but wait till you look at them through the browser. Pictures newly downloaded from a camera should be resized. IrfanView is a graphic viewing software that can help you in this regard. But whatever software you are going to use, be sure to consider browser resolution, loading time and bandwidth when you decide how big or small your digital photo should be on the web.

Back


©2006-2008 A Service of Keyboard Cramp