DEV Community

NextBlock
NextBlock

Posted on

Next-Gen Image Performance in NextBlock CMS

At NextBlock, we believe a fast website is a better website. A huge part of that is how we handle images. In Phase 1 of our roadmap, we're implementing a three-tiered strategy for advanced image optimization to ensure your sites have superior perceived performance and top-tier Core Web Vital scores.

Next.js Component: We're using the powerful built-in component to handle automatic resizing, optimization, and prevention of Cumulative Layout Shift (CLS).
AVIF Format Support: We're enabling AVIF support in our Next.js configuration. This next-gen format can serve images that are ~20% smaller than WebP, meaning faster downloads and less data usage for your visitors.

Blur-Up LQIP Placeholders: We're implementing placeholder="blur" to create beautiful, low-quality image placeholders (LQIPs). Users will see a silky-smooth, blurred preview that gracefully transitions to the full-resolution image, making your pages feel faster and more professional.

This combination ensures that every image in your NextBlock-powered site is delivered as efficiently as possible, contributing to our goal of being the fastest CMS available.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.