Speed up your MODx website by optimizing your images.

Please note: I have shifted my focus to Python/ Linux/ embedded development and am no longer accepting MODX or PHP projects. For MODX work, I recommend Grey Sky Media.

You may not notice that your website takes too long to load. Your internet connection may be fast. Or your browser may have stored copies of your website, ready for fast access. However, optimizing your images for file size can reduce page-load time drastically for new visitors with slower connections. And making your website faster can actually be good for business.

General Tips

  1. Never use the MODx rich-text editor to re-size your images (via CSS or HTML). This results in either blurry images or longer-than-necessary download times. Instead, either re-size and optimize your images on your computer before uploading, or use the MODx TinyMCE image editor (more on this soon).
  2. Lowering the image quality usually results in a lower file size. Play around with your program's image adjustments until you have as small of a file size as possible, yet you are still happy with the quality of your image.
  3. Save a large, high-quality backup copy of your image. Always use this as a starting point for optimization and re-sizing, because re-sizing and/or optimizing an image multiple times can permanently hurt its quality.

Should you use PNG, GIF, or JPEG for your website images?

My rule of thumb: use jpeg/ jpg for photos or images with lots of gradients, and use png for clipart, drawings, and other images made of lines and solid color fills. GIFs work well for the same types of images that PNGs work well for, and optimization strategies for GIFs are very similar to those for PNGs. However, I prefer PNGs over GIFs because PNGs almost always result in a smaller file size than GIFs.

Examples of images best saved using PNG (or GIF)

Few colors, no complicated gradients, and a "clipart" appearance are good qualifiers for PNG and GIF filetypes.

  

Examples of images best saved using JPEG

Photographs, complicated gradients, and lots of colors are good qualifiers for saving as JPEG.

  

Optimizing JPEGs

Check out these links for tips:

Optimizing PNGs

Check out these links for tips:

Optimizing in Photoshop

Use Photoshop's "Save for Web and Devices" dialog for optimization.

 

Posted on May 18, 2010 by Default Admin User