Improving website by replacing images with CSS

A lot of images can be replaced with CSS.

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

Frontend unicorn book. New book about becoming frontend unicorn - developer better than regular.

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 😉.

PNGCompresed PNGSVGCSS
3kB1kB1kB0.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.

PNGCompresed PNGSVGCSS
41kB13kB4kB0.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:

5 PNG5 Compresed PNG5 SVG5 CSS
205kB65kB20kB0.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! 😎

Join my newsletter for regular updates every two weeks

© Albert Walicki 2021