Image Optimization

Why is it Important?

Images significantly affect a website's performance as they are a heavy asset that can slow down page loading times. Optimizing them for responsive views and asynchronous loading can be challenging.

This is why frameworks such as Next.js or Gatsby have developed their own <Image> components to optimize image loading.

How Optimization Works

React Bricks handles all the necessary image optimizations, eliminating the need for external services.

Responsive images

Serving unnecessarily large images to mobile devices inefficiently uses network resources, especially considering that such devices often don’t have a reliable internet connection.

React Bricks creates responsive images for various screen sizes. The <Image> component of React Bricks, with the source-set attribute, delivers the most suitable image for any device size. This optimizes the usage of high-resolution displays and prevents the unnecessary transmission of large images to mobile devices.

Lazy Loading

Loading images that are below the fold (the unseen portion of the screen) unnecessarily increases the page's time-to-last-byte (TTLB), as it loads content that isn't immediately visible.

React Bricks leverages the browser native lazy load feature when available. If not, it creates a very small blur-up image that is replaced with the actual image once it enters the visible viewport.

Content Delivery Network

By bringing content closer to your users, regardless of their location worldwide, you can significantly improve the download speed of assets.

React Bricks uses a fast global CDN to deliver your images, ensuring quick loading times for all users. This feature is free and included in all plans.

No more long build times

If you have big website with lots of images and you employ Static Site Generation you know that building the website can become a very long process.

React Bricks offers a solution. With React Bricks, all image optimizations happen on our servers at upload time (using an async queue). There's no need to wait for images to optimize at build time - they're already there, at the edge, ready to be served!

A cross-platform solution

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

The <Image> component in React Bricks is cross-platform. Your bricks will function seamlessly on Next.js, Astro, Gatsby, or Remix without changing a line of code.