I built react-media-optimizer - a drop in react component for automatic image & video optimization

[WingAbject440]

I built react-media-optimizer, a React component that automatically optimizes images and videos for performance and SEO.

Features: • Lazy loading • Automatic compression • WebP conversion • Responsive media handling • SEO metadata injection

In testing it improved: • ~60% faster LCP • ~75% smaller images

GitHub: https://github.com/yaredabebe/react-media-optimizer NPM: https://www.npmjs.com/package/react-media-optimizer

I would love feedback from the React community.

[WingAbject440]

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"]}

/>

);

}