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.
React Bricks takes care of all the image optimization for you, without the need for any external service.
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.
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.
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.
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!
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.
Be the first to discover our latest news. No spam, promise.