Image Optimization
React Bricks optimizes images at upload time and serves them through a global CDN, helping teams keep websites fast without adding extra image-processing services.
Image optimization in React Bricks
What it is: Image optimization reduces page weight by serving appropriately sized, lazy-loaded, CDN-delivered images.
How React Bricks handles it: React Bricks optimizes uploaded images on its servers, creates responsive versions, supports lazy loading, and serves assets through a global CDN.
Why it matters: Editors can upload rich media while developers keep pages fast without adding a separate image pipeline or slowing down builds.
Why it matters
Images are often the heaviest assets on a page, so they have a major impact on loading speed and page performance. Serving the right image size, deferring offscreen images, and delivering assets quickly can make a meaningful difference to the user experience.
That is why modern frameworks provide dedicated image components and optimization strategies. React Bricks brings the same kind of performance benefits into its visual CMS workflow and its Digital Asset Manager.
How image optimization works
React Bricks handles the main image optimizations for you, so teams do not have to build a separate image pipeline.
Responsive images
Serving large desktop-sized images to mobile devices wastes bandwidth and slows down delivery, especially on weaker connections.
React Bricks creates responsive images for various screen sizes. The React Bricks <Image> component uses a srcSet, so it delivers the most suitable image for any device size. This helps support high-resolution displays while avoiding the unnecessary transfer of oversized images.
Lazy Loading
Loading below-the-fold images too early increases page weight even though that content is not immediately visible.
React Bricks uses the browser's native lazy-loading support when available. When needed, it can also show a very small blur-up preview that is replaced by the full image when it enters the viewport.
Content Delivery Network
Delivering assets from locations closer to your users improves download speed around the world.
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 a large website with many images and use static generation, build times can become painfully long when image processing happens during deployment.
React Bricks avoids that bottleneck. With React Bricks, all image optimizations happen on our servers at upload time using an asynchronous queue. By the time your site builds, optimized images are already ready at the edge.
A cross-platform solution
Framework-specific image components can be powerful, but they can also tie your implementation to a single stack.
The <Image> component in React Bricks is cross-platform. Your bricks can work across Next.js and Astro without forcing you to redesign the image workflow for each framework. See the dedicated pages for Next.js CMS and Astro CMS.