Images

Image Optimizer

from captured DOMraw

<img

src="https://framerusercontent.com/images/o4ORccJ6.webp"

alt="Hero illustration"

loading="lazy"

problems detected

no dimensionsno srcsetno blurwebp only

processoranalyzing

1920 × 1080

hero.webp · reading

dimensions detected

1920 × 1080

aspect ratio

16 / 9

rendered sizes

100vw · 50vw · 1/3

blur placeholder

generated · 28 bytes

AVIF variant

generated · 28% smaller

RECOVERED · components/Hero.tsxoptimized

import Image from 'next/image';

import hero from '@/public/images/hero.webp';

export function Hero() {

return (

<Image

src={hero}

alt="Hero illustration"

width={1920}

height={1080}

sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"

placeholder="blur"

priority

className="rounded-lg"

);

}

0 layout shifts · 28% smaller · AVIF + WebP fallback

Images

Raw captured <img> tags become next/image components: explicit dimensions to prevent CLS, sizes read from rendered breakpoints, base64 blur placeholders, and AVIF/WebP variant generation. Typical: 28% smaller bytes, zero layout shift.