HOW TO SIZE AN IMAGE FOR DISPLAY ON THE WEB
You must properly size and optimize an image for display on the Web. If you do not, you will probably be attempting to upload images for display that are far too large (file size) for the browser to upload. And are much larger (dimensions) than how you want the images to display on web pages.
How large an image your browser can upload depends mostly on how fast your Internet connection is. Your browser may be technically capable of uploading a file larger than 100kb. However, 100kb is a size everyone can upload, so it is a good rule of thumb to size your images to be 100kb or smaller when using them on a web page. Also, the smaller your image files are, the faster your page will load.
How large an image file is (in bytes) depends upon a combination of two things: (1) its dimensions; and (2) its color density or DPI (dots per inch). Images that are to be displayed on the Web should be no denser than 72dpi. How large the dimensions are is important also, because large images generally have proportionally large file sizes (in bytes).
To give you an idea of dimension, the full area of your PC's display screen is about 800 pixels wide x 600 pixels high (notebook screens are smaller). The standard size for a web site banner that you generally see at the top-left of a web page, is 468 pixels wide by 60 pixels high. To find the dimensions and filesize for any image you see displaying on a web page, right click on the image and select Properties. The file size will display in bytes (there are 1024 bytes in 1 kilobyte) and the dimensions in pixels.
Look around at some web pages to get an idea of the dimensions, in pixels, you want your image to be to properly display on your web page.
In order to change an image file's size and/or dimensions, you need an image editor. We recommend a little, easy-to-use image editor called IrfanView. It's a free program that can be downloaded from http://irfanview.com.
After you've installed Irfanview on your computer, start up the program. Locate an image file on your computer than needs to be optimized for the Web. Drag a copy of the file onto the Irfanview screen. The image will display on the Irfanview screen in its actual size (how it would look on a web page). Follow these steps to optimize:
  • Click the Image link at the top of Irfanview
  • Select Resize/Resample
  • At the bottom of the left side of the screen is a field that shows the current DPI and lets you change it. Change it to 72.
  • Use one of the various methods on the screen to make the image the size (dimensions) you want it to be when it displays on your Web page. This will be self-explanatory when you see it. Be sure to keep preserve aspect ratio checked.
  • Click the OK button
    The image will be displaying in its new size in Irfanview If you don't like the new size and want to make it bigger or smaller...
  • Click the Edit link at the top of Irfanview, then click Undo
  • Repeat steps 1-5 above
    When the image is the size you want it to be
  • Click the File link at the top of Irfanview, then click Save or Save As depending upon whether you want to keep a copy of the original image or not. If you do not need a copy of the original to be saved, select Save and click OK to overwrite the existing image file. If you need to keep a copy, select Save As and give the image you just created a new filename. Be sure the filename does not contain any spaces or special characters!