REDUCING A GRAPHICS' FILE SIZE (KB)

A graphic on the web should be about 300-400 pixels wide and the file size, in bytes, should be about 25-75KB. The key is to keep the file size small.

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.

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.

If you have too many graphics on your web page and the graphics are over 50KB each then I recommend that you reduce their file size or at least make thumbnails of them and use the thumbnail as a link to the full size graphics by Making Thumbnails.

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.

REDUCING A GRAPHIC'S FILE SIZE (KB) USING PAINT SHOP PRO

Here are the step to reducing a graphic's file size (KB). 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 jpg compression function.

Page Builder users should try to determine what the graphic's dimensions 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

You can also reduce the scaled down versions of the graphic by following the steps below.

  1. Start up your Graphics Editor.

  2. Load in the graphic to be reduced in size. I will be using

    This photograph is 500X317 pixels and is 113KB. 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 5/8th 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 FILE > SAVE AS.

  6. Select the JPG format

  7. Click on the OPTIONS button

  8. Set the COMPRESSION by raising the value in the window. Check the resulting compression value (see the BLUE RECTANGLE) Note: The more you compress a .jpg file, the poorer the quality of the graphic. So try several compression numbers to see which gives you the most compression plus it "looks OK".

You tell me, which photo below is 21KB and which is 113KB?

The 21KB is the first photo!