TABLE OF CONTENTS
<aside>
In light of current environmental concerns, digital pollution is also being called into question, resulting in an increase in references to eco-friendly, sustainable, green websites, etc. While it would be misleading to claim to produce a “green” website, it is indeed possible to reduce its energy consumption.
This article does not focus on the technical aspect (known as “eco-design”), but on the actions you can take to reduce or limit your website's energy consumption.
We will therefore focus mainly on media and content issues.
</aside>
Some guidelines to help you understand the size of your files: an image on a web page should ideally be less than 100 KB, while a video less than a minute long should be between 2 and 5 MB. Below is the relationship between kilobytes, megabytes, and gigabytes.
<aside>
1 Ko (Kilo-octet)
= 1024 octets
</aside>
<aside>
1 Mo (Mega-octet)
= 1024 Ko
</aside>
<aside>
1 Go (Giga-octet)
= 1024 Mo
</aside>
For a visual understanding of the size ratio between each of these measurements, refer to the image opposite.
Each megabyte takes up as much space as 1024 kilobytes, and each gigabyte takes up as much space as 1024 megabytes (and therefore 1024 x 1024 kilobytes) ...
The good news is that it is not always necessary to fill your web pages with heavy elements!
Representing an average of 44% of a web page's weight in 2022 (according to reports from the http archives: Report: Page Weight (opens in a new window) and Report: State of Images), images are often too heavy and too large.
You can resize your images to be around 800 pixels wide, which is perfectly sufficient for a desktop web page. Anything larger than that is too heavy and even requires computational effort on the part of the browser to resize it.
You can compress your images without any visible loss of quality using tools such as Shortpixel, ImageCompressor, or TinyPNG. On WordPress, you can also use plugins such as shortpixel API tools or imagify.io.
The image format also plays a role in its size.
For raster images (with pixels, such as photos), JPEG and WEBP formats are recommended. JPEG files contain less data than PNG files because they do not support transparent backgrounds, and are therefore smaller. The WEBP format is generally lighter than PNG at the same quality, while supporting transparent backgrounds. For so-called “vector” images, the preferred format is often SVG.
<aside>
WEBP
<aside>
AVIF
<aside>
JPEG
<aside>
SVG
<aside>
PNG
A few tips :
Optimize your images more in details here.
Excessive use of videos excludes people with low bandwidth (causing slow or impossible downloads) and causes accessibility issues. If you really need to put a video on your site, there are some very useful compression tools available, such as Handbrake software. You can also choose to compress your soundtracks into MP3 format without any noticeable loss of quality using the free [Lame] encoder (https://lame.sourceforge.io/developers.php) or other free websites.
A few tips :