It’s easy to overlook that something intangible like the internet consumes a lot of energy. In fact, Mozilla’s 2018 Internet Health Report stated that: The Internet’s data centers alone may already have the same CO2 footprint as global air travel.

As technology improves and businesses seek to stand out, websites have become quite advanced. These sites may look good on the developer’s computer or while using the office’s fast internet, but the typical user may have a less pleasant experience.

One of the heftiest contributors to a website’s weight — and carbon footprint — is the image. But did you know there’s a lightweight alternative that is also capable of driving emotion and engaging your users? This pen shows two examples of how to use SVGs to improve site speed, reduce environmental impact, and engage users.

Enjoy!

The following is my SCSS code that I use to rapidly develop WordPress sites or create prototypes around the office. It’s lean, typographically focused, and continues to improve as I learn new things. Check it out for yourself!