Optimizing .jpg Imagery

To optimize the .jpg imagery on your web site, you should be aware of a number of techniques that you can use in effort to reduce the size of those files:

  1. Make sure that .jpg is the appropriate file format for displaying your graphic on the Web.
    One common mistake that many web developers will make is to load all of the images on their web site as a .jpg, when in actuality, only photos or images that you are dynamically introducing into Flash presentations need to be saved as .jpg files. .gif or 8-bit .png format for "drawn" imagery (buttons, logos, icons, etc.) are generally MUCH smaller in size.

  2.  
  3. Pre-size your image to the dimensions you wish to display on your web site.
    Another common mistake that many web developers will make is to load a photo from a digital camera on to their web server at very-large dimensions, but then force the display of that photo into a much smaller area (i.e. 300 pixels high by 200 pixels wide). Failing to re-size one's photos to the size in which they are being displayed on a web page can result in dramatically larger images for servers and browsers to process, for no good reason.

  4.  
  5. Adjust the compression levels in your imagery.
    Many photos saved into .jpg format for on-screen display can have compression applied to them without any noticable difference in image quality. The optimal amount of compression will vary from photo to photo. However, compression settings of between 10-15 percent is generally safe for most photos that are displayed online, with some images still looking great after being compressed as much as 60-65 percent. The more you compress a .jpg image, the smaller the file size and download/display time.

  6.  
  7. Remove extraneous information from your digital photos.
    Most digital cameras attach/embed lots of information within the resulting image files which is completely unnecessary related to the display of those images on the Web, including digital camera technical data (EXIF), comment blocks, JPEG thumbnails, and application blocks. Stripping this information out of your saved imagery will result in smaller file sizes and faster downloads and display.

  8.  
  9. Remove any excess colors.
    Many digital photos will be saved at 32-bit color. However, a vast majority of monitors will not display images at anything greater than 24-bit color. Consequently, it is in your best interests to save your photos at no greater than 24-bit color for all on-screen display...and maybe as little as 8-bit to 16-bit color as well, if the images will not experience any noticable reduction in quality. You should also make sure that any black and white imagery is saved as a grayscale image as well, in order to further reduce the size of those images.

  10.  
  11. Avoid the use of progressive downloads.
    For very large images, many web developers have employed a tool called progressive encoding, which downloads a rough whole image and gradually increases the image's clarity, instead of downloading from the top of the image and moving downward as is typically done. While this is effective in letting a site's visitors know that "something is coming," it will typically add to an image's overall size and download/display time.

  12.  
  13. Apply custom zonal compression to your imagery.
    This is one of our absolute FAVORITE techniques for reducing image size! In many photos, there will be areas or "zones" which can use a much greater level of image compression than other areas with much higher levels of detail (such as people's faces or areas with of a photo with text). If you apply different levels of compression to different sections of an image, you can often dramatically reduce a file's overall size and download/display time.

Tools that will allow you to complete these techniques:
Adobe Photoshop (Mac/Windows): Cost: $$$$ | Quality: A+ | Ease of Use: C | Use With: 1, 2, 3, 5, 6
GIMP (Mac/Windows/Unix): Cost: Free | Quality: A- | Ease of Use: C| Use With: 1, 2, 3, 5, 6
ImageMagick (Mac/Windows/Unix): Cost: Free | Quality: A- | Ease of Use: B | Use With: 1, 2, 5
ImageOptim (Mac): Cost: Free | Quality: Unknown | Ease of Use: Unknown | Use With: 4, 5
JPGExtra (Windows): Cost: Negotiable | Quality: A | Ease of Use: A| Use With: 4
Picasa (Windows/Linux): Cost: Free | Quality: B+ | Ease of Use: A-| Use With: 1, 2
PureJPEG (Win32 Command Line): Cost: Free | Quality: A | Ease of Use: A | Use With: 4
xat.com Image Optimizer (Windows): Cost: $ | Quality: B+ | Ease of Use: A- | Use With: 1-3, 5-7 [review]


 
  Four Examples
 
 
 
    Other:
  Samples on Site
  Samples on Blog