Self-Hosted Images

Host your own image files? Point the component at each source directly. No CDN required.

Basic Usage

The simplest setup uses just three props: a source image, a placeholder for the loading state, and a fallback in case something goes wrong.

import { OptimizedImage } from "react-pro-image";

function Gallery() {
  return (
    <OptimizedImage
      src="/photo.jpg"
      placeholder="/photo-tiny.jpg"
      fallback="/photo-fallback.jpg"
      alt="A scenic landscape"
      width={800}
      height={400}
    />
  );
}

src The path to your image file. This is the baseline source, always required when using manual mode.

placeholder A tiny, low-resolution version of the image shown instantly while the full image loads. It fades out automatically once loading is complete.

fallback A backup image displayed if the primary source fails to load (network error, missing file, or broken URL). Prevents a broken image icon from ever appearing.

Serve Modern Formats Automatically

If you have pre-generated AVIF and WebP versions of your images, pass them alongside src. The component checks what the visitor's browser supports and picks the best available format. No extra code needed on your end.

<OptimizedImage
  src="/photo.jpg"
  avifSrc="/photo.avif"
  webpSrc="/photo.webp"
  placeholder="/photo-tiny.jpg"
  fallback="/photo-fallback.jpg"
  alt="A scenic landscape"
  width={800}
  height={400}
/>

---

The component follows a simple priority order based on browser support:

AVIF, WebP, JPEG / PNG

It tries the smallest, most efficient format first. If the browser does not support it, it moves to the next one. src is always the final fallback.

info

You do not need all three formats. Provide only the ones you have and the component gracefully falls back to whatever is available.

avifSrc Path to the AVIF version of the image. Used first when the browser supports AVIF, typically 30-50% smaller than JPEG at the same quality.

webpSrc Path to the WebP version. Used when the browser supports WebP but not AVIF. Widely supported across all modern browsers.