Images are critical. Whether it is marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are often heavy files making them the single biggest contributor to the page bloat. According the HTTP Archive’s State of Images report, the median page size on desktops is 1511 KB and images account for nearly 45% (650 KB) of that total.

That said, it’s not like we can simply do away with images. They’re too important to the overall user experience. Instead, we need to make our web pages load really fast with them. In this guide, we will cover all of the ins and outs of

Generating SVGs from images can be used for placeholders. Keep reading!

I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.

During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.

While many developers still use CSS to style their React apps, writing styles in JavaScript has become an increasingly popular practice as it gives all of the conveniences of CSS preprocessors without the need to learn a new language.

Most CSS-in-JS libraries involve creating a JavaScript object of styles. As an example, this is what a style object looks like using my preferred library, Aphrodite.