Image Optimization

React Bricks optimizes your images at upload time and serves them from a global CDN. No long build time, no external services.

Why is it important?

We all know that images play a big role in a website performance.

They are a heavy asset which can slow down the page loading time and optimizing them for responsive view and async loading can be a daunting task.

This is why frameworks like Next.js or Gatsby created their own <Image> component to optimize images.

Which optimizations?

React Bricks takes care of all the image optimization for you, without the need for any external service.

Responsive images

serving a big image on a small device sends useless bytes over the network. It is even worst when you consider that small devices have often a not-so-good Internet connection.

React Bricks create all the responsive images for the different screen sizes and the <Image> component of React Bricks, using the src-set attribute, serves the best possible image for any device size, leveraging high resolutions displays and avoiding sending uselessly big images to mobile devices.

Blur-up images

Loading images that are below the fold, in the part of the screen that is not visible, rises the time-to-last-byte (TTLB) of the page, loading content that is not actually displayed.

React Bricks creates a very small blur-up image which is replaced by the actual image when it enters the visible viewport.

CDN to improve transfer

if you can bring the content near your users, wherever they are on the world, you will make the download of assets much faster.

React Bricks leverage a global fast CDN to serve your images, so that they will load fast for all of your users. Free and included in any plans.

Say goodbye to long build times

If you have big website with lots of images and you employ Static Site Generation you know it: building the website can become a very long process which makes impossible frequent updates.

With React Bricks all the image optimizations happen on our servers at upload time(using an async queue). You don't have to wait a second to optimize your images at build time: they are already there, at the edge, ready to be served!

A cross-platform solution

When you start using Next or Gatsby's <Image> component , you have to learn how it works and the pitfalls it has with some CSS layouts. When you change platform you need to re-implement it all from scratch.

React Bricks' <Image> is cross-platform. Your bricks work as they are on Next.js, Gatsby or Remix without changing a line of code.

Porting your project from a framework to another is just a matter of 5 minutes: scaffold the project with the new framework using the CLI and move the bricks folder.