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

Images can make the content 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 the web can increase page load time, which frustrates users and leads to increased page abandonment rates. Bloated images also contribute significantly to the internet’s massive environmental impact.

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 most 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 to improve page performance and improve a website’s sustainability.

Use CSS Sprites

The CSS sprites technique combines multiple images into a single image to maximize pagespeed and minimize HTTP requests. This is useful for icons, logos, and other visual elements that are used repeatedly across your website. Read our 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, illustrations, and type, use GIF or SVG. Just keep in mind that site crawlers and assistive technology, such as screen readers used by people with disabilities, can’t interpret type that’s been embedded into an image. Only use type this way for decorative purposes.
• 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 “Export As…” or “Save for Web… (Legacy)” to preview your image saved as different file types. The screenshot below was created by selecting the “4 up” tab in the Save for Web dialogue box, which allows us to look at four versions of the image at once.

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.

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 “Export As..” or “Save for Web (Legacy)” to save your image to a variety of formats and sizes.

Image Optimization: Learn More

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

Want to learn more about how to make your website more people- and planet-friendly? See how green your website is with Ecograder.