Reducing file size makes images load faster

Saving in JPEG format reduces the file size of complex photographic images.

This image is 615 pixels wide and 410 pixels high and has 16 bits (2 bytes) per pixel ("thousands of colors"). If saved in uncompressed PICT or BMP format, the file size would be about 500 Kbytes ( 615 x 410 x 2 bytes/pixel = 504,300 bytes)! If saved in JPG format, the file size would be reduced to 67 Kbytes, which would take about 25 seconds to load with a 28 Kbaud modem.

How to do it:

Graphic Converter (Macintosh): File --> Save As... --> Format --> JPEG/JFIF
Paint Shop Pro (Windows): File --> Save As... --> Save as type --> JPG - JPEG - JFIF compliant.

The Crop (Trim) and Scale commands allows you to change the physical size and the file size of images.

The best way to reduce image size without loosing quality is to use the Crop or Trim command to eliminate the unimportant parts. This cropped image occupies only 25 Kbytes and would take only about 10 seconds to load, but still shows the Capitol building at the same size and clarity.

How to do it:

Use the rectangular selection tool to select the important part of the image, then
Graphic Converter (Macintosh): Edit --> Trim Selection
Paint Shop Pro (Windows): Image --> Crop

Reducing the size by one-half reduces the file size by one-quarter to only 7 Kbytes. This 7 Kbyte image would take only about 2.5 second to load.

A quarter-size "thumbnail" takes up only 2.6 Kbyte and would load in about one second.

How to do it:

Graphic Converter (Macintosh): Picture --> Size --> Scale
Paint Shop Pro (Windows): Image --> Resize

It is not a good idea to use a Web page editor or HTML editor to re-size graphics. It is better to re-size the graphics beforehand using a graphics editor.

Displaying an image smaller than its real size does nothing to speed up image loading because the file size in not reduced, only the displayed image size. In this example, the image file is 443 x 214 pixels (25 Kbytes), but it is displayed half-size, using the HTML tag `<img width=222 height=108 src="Cropped443x214.JPG">`.

An image displayed larger than its real size would load faster but would look blocky. In this example, the actual image file is 111 x 54 pixels, but it is displayed double size, using the HTML tag `<img width=222 height=108 src="Cropped111x54.JPG">`.

Reducing file size makes images load faster

Saving in JPEG format reduces the file size of complex photographic images.

How to do it:

The Crop (Trim) and Scale commands allows you to change the physical size and the file size of images.

The best way to reduce image size without loosing quality is to use the Crop or Trim command to eliminate the unimportant parts. This cropped image occupies only 25 Kbytes and would take only about 10 seconds to load, but still shows the Capitol building at the same size and clarity.

How to do it:

Reducing the size by one-half reduces the file size by one-quarter to only 7 Kbytes. This 7 Kbyte image would take only about 2.5 second to load.

A quarter-size "thumbnail" takes up only 2.6 Kbyte and would load in about one second.

How to do it:

It is not a good idea to use a Web page editor or HTML editor to re-size graphics. It is better to re-size the graphics beforehand using a graphics editor.

An image displayed larger than its real size would load faster but would look blocky. In this example, the actual image file is 111 x 54 pixels, but it is displayed double size, using the HTML tag <img width=222 height=108 src="Cropped111x54.JPG">.

An image displayed larger than its real size would load faster but would look blocky. In this example, the actual image file is 111 x 54 pixels, but it is displayed double size, using the HTML tag `<img width=222 height=108 src="Cropped111x54.JPG">`.