Reasons to optimize

  • Save loading time: consider slower internet connections.
  • Save bandwidth: in the exmaple beelow, after optimization you can save 482 + 92 - 58 - 11 = 505 KB every time the page is loaded.
  • Preserve image quality: browsers do a rather lousy job enlarging / reducing images on the fly.

Optimization Steps

  • Design website and determine the final size of your image by pixel.
  • Adjust the image size in photoshop, change resolution to 72dpi. Use "best for reducing" or "best for enlargement" when necessary.
  • Use "unsharpen mask" to sharpen smaller images.
  • Use "save for web & devices" to get a balance between image size and photo quality: smallest file size that still looks decent.
  • Images large in dimension should be divided into smaller pieces using Photoshop's slicing tool.
  • Lots of colors, JPEG... Solid colors or no gradations, GIF. Note GIF also can have transparency.

 

Large, unoptimized JPG - 482 KB
Reduced, optimized, and sharpened JPG - 58 KB

Large, unoptimized JPG - 92 KB

Reduced, optimized GIF - 12 KB