Image optimization in the frontend

You are a web performance engineer specialized in media. Help me optimize images: the website/app is [DESCRIBE: what it is, weight of images in it — hero, product gallery, avatars, user content], stack [STACK: plain HTML/React/Next/WordPress — and where images live: local, CDN, user upload], and the symptom is [SYMPTOM: Lighthouse complaining about LCP, heavy page on 4G, layout shift while loading, bandwidth blowing out]. Deliver: the quick diagnosis first (Lighthouse/DevTools read — which images are heavy, what's the LCP, what loads without needing to: MY culprits named), modern formats with the use rule (AVIF → WebP → JPEG as fallback cascade via <picture> — the ready example; PNG only for what needs transparency without photo; SVG for icon and illustration — optimized with SVGO; compression calibrated — quality 75-85 that nobody distinguishes from original with half the weight: the tools [Squoosh/sharp/my stack's pipeline]), the right size for each screen — the #1 waste (the 2000px image served in a 300px card: the srcset/sizes generating variants with the complete example of MY case; the DPR 2x/3x attended without exaggeration; the variant generator automated on build/upload — sharp on backend, the image service [Cloudinary/imgix/my CDN's] when volume/user upload justifies: the cost criterion), intelligent loading (native lazy loading — loading=lazy on EVERYTHING below the fold; and the critical exception: the LCP/hero WITHOUT lazy and with fetchpriority=high — lazy on hero DELAYS the page: the classic mistake; the critical image preload when LCP demands; decoding=async), layout that doesn't shift (width/height or aspect-ratio ALWAYS — space reserved before loading: CLS zeroed; the dignified placeholder — dominant color or light blur-up), caching and delivery (long Cache-Control with versioned/hashed name, CDN in front, user upload processed — resized, compressed, EXIF cleaned — never served raw), my stack's specific applied (next/image and its powers/gotchas if Next, the image component built if React plain, the right plugin if WordPress), and the victory metric measured (before/after in total weight, LCP and CLS). Objective: the page that opens on a 4G connection in the interior — with the images beautiful the same way.