Chunky pictures
When I look at a website’s carbon footprint, the biggest culprits adding weight to the page are often the images. Which makes sense: it takes more power to reproduce a detailed photo than lines of text.
So how can you lighten the load? Here are the steps I follow and recommend to my clients.
1. Do you need this image?
When you are designing a page or uploading a post, consider the content with care. Each element must be doing a job and earning its place.
This doesn’t mean you’re only allowed infographics. A picture’s job could be ‘building trust by showing the team’s faces’ or ‘helping the visitor differentiate between these two services’. Don’t let the job be ‘to make things look nice’ or ‘because there was a space’.
When we think of minimalism sometimes we get an image of a stark white cube of a room. What it actually means is having exactly what you need to achieve your aims and nothing more. A minimalist website can be colourful, energetic and engaging. It just won’t be wasteful.
So before you think about uploading an image in a lower-carbon way, think about whether you need it at all.
2. Choosing the right image type
If you decide you do need a visual element on a page, does it need to be a photo? Some jobs can be done by a graphic or an icon. And these can be created as file types that are really light.
There are lots of different image file types, but here’s a quick guide to some common ones that are probably most useful to you:
SVG
SVG files are great for icons, logos and simple illustrations. The S stands for scaleable, which means you can have them tiny or massive and they never go blurry. They’re generally only a handful of kb in size and you can whack them straight on your site without going through the optimisation steps I outline below.
PNG
PNGs are best for images that contain both pictures and text, like infographics. They’re also the right choice if your image has a transparent background. They can be pretty large files, though so generally save them for these two uses.
JPEG
JPGs or JPEGs are best for photos without text. Basically any image that I haven’t mentioned in the previous few paragraphs.
Once you have your image saved as the right type of file, you’re ready to upload. If it’s an SVG, get it straight on your site. If it’s a PNG or JPEG, follow the steps below.
3. Size
Your image only needs to be as big as the biggest size it will get displayed at. If you have a lovely high resolution picture that’s 4000 pixels wide but it’s in a column next to some text, even the hugest desktop screen it won’t ever be seen at more than about 1500 pixels wide. You’re using twice the amount of energy you need to.
Here’s a very rough guide to the maximum size you need for different image types:
- Full width hero image: 2560px
- Blog post featured image: 1500px
- Large image: 1200px
- Team profile images in small circles: 500px
- Large icons (though these are best as SVGs): 300px
Most tools you use for looking at an image should be able to resize them. I use Preview on my Mac to do this. You go to ‘tools’ > ‘adjust size’ and enter your dimensions. If you use Windows, you can open it in Photos and click the three dots > ‘resize image’. Canva, Photoshop or Gimp will also work.
4. Compress
Now we need the help of the magic panda.
Go to tinypng.com and drag your nicely sized image into the dotted box. You can do up to 20 at a time. Click the JPEG or PNG logo to the right of the file or the ‘download all images’ button if you did more than one.
That’s it! Your newly downloaded pictures look the same but the file size is smaller because it’s been compressed.
5. Optimise
Sorry to my Squarespace and Wix people, but this step isn’t for you. Those builders do have built-in optimisation, so it is happening, you just don’t have as much control over the levels.
If you’re on WordPress, you can get a plugin which shows your images to visitors in the most efficient way possible. The plugin can further compress the images, use a CDN to ensure your images are travelling a shorter distance to your visitor, and convert PNGs and JPEGs to WebP format, which is way lighter. The features you get – and whether you get them for free – depends on the one you choose. Here’s a comparison of some popular image optimisation plugins.
Once you’ve chosen, simply install and follow the set up instructions to optimise your images.
Recap: how to upload images to your site to minimise carbon emissions
The steps you need to follow are:
- Decide if the image deserves to be on your site
- Pick the best file type
- Make it the right size
- Compress the file
- Optimise image delivery
If you get stuck or something isn’t clear you can email me at hello@mollygetsitdone.com. I can help you out and improve this post, huzzah!
