React Smart Image Gets a Major Upgrade: More Performance, More Control, Better Developer Experience

What’s New?

The latest release adds several powerful capabilities:

• Priority image loading for better LCP
• Aspect ratio support for CLS prevention
• AVIF and WebP format detection
• Click-to-zoom and fullscreen viewing
• Inline magnification and cursor-following magnifier
• Image prefetching
• Responsive image prefetching
• Configurable loading transitions
• Application-wide defaults with SmartImageProvider
• Reusable image presets
• Object-fit and object-position support
• Image download progress tracking
• Viewport visibility tracking
• Improved cache-aware load information

Let’s look at the major additions.

1. Priority Loading for Better LCP

Hero images are often among the most important elements on a page, especially when they appear above the fold.

The new priority prop allows you to tell React Smart Image that an image should be loaded immediately.

<SmartImage

  src="/images/hero.jpg"

  priority

  alt="Hero image"

/>

‍

When priority is enabled, the component uses eager loading, high fetch priority, and image preloading where appropriate.

Responsive images can also use responsive preload information so the browser can start fetching the appropriate candidate earlier.

This is particularly useful for:

• Hero banners
• Main product images
• Landing-page visuals
• Featured content

The goal is simple: get important images onto the screen as early as possible.

2. Aspect Ratio to Prevent Layout Shifts

Images loading after the initial page render can cause content to jump around.

The new aspectRatio prop reserves the required space before the image finishes loading.

<SmartImage

  src="/images/product.jpg"

  aspectRatio={16 / 9}

  alt="Product"

/>

‍

You can also provide a CSS value:

<SmartImage

  src="/images/banner.jpg"

  aspectRatio="16 / 9"

  alt="Banner"

/>

‍

This helps create a more stable layout and can reduce Cumulative Layout Shift (CLS).

3. AVIF + WebP Support

Modern image formats can significantly reduce image size while maintaining visual quality.

React Smart Image now supports AVIF detection through the new avif prop.

You can also use:

<SmartImage

  src="/images/photo.jpg"

  format="auto"

  alt="Photo"

/>

‍

With format="auto", the component checks formats in this order:

AVIF → WebP → Original

This gives developers an easy way to adopt modern image formats without manually implementing format detection.

4. Click-to-Zoom and Advanced Image Viewing

Images often need to be viewed at a larger size—especially in product catalogs, galleries, portfolios, and documentation.

The new zoom system introduces multiple viewing modes.

<SmartImage

  src="/images/product-thumb.jpg"

  zoom

  zoomSrc="/images/product-large.jpg"

  alt="Product"

/>

‍

The available modes include:

• lightbox — opens the image in a modal
• fullscreen — opens the image with fullscreen support
• inline — magnifies the image in place
• magnifier — provides a cursor-following magnifying lens

You can also customize animations, toolbar actions, scale, captions, backdrop behavior, and close controls.

High-Resolution Zoom Images

One particularly useful feature is zoomSrc.

Your page can load a smaller image normally while opening a separate high-resolution image when the user zooms.

<SmartImage

  src="/images/product-small.jpg"

  zoom

  zoomSrc="/images/product-large.jpg"

/>

‍

This helps avoid unnecessarily downloading large images before the user actually needs them.

5. Image Prefetching

Sometimes you know an image will probably be needed soon.

For example, when displaying a gallery, you can preload the next image before the user navigates to it.

<SmartImage

  src="/images/next-product.jpg"

  prefetch

  alt="Next product"

/>

‍

There is also a standalone helper:

prefetchImage("/images/next-product.jpg");

‍

This can be useful for:

• Galleries
• Carousels
• Product catalogs
• Image sliders
• Next/previous navigation

React Smart Image can also prefetch a separate zoomSrc when zoom functionality is enabled.

6. Configurable Image Transitions

Image loading doesn't have to be limited to a simple fade.

The new transition prop supports multiple animation styles:

• none
• fade
• flip
• rotate
• grow
• scale
• slide-up
• slide-left
• reveal

