Image processing for websites
| Category: Website Design and Development | Date: 2003-10-30 |
In this article Ill be discussing the processing of images, both graphics and photographs, for websites. Ill cover scanning, file compression and image optimization.
Image formatting
---------------------
In a computer, pictures are stored in a format called a bitmap", meaning an image split into a large number of small dots, each of which can have different colors and shades of gray. Magnified the individual dots can be seen. (I cant illustrate this in a text article, but if you visit http://www.webskel.co.uk/iproc.htm youll see what I mean.) Sometimes, if a picture is gradually magnified, the dots can be resolved, and then the picture is described as "pixellated", because the little dots making up the image are often called "pixels" (picture elements).
Types of picture
--------------------
There are two types of pictures that are used in websites: graphics art stored with a computer file name ending .gif, or photographs stored with a computer file name ending .jpg (or sometimes .jpeg). Why have two types of files? The answer lies in how the files are prepared. A mathematical algorithm (like an equation) is used to compress them to remove information which isnt needed by the human eye, which makes the files much smaller, and hence faster to load on a website. The GIF algorithm was designed for graphic art and JPG was designed for photographs. Graphic art typically has fewer colors, larger areas of solid color and hard edges. A photograph has a large range of colors and soft and ill defined edges (the "real" world as against the cartoon world perhaps might be a good definition).
Resolution and loading time
----------------------------------
Ive mentioned compression. Photographs, even when compressed, contain a lot of data, and care must be taken to optimize the file sizes to retain adequate picture quality (the resolution), yet keep the loading times short. There is nothing worse than a website that keeps a viewer waiting whilst pictures load.
Display resolution
----------------------
On a computer display the images, whether text or pictures, are made up from millions of small dots. Not all displays can show the same number of dots, and the most common are:
VGA (Video Graphics Array): 640 horizontal dots X 480 vertical.
SVGA (Super Video graphics Array): 800 X 600 dots
XGA (Extended Graphics Array): 1024 X 768 dots
Surveys show that nearly 90% of computers have SVGA or larger displays. Since pictures occupy a fixed number of dots, if your picture has more dots than the display the browser will introduce a horizontal scroll bar. Most designers recommend a web page be 800 pixels wide, which optimizes for the majority of displays. Dont worry, by the way, that users at VGA will lose information: what happens is that they will get a horizontal scroll bar to see all your web page. In practice all you have to do is to remember that your web page width is 760 pixels. Why 760 and not 800? Just because your browser will most likely add a vertical scroll bar down the right hand side of your web page, and this will take up the remaining 40 pixels.
How to size pictures
-------------------------
Pictures are placed on a web page at a fixed size in pixels. Now, if you keep the aspect ratio (the ratio of horizontal to vertical size) constant, all you have to think about is the width. So, what size do you want your picture to be? If you want it to occupy the whole width, then make it 760 pixels wide. If you want it to be half the screen width then make it 380 pixels wide and if youd like just a thumbnail make it 60 or 100 pixels wide. There is one exception to this rule. If you place navigation bars down the side of your page, then these will obviously take some more of the picture width. So in this case reduce the 760 pixel value by the width of your bars (but keep thumbnails at 60 or 100).
Scanning.
-----------
If your source is a print rather than a digital photograph, youll need a scanner. Make sure the picture is square on the scanner (de-skewing later is always a compromise). Try to select a scan mode with automatic picture quality adjustment. Now scan in at an appropriate resolution (i.e. dots per inch, or dpi) and save in BMP (bitmap) format (to preserve an uncompressed lossless source).
Choice of dpi (resolution)
--------------------------------
I often see 75 (or 72) dpi recommended for scanning pictures for web display, on the principle that this is the limit for computer monitors. I have to disagree. In the early days of PCs this may have been true. But its not true today, and if you want your web pictures to stand out you must optimize more cleverly than this. Its easy to work out that display resolutions have improved. Take a 17" diagonal XGA monitor. Here the image width is 12" with 1024 pixels - a simple division gives 85 dpi, and some displays are better even than this. Now its true that a poor display will degrade the image, but on a decent quality display youll soon see the difference. And dont forget the near perfect resolution from the increasingly common flat panel displays. By experiment Ive found that if you want the final web picture to be half the web page width (i.e. 380 pixels) or greater, then between 100 and 150dpi usually gives the best results. However, at less than half the page width (i.e. less than 380 pixels) 75dpi is fine. You want to scan in at the lowest resolution that gives an acceptable result, because this produces the smallest file size, the fastest loading and therefore the minimum wait for the viewer.
We are talking of images in this article, and "seeing is believing". Let me advise never to accept any advice on image processing (including mine!) without seeing, and trying, for yourself. Since words alone cant show what I mean, Ive put some demonstration images on one of my websites. First lets look at the effect of scan resolution. Ive chosen a simple black and white (i.e. two color) lithographic engraving, and scanned in at 75, 100, 150 and 300 dpi in GIF (I chose GIF because it is lossless compression) format on a Canon N670U. Visit http://www.webdes.20fr.com/photo4.html to see the images. The fine detail of the engraving should show you the effects very clearly. All the images are 268 pixels wide because this was the width of the 75 dpi scan, and all the others have been scaled to this value. On an XGA LCD flat panel monitor you will see increasing detail in all these images. On lower quality monitors, the detail will become progressively less obvious.
Image processing software
--------------------------------
Once you have a photograph in digital form, then some image processing will almost certainly be necessary. You may already have a suitable application, but if not there are some free programs that can be downloaded from the Internet, both for Windows and the Apple Mac. Let me give a warning: image manipulation of any sort almost always results in some image distortion, and each program will have a different algorithm. Usually algorithms have been well honed and give good results, but occasionally one comes across a poor one, so if you feel that your pictures are not as good as you might expect, then try another piece of software. Some photo manipulation packages include an auto-enhance feature and its always a good idea to try this on a photograph that appears less than ideal (dark shadows, for example).
Scale the pictures
----------------------
Remembering that your web page is assumed to be 760 pixels wide (less if you have horizontal navigation bars), calculate what pixel width you want for your image. As an example lets say that you want your picture to be 200 pixels wide. A menu command to scale will be called "Resize" or "Resample" or similar. Change the width to 200 (keep the "Preserve aspect ratio" box checked). The file should always be scaled in a photo manipulation program rather than in the web builder or HTML application, as this is the only way to reduce the file size. Loading a large picture file and scaling in the web builder is the most common mistake leading to long page loading times. I should also say that common sense dictates that resizing should always be to make the image smaller: scaling upwards will always increase imperfections and add extra distortion.
Sharpening
-------------
Because the scan resolution may be relatively low, and therefore the picture not as sharp as at a higher resolution, Ive found it sometimes an advantage to improve photographs (JPG) using the "sharpen" feature found in photo manipulation packages. Be sparing when sharpening, however, as this kind of image processing also introduces distortions. Ive found by experiment that thumbnails (60 or 100 pixels wide at 75 dpi) are always improved by sharpening. Larger images at 75 dpi may be improved (test it to see), whilst images at 100 or more dpi probably wont be improved. Never sharpen GIF images.
Compression
---------------
Select "File-SaveAs", and choose JPG (for photographs) or GIF (for graphic art) in the File-type drop down box. If its JPG, look at the compression "Options" and drag the slider to 50. The reason for setting the slider to 50 is that the JPG algorithm allows a higher level of compression (and hence shorter loading time) to be traded for a reduced quality. Ive picked 50 as a good compromise - but it is a compromise, so change the ratio if you wish. A higher number means a smaller compression.
Its all a compromise
-------------------------
The one thing to remember here, is that all this manipulation of your picture is a compromise between image quality, file size and loading time. Like all compromises, there is no such thing as "best". Ive given you the results of my experiments and experience, and I think that youll find these "rules of thumb" will work well in the majority of cases. However, there may be some pictures where youd prefer something different.
As others see your page
-----------------------------
Ive talked about the fact that displays come in a variety of formats - VGA, SVGA, XGA etc. But what display resolution are you working at? What will your web page look like in a different format? If you dont know your format, do the following: for Windows based computers, right click your mouse on the desktop and select "Properties" - "Settings". Under "Desktop area" the slider will point to your display Setting. For the Apple Mac: Open the "Control Panel", select "Monitors and Sound". You can see the display resolution.
You can change the display resolution so that you can see your web page under different formats: for Windows: right click your mouse on the desktop and select "Properties" - "Settings". In the "Desktop area", move the slider to a new screen resolution. Click OK and the display will change. Dont worry if your display cant cope with that particular format. If the screen goes blank or funny, just leave it and Windows will restore your original setting in 15 seconds. For the Apple Mac: open the "Control Panel", select "Monitors and Sound", change the screen resolution closest to the format you want. Click the rectangle on the upper left side.
The difference between a web page and a printed page.
-----------------------------------------------------
When you scan and store a photograph in JPG format, and then print it, the physical size of the printed image remains the same, whatever the precision of the scan (i.e. whatever dpi you use). Id like to explain this, because there is a fundamental difference between the way that images are handled for printing and how they are handled for the web. The JPG specification (read it at http://www.w3.org/Graphics/JPEG/itu-t81.pdf ) has a header to the data that contains various useful information. In particular it gives the width and height of the image in pixels and the scan resolution (dpi). From this the software can work out the physical image dimensions in inches. Even low cost printers today have a 600 or 1200 dpi resolution, which is much higher than any computer display. With this high resolution, printers can easily copy with any scan resolution by simply filling in extra dots. Printer software, therefore, prints images with a real physical dimension to match the original scan.
The HTML code that makes up a web page can only cope with width and height in pixels, it does not use the real physical size in its display of images. When you scale an image to fit a web page, only the width and height in pixels are used; the dpi of the scan is not used. Thus it doesnt matter what dpi you scan in at, the file size and the picture dimensions will be determined solely by the number of pixels in the width and height. If you scan in at a high dpi you will scale the image to fit your page by reducing the number of pixels in the image. It does matter what dpi you use for the scan, simply in that you create a source image of high resolution, and therefore you retain as much of that resolution as possible after scaling. I hope it is just common sense to say that it is better to throw information away from an image rather than never have it present in the first place.
Some examples of image manipulation
-----------------------------------------------
http://www.webdes.20fr.com/photo6.html shows some examples of image manipulation. The photographs were all scanned on a Canon N670U in 24 bit true color mode and saved in BMP format prior to manipulation. All the images are 583 pixels wide, because this was the width of the 75dpi scan, and the others were scaled to suit. The differences between the pictures are quite subtle, but you should observe that the file sizes between the 150 dpi scan and the 75 dpi scan are very similar, because the pixel dimensions are the same. Interestingly the scaled 150 dpi scan actually compressed to a slightly smaller file size than the 75 dpi scan. The reason for this lies in the fact that the JPG algorithm works in the frequency rather than the spatial domain - but this is becoming much too technical for this article. I also show a sharpened version of the photo, and a version with very low compression (slider set to 100). Finally some thumbnail sized images are shown as a demonstration of sharpening.
About the Author
John Stuart Beeteson has over 30 years experience in the computer industry, and is the author of : "Visualizing Magnetic fields" published by Academic Press, and the two books of the WebSkel course "Success and Profit through Ecommerce." He is the President of WebSkel.
Support@webskel.co.uk
http://www.webskel.co.uk
Image formatting
---------------------
In a computer, pictures are stored in a format called a bitmap", meaning an image split into a large number of small dots, each of which can have different colors and shades of gray. Magnified the individual dots can be seen. (I cant illustrate this in a text article, but if you visit http://www.webskel.co.uk/iproc.htm youll see what I mean.) Sometimes, if a picture is gradually magnified, the dots can be resolved, and then the picture is described as "pixellated", because the little dots making up the image are often called "pixels" (picture elements).
Types of picture
--------------------
There are two types of pictures that are used in websites: graphics art stored with a computer file name ending .gif, or photographs stored with a computer file name ending .jpg (or sometimes .jpeg). Why have two types of files? The answer lies in how the files are prepared. A mathematical algorithm (like an equation) is used to compress them to remove information which isnt needed by the human eye, which makes the files much smaller, and hence faster to load on a website. The GIF algorithm was designed for graphic art and JPG was designed for photographs. Graphic art typically has fewer colors, larger areas of solid color and hard edges. A photograph has a large range of colors and soft and ill defined edges (the "real" world as against the cartoon world perhaps might be a good definition).
Resolution and loading time
----------------------------------
Ive mentioned compression. Photographs, even when compressed, contain a lot of data, and care must be taken to optimize the file sizes to retain adequate picture quality (the resolution), yet keep the loading times short. There is nothing worse than a website that keeps a viewer waiting whilst pictures load.
Display resolution
----------------------
On a computer display the images, whether text or pictures, are made up from millions of small dots. Not all displays can show the same number of dots, and the most common are:
VGA (Video Graphics Array): 640 horizontal dots X 480 vertical.
SVGA (Super Video graphics Array): 800 X 600 dots
XGA (Extended Graphics Array): 1024 X 768 dots
Surveys show that nearly 90% of computers have SVGA or larger displays. Since pictures occupy a fixed number of dots, if your picture has more dots than the display the browser will introduce a horizontal scroll bar. Most designers recommend a web page be 800 pixels wide, which optimizes for the majority of displays. Dont worry, by the way, that users at VGA will lose information: what happens is that they will get a horizontal scroll bar to see all your web page. In practice all you have to do is to remember that your web page width is 760 pixels. Why 760 and not 800? Just because your browser will most likely add a vertical scroll bar down the right hand side of your web page, and this will take up the remaining 40 pixels.
How to size pictures
-------------------------
Pictures are placed on a web page at a fixed size in pixels. Now, if you keep the aspect ratio (the ratio of horizontal to vertical size) constant, all you have to think about is the width. So, what size do you want your picture to be? If you want it to occupy the whole width, then make it 760 pixels wide. If you want it to be half the screen width then make it 380 pixels wide and if youd like just a thumbnail make it 60 or 100 pixels wide. There is one exception to this rule. If you place navigation bars down the side of your page, then these will obviously take some more of the picture width. So in this case reduce the 760 pixel value by the width of your bars (but keep thumbnails at 60 or 100).
Scanning.
-----------
If your source is a print rather than a digital photograph, youll need a scanner. Make sure the picture is square on the scanner (de-skewing later is always a compromise). Try to select a scan mode with automatic picture quality adjustment. Now scan in at an appropriate resolution (i.e. dots per inch, or dpi) and save in BMP (bitmap) format (to preserve an uncompressed lossless source).
Choice of dpi (resolution)
--------------------------------
I often see 75 (or 72) dpi recommended for scanning pictures for web display, on the principle that this is the limit for computer monitors. I have to disagree. In the early days of PCs this may have been true. But its not true today, and if you want your web pictures to stand out you must optimize more cleverly than this. Its easy to work out that display resolutions have improved. Take a 17" diagonal XGA monitor. Here the image width is 12" with 1024 pixels - a simple division gives 85 dpi, and some displays are better even than this. Now its true that a poor display will degrade the image, but on a decent quality display youll soon see the difference. And dont forget the near perfect resolution from the increasingly common flat panel displays. By experiment Ive found that if you want the final web picture to be half the web page width (i.e. 380 pixels) or greater, then between 100 and 150dpi usually gives the best results. However, at less than half the page width (i.e. less than 380 pixels) 75dpi is fine. You want to scan in at the lowest resolution that gives an acceptable result, because this produces the smallest file size, the fastest loading and therefore the minimum wait for the viewer.
We are talking of images in this article, and "seeing is believing". Let me advise never to accept any advice on image processing (including mine!) without seeing, and trying, for yourself. Since words alone cant show what I mean, Ive put some demonstration images on one of my websites. First lets look at the effect of scan resolution. Ive chosen a simple black and white (i.e. two color) lithographic engraving, and scanned in at 75, 100, 150 and 300 dpi in GIF (I chose GIF because it is lossless compression) format on a Canon N670U. Visit http://www.webdes.20fr.com/photo4.html to see the images. The fine detail of the engraving should show you the effects very clearly. All the images are 268 pixels wide because this was the width of the 75 dpi scan, and all the others have been scaled to this value. On an XGA LCD flat panel monitor you will see increasing detail in all these images. On lower quality monitors, the detail will become progressively less obvious.
Image processing software
--------------------------------
Once you have a photograph in digital form, then some image processing will almost certainly be necessary. You may already have a suitable application, but if not there are some free programs that can be downloaded from the Internet, both for Windows and the Apple Mac. Let me give a warning: image manipulation of any sort almost always results in some image distortion, and each program will have a different algorithm. Usually algorithms have been well honed and give good results, but occasionally one comes across a poor one, so if you feel that your pictures are not as good as you might expect, then try another piece of software. Some photo manipulation packages include an auto-enhance feature and its always a good idea to try this on a photograph that appears less than ideal (dark shadows, for example).
Scale the pictures
----------------------
Remembering that your web page is assumed to be 760 pixels wide (less if you have horizontal navigation bars), calculate what pixel width you want for your image. As an example lets say that you want your picture to be 200 pixels wide. A menu command to scale will be called "Resize" or "Resample" or similar. Change the width to 200 (keep the "Preserve aspect ratio" box checked). The file should always be scaled in a photo manipulation program rather than in the web builder or HTML application, as this is the only way to reduce the file size. Loading a large picture file and scaling in the web builder is the most common mistake leading to long page loading times. I should also say that common sense dictates that resizing should always be to make the image smaller: scaling upwards will always increase imperfections and add extra distortion.
Sharpening
-------------
Because the scan resolution may be relatively low, and therefore the picture not as sharp as at a higher resolution, Ive found it sometimes an advantage to improve photographs (JPG) using the "sharpen" feature found in photo manipulation packages. Be sparing when sharpening, however, as this kind of image processing also introduces distortions. Ive found by experiment that thumbnails (60 or 100 pixels wide at 75 dpi) are always improved by sharpening. Larger images at 75 dpi may be improved (test it to see), whilst images at 100 or more dpi probably wont be improved. Never sharpen GIF images.
Compression
---------------
Select "File-SaveAs", and choose JPG (for photographs) or GIF (for graphic art) in the File-type drop down box. If its JPG, look at the compression "Options" and drag the slider to 50. The reason for setting the slider to 50 is that the JPG algorithm allows a higher level of compression (and hence shorter loading time) to be traded for a reduced quality. Ive picked 50 as a good compromise - but it is a compromise, so change the ratio if you wish. A higher number means a smaller compression.
Its all a compromise
-------------------------
The one thing to remember here, is that all this manipulation of your picture is a compromise between image quality, file size and loading time. Like all compromises, there is no such thing as "best". Ive given you the results of my experiments and experience, and I think that youll find these "rules of thumb" will work well in the majority of cases. However, there may be some pictures where youd prefer something different.
As others see your page
-----------------------------
Ive talked about the fact that displays come in a variety of formats - VGA, SVGA, XGA etc. But what display resolution are you working at? What will your web page look like in a different format? If you dont know your format, do the following: for Windows based computers, right click your mouse on the desktop and select "Properties" - "Settings". Under "Desktop area" the slider will point to your display Setting. For the Apple Mac: Open the "Control Panel", select "Monitors and Sound". You can see the display resolution.
You can change the display resolution so that you can see your web page under different formats: for Windows: right click your mouse on the desktop and select "Properties" - "Settings". In the "Desktop area", move the slider to a new screen resolution. Click OK and the display will change. Dont worry if your display cant cope with that particular format. If the screen goes blank or funny, just leave it and Windows will restore your original setting in 15 seconds. For the Apple Mac: open the "Control Panel", select "Monitors and Sound", change the screen resolution closest to the format you want. Click the rectangle on the upper left side.
The difference between a web page and a printed page.
-----------------------------------------------------
When you scan and store a photograph in JPG format, and then print it, the physical size of the printed image remains the same, whatever the precision of the scan (i.e. whatever dpi you use). Id like to explain this, because there is a fundamental difference between the way that images are handled for printing and how they are handled for the web. The JPG specification (read it at http://www.w3.org/Graphics/JPEG/itu-t81.pdf ) has a header to the data that contains various useful information. In particular it gives the width and height of the image in pixels and the scan resolution (dpi). From this the software can work out the physical image dimensions in inches. Even low cost printers today have a 600 or 1200 dpi resolution, which is much higher than any computer display. With this high resolution, printers can easily copy with any scan resolution by simply filling in extra dots. Printer software, therefore, prints images with a real physical dimension to match the original scan.
The HTML code that makes up a web page can only cope with width and height in pixels, it does not use the real physical size in its display of images. When you scale an image to fit a web page, only the width and height in pixels are used; the dpi of the scan is not used. Thus it doesnt matter what dpi you scan in at, the file size and the picture dimensions will be determined solely by the number of pixels in the width and height. If you scan in at a high dpi you will scale the image to fit your page by reducing the number of pixels in the image. It does matter what dpi you use for the scan, simply in that you create a source image of high resolution, and therefore you retain as much of that resolution as possible after scaling. I hope it is just common sense to say that it is better to throw information away from an image rather than never have it present in the first place.
Some examples of image manipulation
-----------------------------------------------
http://www.webdes.20fr.com/photo6.html shows some examples of image manipulation. The photographs were all scanned on a Canon N670U in 24 bit true color mode and saved in BMP format prior to manipulation. All the images are 583 pixels wide, because this was the width of the 75dpi scan, and the others were scaled to suit. The differences between the pictures are quite subtle, but you should observe that the file sizes between the 150 dpi scan and the 75 dpi scan are very similar, because the pixel dimensions are the same. Interestingly the scaled 150 dpi scan actually compressed to a slightly smaller file size than the 75 dpi scan. The reason for this lies in the fact that the JPG algorithm works in the frequency rather than the spatial domain - but this is becoming much too technical for this article. I also show a sharpened version of the photo, and a version with very low compression (slider set to 100). Finally some thumbnail sized images are shown as a demonstration of sharpening.
About the Author
John Stuart Beeteson has over 30 years experience in the computer industry, and is the author of : "Visualizing Magnetic fields" published by Academic Press, and the two books of the WebSkel course "Success and Profit through Ecommerce." He is the President of WebSkel.
Support@webskel.co.uk
http://www.webskel.co.uk
Copyright © 2005-2006 Powered by Custom PHP Programming