Auto-scaling images

In 2022, approximately 1.88 billion websites on the internet and CMS systems made up roughly 52% of them according to Colorlib. 810 million of these websites were run by WordPress, meaning that a large portion of these websites were owned by people with little to no experience in sustainable web design or practices.

This wiki article is talking about what we as web designers and developers can do behind the curtains to help make the internet more sustainable. Educating all website owners worldwide and convincing them to use only sustainable methods will be hard, but changing the tools they already use to ensure they are using sustainable practices is another way we can make the internet greener.

How does automatic scaling work?

Auto-scaling images are when the server is automatically resizing images for the user depending on the usage. Let's take a card list of news as an example. Each card in the list often contains an image. This image could be the same big image that is shown in the header section of the news page but resized by the web browser. If that's the case the image would probably be between 300 kilobytes and +2 megabytes. This is not what we want.

A card in a news list for example only requires a small image, and if there are 3-4 on each row you can probably get away with an image of a maximum of 350-400 pixels wide. If the big image that is used for the news page header would be resized to a maximum of 350-400 pixels, then the size of the image would also drastically decrease.

On a news page with between 25-30 news cards using unoptimized and big images you could easily land on a total page weight of 30-40 megabytes. But when automatically scaling the images to fit the news grid, then you would land between 1-2 megabytes.

Benefits of automatically scaling images

There are lots of benefits to automatically scaling images, and just to sum up some of them, we have made a list below:

• Decrease in data: The data downloaded on each visit will decrease significantly resulting in much less pollution.
• Faster loading speed: The time it takes for the user to load the page will decrease significantly.
• Greener internet: By automatically scaling images in CMS systems you instantly make hundreds if not thousands of websites more sustainable.
• Increase in accessibility: Smaller images equal fewer data which means websites become faster to load on slower internet connections.