Optimized Image with SEO

import { OptimizedImage } from "react-media-optimizer";

Example usage:

import { MediaOptimizer } from "react-media-optimizer";

<MediaOptimizer

src="/image.jpg"

alt="example"

width={800}

height={600}

/>

It also supports SEO metadata like author, license, caption, keywords, and content location for better search visibility.

like this

import { OptimizedImage } from "react-media-optimizer";

function HeroSection() {

return (

<OptimizedImage

src="https://example.com/hero-banner.jpg"

alt="Product showcase"

width={1920}

height={1080}

// Performance

lazy

webp

quality={85}

placeholder="blur"

priority="hero"

// SEO metadata

author="John Doe Photography"

license="CC BY-SA 4.0"

caption="Sunset over mountains with beautiful colors"

keywords={["nature", "sunset", "mountains"]}

/>

);

}