In our previous post, we examined why it is important to optimize image content in terms of carbon emissions. On this occasion, we will explore the methods and tools by which all this can be achieved. SBH Images (123RF, Glix) contributed to these image carbon optimization steps. Thanks to their expertise and our own experiences, we put together a detailed, step-by-step image optimization guide so we can show you how reduce the carbon footprint of your website and newsletters!

Ways to achieve carbon-optimal images:

Before all, please make sure that the images that you are planning to use are royalty-covered and are from a legally appropriate source!

Pictures Translation: Use an image compression tool to reduce the file size of your images. This can help reduce the energy consumption required to transfer the images to the user’s device. Be sure to balance image quality with file size when compressing images to ensure that the images are still visually appealing.

Resize images: Resizing images is another effective way to reduce image size. You can use an image editing tool like Adobe Photoshop or GIMP to resize images to a smaller size. Be sure to maintain the aspect ratio of the image to prevent distortion.

Crop images: Cropping images is a way to remove unnecessary parts of the image that are not needed. This can help reduce the file size of the image.

Choose the right file format: Different file formats have different file sizes and can impact the energy consumption required to transfer the images. JPEGs are typically used for photographs, while PNGs are better for images with transparency. SVGs are ideal for logos and icons.

Use image lazy loading: Image lazy loading is a technique where images are only loaded when the user scrolls down to the part of the page where the image is located. This can help reduce the energy consumption required to load the images.

Use responsive images: Responsive images are images that adapt to different screen sizes and resolutions. This can help reduce the energy consumption required to transfer the images to different devices.

Use image caching: Image caching is a technique where images are stored on the user’s device after they have been loaded once. This can help reduce the energy consumption required to transfer the images if the user visits the website multiple times.

Reduce the number of images: Try to use fewer images on your website to reduce the energy consumption required to transfer them. Use images only when they are necessary and try to combine multiple images into a single image when possible.

Use a content delivery network (CDN): A CDN can help reduce the carbon footprint of a website by serving images from servers that are closer to the user, reducing the distance data has to travel.

Optimize website code: Optimize your website code by removing unnecessary code, reducing the number of HTTP requests, and minifying your CSS and JavaScript files. This can help reduce the carbon footprint of your website.

Only download the selected images in high resolution: Don’t send huge raw photo and video files, the storage of which consumes unnecessary resources. Make a decision based on the viewing images used for the selection and work only with the high-resolution artworks filtered in this way.

Use the right system for storing images: Store corporate communications content in a Digital Asset Management (DAM) system, rather than on colleagues’ computers. DAM allows you to find the right images without opening the raw materials, by entering a keyword, date or the type of rights. The information sheet of the DAM reveals for how long, and with which licenses a piece of content can be used, and it is also possible to manage rights.

Licensed content from photo agencies does not need to be stored on your own servers: Content purchased with a Royalty Free (RF) license entitles you to use it in perpetuity and can be re-downloaded from your user profile at any time, free of charge. You can find photos bought years ago with a simple search in your download history!

When editing the newsletter and eDM, load the images from the image-library: When using a newsletter editor or CRM system, do not upload the high-resolution images over and over again, but instead use the optimized size image from the image library or load and apply through the website integration.

By following these steps, you can significantly reduce the carbon footprint of your website without compromising the quality of the images on your website.

Apps and programs that you can use to reduce the images sizes:

Adobe Photoshop: Adobe Photoshop is a popular image editing program that allows you to reduce image size and optimize images for the web. You can use the “Save for Web” feature to adjust the file format, quality, and size of the image.

GIMP: GIMP is a free and open-source image editing program that allows you to resize and optimize images for the web. It also has a “Save for Web” feature that allows you to adjust the image format, quality, and size.

ImageOptim: ImageOptim is a free app for Mac that allows you to compress and optimize images for the web. It supports various image formats, including JPEG, PNG, and GIF.

Kraken.io: Kraken.io is an online image compression tool that allows you to compress and optimize images for the web. It supports various image formats, including JPEG, PNG, and GIF.

TinyPNG/TinyJPG: These are online image compression tools that allow you to compress and optimize PNG and JPEG images for the web. It uses smart lossy compression techniques to reduce the file size of images without sacrificing too much image quality.

Start by heading over to our Carbon.Calculator, measuring a page, and checking the Page Diagnostics tab for a snapshot of the impact images have on that page.

*The tips in this blog article are from experts at Carbon.Crane and SBH. Thank you!