Introduction: Why does the internet pollute?
Every action made on the web consumes energy, and is so responsible for carbon emissions. Looking at websites, watching videos or again sending email, these actions seem without consequences but in reality, they are not.
The web page display requires an important number of requests for the browser to display the elements of the website (text, images, typography, script, etc. …). These requests are going to be sent to a server, which has these elements to display them on the web page. Requests require energy and the use of a server, so electricity which has been produced by generating more or less of CO2. More a site is complex, the more it requires requests and has heavy elements (images, videos…), the more the carbon emissions will be higher.
There exist solutions to reduce the carbon emissions of a website. Among these solutions, we have the eco-design.
What is web eco-design?
The web eco-design allies performance and environmental impact. By optimizing the life cycle of a website (from the design to the conception, going through the choice of CMS and the host, functionalities, up to the traffic acquisition channels), the environmental impact of this one will be reduced.
Want to get into eco-design and reduce the emissions of your website? What if we get started by the picture optimizations?
How to optimize pictures for the web?
Optimize pictures of your website is a crucial point. A compressed and reduced image to the right-size will have a better effect on your website. This allows you to reduce the loading time of the page and to have a better user experience.
What image resolution for the web in pixels:
Generally, the central zone displaying the content of a web page is large of 1200 to 1400 pixels. For sites using images in full-page, count a resolution of 2500px (it’s a work base in 2022). To know the displaying zone of an image on a web page, many solutions are possible. Screen copies of the image, tools of code inspection allow more precise numbers.
But keep in mind these data:
- An image using the full width of the screen: max 2500 px of large
- An image using the middle part of the site: 1200 to 1400 px
- An image using the half width of the page: 1200/2=600 px
- An image using 1/3 of the width of the screen: 1200/3=400 px
To change the resolution of your image and reduce its weight, you can use professional software such as Photoshop, or its equivalent open sources such as Gimp. Online tools such as https://www.resizepixel.com/ or https://www.img2go.com/ also allow to easily resize and convert images in the right format, and the good resolution.
Choose the good image file extension
There exist many extensions of image files. Mostly, we are going here to treat Jpeg, Png, Svg et WebP formats. A same image in different formats could have a different look, but especially a different weight and carbon footprint, without changing the visible appearance on the screen.
Jpeg: It’s an old format but very used. It’s not very greedy in resources if it’s well used. Jpeg files, compared to PNG, webp or svg, don’t take into account the layers of transparency. It’s often the favorite format for photos, for example. It is possible to set image compression quality for the web. In 99% of cases, even the eye of an experimented graphist doesn’t see the difference between a Jpeg and one at 60 or 70%. Yet the weight and emissions are reduced by about 50%.
PNG: Format used in particular for visuals such as logo, pictograms or schemes. This format manages the transparency, which makes it very useful in case of layering of several visuals, or on a colored background. It’s not very greedy for the designated resources. But, it’s on the contrary heavier than the Jpeg if applied to photos, a lot heavier (between 3 to 10 times more than a Jpeg with 60% quality). It’s possible to reduce the number of colors in PNG during its exportation (in PNG 8) and so to reduce in an important way the file weight.
WebP: This format is fairly recent. Created in 2010 by Google, it allows to reduce the weight of resources, with a loss of reduced quality. Until 2020, it was not taken in charge by the whole browsers, which used to reduce its use. Now integrated to Chrome and other IOS and Firefox browsers, it can be used on most websites. However, some old materials won’t be able to read it. The WebP format manages transparency, like the PNG. It allows in addition to reduce to 10 to 40% the weight of images, in comparison with the .png and .jpeg.
SVG: This is a vectorized image file format. It’s so very useful for every achieved visual on software like Illustrator. It manages the transparency and allows extensible visuals without loss of quality. Very useful for logos, pictograms, and every designated resource on a vectorial software. Not to be used for photos. It is not very greedy for the resources that lend themselves to it.
AVIF: New format of images created in 2019. It allows more important compression than the WebP, but, is not taken in charge by some browsers yet. You see it, knowing which extension format is primordial to reduce the weight of the image resources.
Change the images resolution for the web:
In order to guide you in the optimizations of your images, we are going to take a concrete case with this cute image of a cat.
(Source: Freepik.com)
The original image has a resolution of 5008 x 3343 px (its original size on the SD card of the reflex camera). It therefore weighs much too heavy: 5.1 Mo… We loaded in a lighter way to avoid polluting. We are going to see how to split its weight by 50 (and as much as its carbon emissions). Reminder you that the space resolution of the central useful space of a page of a website is generally 1200 pixels wide. We are going to use Photoshop and resize the image format.
Photoshop:
- Open your image in Photoshop
- Go in File then Exportation and click on “Save for the web”
(c’est en français)
- Select the format (here Jpeg then the quality at 60%)
- Adjust the image size by entering 1200 px
- Save the image in your folder
And here, thanks to this solution, you optimized your image in 2 minutes. Going of a weight of 5300 Ko to 106 Ko, so a reduction of … 98%, or a split by 50. And yes, the optimized image will emit 50 times less CO2 than the non-optimized image, with no perceived loss of quality. You can then see the difference with the image before and the image after its optimization.
All you have to do is integrate the right image on your website! 😉
