How to Manage Images with Image Optimizer in CSS3 - dummies

How to Manage Images with Image Optimizer in CSS3

By John Paul Mueller

The Image Optimizer in CSS3 makes it possible to create images that load quickly and efficiently. A user is less likely to click away from your site when it’s speedy, so optimizing the images is always a good idea. Even small changes in perceived speed (if not actual speed) can make a difference.

To access the Image Optimizer, click Image Optimizer on the web Tools menu of the main page. You see a page similar to the one shown below.


You can provide the URL of an image online or the location of an image on your hard drive as your input (using the correct field). Click the Browse button to make it easier to find an image on the hard drive. You’ll see a File Upload dialog box you can use to locate the file on your hard drive. The maximum file size that Image Optimizer will accept is 2.86 MB. If your file is larger than this size, you need to crop or resize it before uploading it.

  • Cropping removes part of the image without affecting image quality.

  • Resizing maintains the entire image, but reduces image quality as a result.

With the Image Optimizer you can convert an image to another type. The image type you use determines just how much optimization that the Image Optimizer can provide. However, when working with a lossy file format, such as Joint Photographic Experts Group (.JPG), it also determines the quality of the image the user sees.

A lossy file format is one that sacrifices some content in order to make the file smaller. When image quality suffers too much, the user becomes frustrated and leaves your site despite the improvement in page download speed. The example begins with a 1.05MB .JPG image. The following list shows the optimized sizes for each output file type.

  • .GIF (8 color): 794 KB

  • .GIF (4 color): 530 KB

  • .GIF (2 color): 284 KB

  • .JPG (quality 80): 1.03 MB

  • .JPG (quality 70): 943 KB

  • .JPG (quality 60): 783 KB

  • .JPG (quality 50): 633 KB

  • .JPG (quality 40): 589 KB

  • .JPG (quality 30): 486 KB

  • .JPG (quality 20): 380 KB

  • .JPG (quality 10): 239 KB

  • .PNG (8 color): 975 KB

  • .PNG (4 color): 634 KB

To perform the image optimization, choose an image type from the Convert To field, optionally check Show All Results, and click Optimize. The optimization process can require a few minutes to complete. What you see as output is the original image and some suggested alternative images.

In this case, you see Graphic Interchange Format (.GIF) output, which saves size by reducing the color depth. The Portable Network Graphics (.PNG) also saves space by changing the color depth; .JPG saves space by reducing image quality. Each of the image entries will tell you how much smaller the converted image is and what you can expect to save in download size.


To save a particular version of the optimized image to disk, right-click the image and choose Save Image As from the context menu. Provide a filename for the image and click Save to complete the process.

Some image conversions can produce special effects that look quite nice on a site. For example, changing an input image to a two-color .GIF file can create a nice abstract look that works well for a background image. Try various conversions to determine whether any of the effects will be useful on your site (in addition to saving download time).