How to Optimize Images for the Web

Pretty lake scene

Here are a few easy steps you can take to reduce the load time of your webpages through optimization of images.

  1. Reduce the image dimensions. Crop and scale to the largest size that will be needed for your website or for social sharing. I use Croppola.com to crop to 4×3, then GIMP to scale to 800px width.
  2. Reduce image quality. Use the “Save to Web” feature in Photoshop or the adjust quality settings when exporting an image in GIMP (see link below). Also available is a “Save for web” plugin for GIMP: http://registry.gimp.org/node/33.
  3. Blur unimportant parts of the image. Make an outline of the focus, most important part of the image. Then Filter > Blur > Blur. Adjust to your liking (cmd + f in Photoshop).
  4. Do a final, online optimization. Run the image through ImageOptim API.

Post based on this article: https://responsivedesign.is/articles/reducing-image-sizes

Using GIMP: http://orbitingweb.com/blog/optimizing-jpeg-images/