Putting Images in Web Pages


Correctly sized image
  • The result loads a lot faster!

  • <img src="ireland_20050205_small.jpg" width="192" height="144">
    Result: a 11 Kbyte image instead of a 1.5 Mbyte one, 135 times smaller! Also smoothing makes it look better.

  • Best Practice: make width= and height= numbers exactly match pixel size of the embedded image (web pages with all embedded images specified thus load a lot faster in most browsers).

  • More advanced topics:
    • Learn how to use the Crop tools
    • JPEG Compression: useful "quality" range is 40-80% (0.4-0.8); use GIMP preview-in-image-window to avoid too much image degradation
    • JPEG Smoothing: 0.10 is fine
    • JPEG Progressive scan makes faster loading images
(Image from Modis, courtesy of NASA)

Putting Images in Web Pages
Pat Murphy and Carolyn White