For example:

<SmartImage

  src="/images/photo.jpg"

  transition="reveal"

  transitionDuration={400}

  alt="Photo"

/>

‍

You can also use the convenient fade shorthand:

<SmartImage

  src="/images/photo.jpg"

  fade

  alt="Photo"

/>

‍

This gives developers more control over how images appear without having to build custom CSS animations for every implementation.

7. SmartImageProvider

When an application contains dozens or hundreds of images, repeating the same props everywhere can become difficult to maintain.

The new SmartImageProvider allows you to define shared defaults once.

<SmartImageProvider

  defaults={{

    responsive: true,

    transition: "fade",

    retry: 2,

    placeholder: "blur"

  }}

>

  <App />

</SmartImageProvider>

‍

Now all SmartImage components inside the provider can inherit these settings.

Individual component props can still override the provider defaults.

This makes it easier to maintain consistent image behavior across an entire application.

8. Reusable Image Presets

Different images often need different configurations.

For example:

• Hero images need priority loading
• Product images need zoom
• Avatars may need specific cropping
• Gallery images may need prefetching

Instead of repeating configurations, you can create reusable presets.

const presets = createImagePresets({

  hero: {

    priority: true,

    aspectRatio: "16 / 9"

  },

  product: {

    zoom: true,

    transition: "fade"

  },

  avatar: {

    objectFit: "cover"

  }

});

‍

Then use them directly:

<SmartImage

  preset="product"

  src="/images/product.jpg"

  alt="Product"

/>

‍

The resolution order is:

Component props → Preset config → Provider defaults → Library defaults

This makes large applications much easier to configure consistently.

9. Object Fit and Object Position

Images don't always need to display naturally inside their container.

The new objectFit and objectPosition props provide direct control over image cropping.

<SmartImage

  src="/images/banner.jpg"

  objectFit="cover"

  objectPosition="top"

  alt="Banner"

/>

‍

This is particularly useful for:

• Profile images
• Product cards
• Hero sections
• Blog thumbnails
• Card layouts

10. Track Image Download Progress

Large images can take noticeable time to download.

The new onLoadProgress callback provides byte-level loading information:

<SmartImage

  src="/images/large-image.jpg"

  onLoadProgress={({ loaded, total, progress }) => {

    console.log(progress);

  }}

  alt="Large image"

/>

‍

This makes it possible to build custom progress indicators for large assets.

The feature works when the browser supports fetch and ReadableStream, with the appropriate same-origin or CORS configuration.

11. Track When an Image Becomes Visible

The new onVisible callback fires the first time an image enters the viewport.

<SmartImage

  src="/images/product.jpg"

  onVisible={() => {

    console.log("Image became visible");

  }}

  alt="Product"

/>

‍

Visibility is detected with a 100px pre-load margin and works independently from the lazy setting.

This can be useful for:

• Impression analytics
• Content visibility tracking
• Custom metrics
• Gallery behavior
• Advertising measurements

‍

This gives analytics and performance monitoring systems more accurate information about image loading—even when the browser already has the image cached.

Built for Real React Applications

The goal of React Smart Image isn't to provide another simple <img> wrapper.

It's designed to bring commonly required image functionality into a single reusable component:

Performance → Loading → Responsive images → Modern formats → UX → Zoom → Prefetching → Analytics

Instead of installing multiple libraries or creating custom image logic for every project, developers can configure these capabilities directly through React Smart Image.

Upgrade Your React Image Workflow

If your React application contains hero images, product galleries, dashboards, portfolios, blogs, or other image-heavy interfaces, the latest release gives you significantly more control over how images are loaded and displayed.

You can explore the complete documentation, examples, and latest features on the React Smart Image website.

Live Demo
https://react-smart-image.netlify.app/

GitHub Repository
https://github.com/concatstring-account/react-smart-image

npm Package
https://www.npmjs.com/package/@concatstring/react-smart-image

‍

The latest release is a step toward making image optimization not just faster—but also simpler, more configurable, and easier to maintain.

FAQs