Blog

How to Optimize Images for Faster Load Times and Sustainability

Posted by in Design, Sustainability tagged with

Sustainable Web Design Series No. 12

One quick and easy step that you can take to minimize a website’s carbon footprint is to optimize images, making them smaller and faster to load.

Images can make the stuff we read online easier to read. They can help customers feel a strong emotion or get a clear impression of a brand. People are also more likely to share blog posts with images rather than text. But images that aren’t optimized for publication on the web, can increase the carbon footprint of you website.

Simply put, pixels need power to appear on your screen. Both the web servers that deliver content to customers and the devices that consumers use to browse the web use electricity. Billions of watts of electricity. And a lot of that electricity is generated by sources that aren’t clean or renewable. In this post we’re going to look at some basic techniques for optimizing your images for performance and for sustainability.

Use CSS Sprites

The CSS sprites technique combines multiple images into a single image to maximize pagespeed and minimize HTTP requests. Read my last post “How CSS Sprites Improve Speed and Sustainability” for more information on this strategy.

Select the correct file type

When you create an image and then save it, some compression happens, which means that your file gets smallers. Different file types take different approaches to reducing your file size. Selecting the correct type of file for a particular image will often result in a smaller file size.

  • Use JPEGs for photographs and illustrations that have a lot of shading in them.
  • For line art and fonts, a GIF is often the correct file type.
  • For images that need to support partial transparency while retaining some of the crispness of a JPG, such as a company logo, a PNG is often the correct file type.

Let’s look at some examples. If you use Adobe products such as Photoshop, you can use the “Save for the Web” interface to preview your image saved as different file types. The screenshot below was created by selecting the “4 up” tab in the Save for the Web dialogue box, which allows us to look at four versions of the image at once.

screenshot comparing different file kilobyte sizes and file formats

By selecting the JPEG file type you can often make the file sizes of your images smaller. In this example you can see that by selecting the JPEG file type we were able to save 398.57 kb in comparison to the original file.

 

Playing with Image Quality in Photoshop

In the example below, we have selected a JPEG file type for a photograph of cyclists on Climate Ride. After you select a file type for an image, you can adjust the quality of the JPEG. You’re looking for the smallest file size that is visually acceptable in the proper file format.

screenshot showing Examples of kilobyte sizes for 4 different jpegs

The goal of Image Optimization is to reduce your file size without reducing the quality of the image. This example from Photoshop shows the differences between the original image (top left) and the image saved at three quality levels: low, medium and high.

In the above example, in the low quality version of the JPEG (top right) you can see digital artifacts on the yellow sign that compromise the quality of the image. The artifacts in the medium quality image (bottom left) are less noticeable, but still present. The maximum quality image has no artifacts, but is half the size of the original image. A next step might be to find a happy medium between medium and high quality. Keep in mind, that if you are targeting devices with retina displays, a higher resolution photo might be desirable.

3 Tools for Image Optimization

Alternatively, there are a few tools and plug-ins that help automate this process. The three tools I’ve used to help optimize images are:

  1. Yahoo! Smush.it
  2. Image Optimizer
  3. Photoshop’s Save For Web and Devices

Smush.it

Yahoo! Smush.it seems to be really easy to use, but I ran into a few issues when I tried it. I found it hard to “smush” certain images. I’m not sure why, but from time to time the application wouldn’t recognize an image that I attempted to upload and compress.

Image Optimizer

This tool was really easy to use and I didn’t run into as many issues as I did with Smushi.it. What I liked about this application was that it gives you the ability to crop the image as you please with a “max-width” and “max-height” option. This allows the application to compress your image to it’s full potential.

Photoshop

This is the method that we described above. With Photoshop you’re able to crop any image to any size you need, and from there you can click file then “Save for Web and Devices”.

If you have Photoshop this is probably the option that I would recommend, but for those of you that don’t I believe that Image Optimizer is the next best option.

Image Optimization

For a more in-depth look at Stoyan Stefanov’s presentation on Image Optimization: 7 steps (and how to correct them), which walks you through the best practices for Image Optimization.

See how green your website is with Ecograder.

Mightybytes is a full-service digital agency in Chicago and a certified B Corporation. Connect with us on Twitter, Facebook and Pinterest or fill out our contact form.