Image Optimization and CDN

React Bricks optimizes your images at upload time and serves them from a global CDN. This eliminates long build times and the need for external services.

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 necessary image optimizations, eliminating the need for external services.

Responsive images

Serving large images to mobile devices wastes network resources, especially considering that such devices often have unreliable internet connections.

React Bricks creates responsive images for various screen sizes. Its <Image> component, with the source-set attribute, delivers the most suitable image for any device size. This optimizes the use of high-resolution displays and prevents 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 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. Additionally, you have the option to use a custom domain for your CDN assets.

No more long build times

If you have a large website with many images and use Static Site Generation, you know that building the website can become a lengthy process.

React Bricks offers a solution. 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 at the edge, ready to be served!

A cross-platform solution

When you start using Next.js or Gatsby’s <Image> component, you need to learn how it works and the potential pitfalls with some CSS layouts. When you switch platforms, 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, Gatsby, or Remix without changing a line of code.