carol.gimp.org

gimp & web pages

Make jpegs Smaller

Problem: you have several jpegs on a web page and need the web page to load faster. Image files contain a lot of information, making images slow to load. On a high speed internet you might not see this; however for people viewing web pages with a slow connection this fact can be painfully obvious. There is a way to reduce the "weight" of image files without changing the pixel size.

It is actually fairly impressive how much the weight of the image can be reduced; this example uses this beautiful image (and huge) of Saturn from APOD, 2002 February 15 (you can clearly see that they scaled and cropped this image to fit on the original web page).

screen-file-save_as

The goal here is to reduce the image for a web page, so the first step would be to scale the image to a width of 600 pixels, which is a reasonable pixel size for web viewing. The Info Window for this image reports a weight of 18.7 MB. Now for the task of reducing this weight. Using File ->Save As...

Right click with the mouse on the Image and follow the menu path to File ->Save As... and type a different name into the text box when the new dialog appears making certain that the file extension (the stuff behind the dot) says jpg or jpeg.

If everything is in order, the "Save as JPEG" dialog should appear. If you see instead the "Export File" you need to change the Mode of the image. Any other sort of error or dialog would mean that you mis-typed the file extension (the ".jpg" at the end of the file name).

The "Save as JPEG" dialog has a slider and some "spinning" numbers and should appear set at a default value of 85 (this is a percentage -- 85 percent of the original quality). Right under the slider is an estimate of the weight of the image with the shown percentage of quality (File size). Using the default value reduces the weight of the image by almost one kB. Underneath the weight information is an option to see a preview of the image in the image window. By default, this is toggled to Off; toggle it On. This will cause your quality changes to show on the image you are saving. Once it is toggled, you can see what the default setting of 85% will have on your image. In this case, it is difficult to see any changes in the image.

screen-file-save_as-jpeg
screen-file-save_as-jpeg-small

Using either the slider or the number spinners or by typing numbers into the little box, you can experiment with the different image quality levels and see what happens to the image and the weight. Very small quality results in a fairly lightweight image however, it almost destroys the original, as shown here when the image quality was set to 3%.

Use your eyes and perhaps other peoples opinion to find a nice balance between what you see and how big the file size is. I opted for a quality of 42%; at this quality you can see the image change some but the savings in weight is still worth it (8.6 kB, less than half of the original weight).

Compare four different quality settings on this jpeg race page. People who are still blessed with a slow internet connection might be able to see the loading speed differences as well.

screen-file-save_as-jpeg-good

another-gnu-type-sm

Most all of my software is gnu. thanks!

Creative Commons License

This work is licensed under a Creative Commons License.