react-strapi-img

react-strapi-img is a React component library and open-source tool that wraps the native img element to deliver responsive, lazyloaded, WebP-capable images with a base64 placeholder, purpose-built to consume image data from the Strapi CMS.

What is react-strapi-img?

react-strapi-img is a React component that takes image metadata from Strapi—url, alternativeText, width, height, and formats—and renders a responsive image with lazy loading and a built-in placeholder. It runs in any React application (React 16.8+), works particularly well with Next.js projects, and also provides an ImageProvider context component for central configuration. The library is authored by Andreas Faust and released under the MIT License.

Key Features

• Proportional container — Wraps every image in a div that preserves the original aspect ratio when width and height are passed, preventing layout shifts.
• Lazyloading via IntersectionObserver — Uses an IntersectionObserver with configurable rootMargin (default 50px) and threshold (default 0) to defer loading until the image nears the viewport.
• Strapi formats to srcset — Converts Strapi's formats object into responsive srcset entries with width descriptors.
• WebP support — Automatically serves WebP versions of the resized images when the browser supports the format; the ImageProvider detects support once for a performance boost.
• Base64 placeholder — Shows a blurred, animated base64 placeholder while the full-resolution image loads; can be disabled with the placeholder prop.
• noscript SEO fallback — Renders a noscript tag containing the image with its src and srcset, so content remains visible to crawlers and no-JS users.
• ImageProvider context — Lets you define shared props (like prefix, onLoad, onError, and custom styles) at an app level instead of repeating them per image.
• TypeScript types — Exports ImageProps, ProviderProps, Formats, and ObjectFit types for typed usage.

Who is it for?

• Next.js developers working with Strapi — Integrate Strapi-uploaded images into pages with automatic srcset generation and lazy loading, without wiring up a custom image component.
• React developers who care about Core Web Vitals — Get decode-before-render behavior, a proportional wrapper to avoid layout shift, and IntersectionObserver-based loading for smaller initial payloads.
• Teams building styled-components design systems — Use the style, stylePlaceholder, and styleImg props to style the wrapper and image tags with styled-components template literals.

What can you do with react-strapi-img?

• Display Strapi images with responsive breakpoints — Pass the formats object and the component generates a srcset from 400px up to 3000px in 200px steps (matching the resizing script provided).
• Create custom aspect-ratio crops — Use proportionalHeight along with objectFit and objectPosition to crop images to a custom ratio.
• Centralize image settings in Next.js — Wrap _app.tsx in ImageProvider to set a production prefix for all image URLs and attach global handlers.

How does react-strapi-img work?

To use it, copy the services folder from the package into your Strapi project's /extensions/upload directory; this resizes every uploaded image to base64 plus sizes from 400px to 3000px in 200px increments. Then fetch the image data via GraphQL (or REST) and pass url, alternativeText, width, height, and formats to the Image component. The component renders a proportional wrapper, a blurred base64 placeholder, a lazyloaded img with srcset, and a noscript fallback; once loaded, the placeholder is replaced by the full image.

FAQ

Is react-strapi-img stable enough for production?

The library is in beta; its API can change without warning. The author states that everything works so far but needs more testing before a 1.0.0 release.

What are react-strapi-img's peer dependencies?

It requires react and react-dom version 16.8.0 or higher and styled-components version 5.2.0 or higher.

Does react-strapi-img work with Next.js?

Yes. The README shows using ImageProvider inside a Next.js _app.tsx file to set global props and detect WebP support. It works in any React app that meets the peer dependencies.

How do I set up automatic image resizing in Strapi?

Copy the services folder from the react-strapi-img repository to your Strapi folder at /extensions/upload. The scripts will resize every uploaded image to base64 and to sizes from 400px to the original image width in steps of 200px, capped at 3000px.

Does react-strapi-img use WebP automatically?

Yes. It uses WebP format if the browser supports it. The ImageProvider detects WebP support once and shares that result with all Image components.

Alternatives

react-cool-img is a similar React image component that also handles lazy loading and placeholders; the author of react-strapi-img credits it as a source of learning and adaptation.