RE-SIZING A GRAPHICS' DIMENSION - THUMBNAILS Most people new to the internet, i.e. the web, will use too many graphics on their web pages or the graphic will be too large in file size, i.e. in Kilobytes (KB) or both. One solution to this problem, explain below, is to make Thumbnails of the original graphic and use that at a link to the full size graphic.

This is especially true of people who make their pages with Page Builder as they will:

  • Upload a graphic from there PC
  • Put the graphic on their page
  • Shrink down the graphic by moving the graphic corners or sides toward the center

But the size of the graphic, in both height and width (pixels) and KiloBytes (KB), is still the same size! The graphic looks small but it is only a HTML code that makes it appear smaller. Page Builder users put lots of graphics on their pages this way and think they have small graphic when they really don't. And then the site gets shut down for an hour due to data transfer limits exceeded.

To see how you can reduce the file size, in KB, of your graphics, please see Reducing A Graphic's File Size (KB) Using The JPG Format.

PSP7, probably the best graphics editor for the money, can be purchased from Jasc.com for about $100.

If you don't have a graphics editor you can get a very good free one at Irfanview. You can read about Irfanview at my Free Graphics Editor Page.

RE-SIZING A GRAPHIC'S DIMENSIONS USING PAINT SHOP PRO

Here are the step to re-sizing a graphic's dimensions. I will use Paint Shop Pro 7 (PSP7) to illustrate the process but you can use any graphics editor as they all have a similar re-sizing function.

Page Builder users should try to determine what size the graphic should be before you put it on their page. They can do this by:

  • Determine what is their monitor's resolution in pixels:
    • Bring up their desktop.
    • Right Click on the background.
    • Click on the Properties.
    • Select the Settings tab. The resolution is show there
  • Estimate what width their graphic should be by what size they want it on your monitor, i.e. 10%, 20%, etc.
  • Multiply the monitor's width by this percent, e.g. width is 800 and graphic should be about 1/3 of the screen, i.e. 800 X 1/3 = 266

Once a Page Builder users has the estimated size then do the steps below.

  1. Start up your Graphics Editor.

  2. Load in the graphic to be re-sized. I will be using

    my cat's photograph that is 320X240 pixels and is 35.5KB. Pixels are the dots on your monitor. Monitors now days are from 800X600 pixels to 1280X1024 pixels in size. This graphic, if used on a 800X600 pixel monitor, would take up about 1/6th of the screen.

  3. Make a copy of the graphic by clicking on WINDOW > DUPLICATE in the toolbar. You do this as you never work on the original graphic as it is too easy to forget what you are doing and save the modified graphic as the original, which you don't want to do.

  4. Close the original graphic so all you have left on the editor screen is the duplicate.

  5. Click IMAGE > RE-SIZE.

  6. Change the WIDTH only! but make sure that the aspect ratio box is checked. For example, the original graphic, speedy.jpg, is 320 pixels wide and you want a width of 100, i.e. the re-sized graphic will be 31% of the original size. You should use whatever dimension you wish but trial and error will tell you what works best for the page. This is why you use a duplicate copy rather than the original.

  7. Now the graphic is smaller in appearance.

  8. SAVE AS the graphic in the JPG format, the original format. Try saving the graphic in both .jpg and .gif and then compare the file size, KB, and how the re-size graphic looks. Select what you think is the best looking and smallest.

    Click on the OPTIONS button (RED RECTANGLE) and then click on the RUN OPTIMIZER (BLUE RECTANGLE).

    Note the compression value of 1. Be careful of compressing the image too much.

  9. Click OK and the graphic is now 100X75 pixels (69% reduction in pixels size) and only 7.5KB in size (79% reduction in KB size!!).

  10. Save the image with a new name. I have used speedysmall.jpg as my new name.