Introduction
Improving the performance of the website is serious business. Most people don’t realise how much standard stock photo weight.
My blog was built in Gatsby to have the best performance with images. High-quality images are huge and very heavy, that’s why we should always optimise them.
How images slow down my page?
- Heavy images a website with large images will load much slower. Each image is an additional request to the server and extra seconds to wait.
- Wrong dimensions calling down images won’t speed up your page. Each image should have a few different sizes. For example, on phones, we don’t want to load full HD images, we want to load much much smaller.
- Old file formats: Naturally, different formats are larger than others. Next-gen images are images that have superior quality and compression compared to their JPEG and PNG ancestors. We should use them whenever we can.
If you do all this stuff above, you are great! But... Did you ever think about moving further? If you are using next-gen, small, RWD-friendly images what you can do more? **Replace images with CSS**! A lot of images can be replaced with pure CSS. This is the next level of performance of your website. Consider an example with 4kB image, ten similar images weight 40kB! And of course, often overlooked - 10 additional requests to resolve.
As a developer, i’m always trying to reduce the weight of the bundled app, and this is a straightforward way to do this.
Real examples
A lot of images can be replaced with pure CSS + HTML to improve the performance of the website. All small dots, clouds, speech bubbles, shapes, stars, lines can be created without using images. I will show you two examples from real projects. let’s start!
Frontend unicorn book
On my book website - Frontend Unicorn all those rectangles are pure CSS. They are extremely easy - squares with background and shadow. When my friend and one of the best designers I know - Diana - did that layout, she wanted to cut all of these squares as one big image.
Hey! don’t do that! I will create them in CSS.
This image could waste 20-50kB and slow down the page a little bit, moreover doing it with CSS allows me to animate those squares without losing quality!
One square 37x37px as PNG weight 3KB and as SVG almost 1kB. To write it in CSS + HTML we have to use 150B/0.15kB (minified). Of course, images and SVG also need some HTML + CSS which I didn’t count 😉.
| PNG | Compresed PNG | SVG | CSS |
|---|---|---|---|
| 3kB | 1kB | 1kB | 0.15kB |
Using SVG, in this case, is also much better than PNG. We can use currentColor inside them to create more colourful squares.
All those clouds will be replaced with CSS soon.
Counter images
One of our clients asked me a few weeks ago:
For some reason I can not find the files for the number images. it’s the 1,2,3,4 & 5 circular images.
Ha! There isn’t any image. This image was created with a few lines of CSS and HTML. This is my favourite performance improvement example.
| PNG | Compresed PNG | SVG | CSS |
|---|---|---|---|
| 41kB | 13kB | 4kB | 0.5kB |
Naturally, like in the example above - images and SVG weight is counted without any styling and HTML.
This client has 5 similar images on his website, but with a different number on it. So let’s count again:
| PNG | Compresed PNG | SVG | CSS |
|---|---|---|---|
| 205kB | 65kB | 20kB | 0.5kB |
Do you see it? Five small images replaced with CSS and such an improvement!
Creating an image with 1,2,3,4 & 5 numbers creates one more problem. Accessibility. The Web Content Accessibility Guidelines (WCAG) recommended to not use images of text if you expect the text to be read by the user. You can read more here: Images of Text.
Image-to-CSS
Most of the shapes are built with single HTML element and one or two pseudo-elements :before and :after
This article begins the series Image-to-CSS about replacing images with CSS. I will teach you the basics of CSS shapes, and then we will go further into a little bit more complicated cases.
Stay tuned! 😎
