Convert images to WebP or AVIF — Lovable

JPEGs and PNGs are larger than they need to be in 2026. WebP and AVIF cut sizes by 30-50% at the same visual quality — meaningful LCP improvement.

rocket_launch

Fixing this in Lovable

AI full-stack app builder (React + Vite + Supabase)

Lovable apps ship fast but skip most SEO and security basics out of the box. Paste the prompt below into your Lovable chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for Lovable

Copy and paste this into your Lovable chat exactly as-is.

Fix my Lovable app — please make these exact changes in the Lovable editor:

Use modern image formats

1. Convert JPEG/PNG images to WebP or AVIF format.
2. Use <picture> element with fallback for older browsers.

Why this matters

Modern image formats are the #1 lever for image-heavy pages. A 2MB hero JPEG becomes a 500KB WebP with no visible quality loss — ~1.5 seconds off LCP on mobile.

Every modern browser supports WebP (99%+ coverage). AVIF has lower support but is 30% smaller than WebP when it works.

How to use this prompt in Lovable

1. Open your Lovable project.
2. Copy the prompt above with the copy button.
3. Paste into the Lovable chat and send.
4. Review the diff, accept the changes, redeploy.
5. Verify the fix using the checklist below.

Common mistakes to avoid

error_outlineConverting but keeping JPEG originals as the primary format.
error_outlineOver-compressing — artifacts become visible.
error_outlineNot using `<picture>` with fallback for safety.

How to verify the fix worked

check_circleChrome DevTools → Network → Img type → sizes reduced.
check_circleLighthouse → "Serve images in next-gen formats" passes.
check_circlePageSpeed Insights shows image opportunities gone.

Frequently asked questions

WebP or AVIF?expand_more

WebP for universal compatibility. AVIF if you want extra compression and are okay with a `<picture>` fallback for Safari edge cases.

Do I lose quality?expand_more

At sensible quality settings (75-85), visually imperceptible. Over-compression is visible.

Want all 34 prompts tailored to your Lovable site?

Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.

Scan my site

Related Lovable prompts

Performance