The new wave of AI tools is genuinely impressive. You describe a landing page, a SaaS dashboard, or a portfolio, and in minutes you get clean layouts, modern components, and surprisingly good copy.
Cursor, Claude, v0 by Vercel, Lovable, Bolt, and a dozen others can now produce production-looking interfaces. The design part is largely solved.
The images? Still a disaster.
Why AI Tools Still Fail at Images
Most AI website builders and coding assistants treat images as an afterthought. They typically:
- Pull high-resolution Unsplash or placeholder images without any compression
- Export screenshots or generated assets as PNG (even when they don’t need transparency)
- Ignore modern formats completely (AVIF / WebP)
- Forget to set proper
width,height, orfetchpriority - Serve the same huge image to mobile and desktop
The result is a site that looks sharp in the preview… and then collapses under its own weight once real users hit it on mobile networks.
The Real Cost in 2026
Google’s Core Web Vitals still heavily penalize slow Largest Contentful Paint. On most AI-generated pages the LCP element is an image — usually a hero or product shot that is 800 KB–2 MB.
We’ve audited dozens of sites built with these tools in the last few months. Common findings:
- Hero images regularly 1.2–2.4 MB
- No responsive images or
srcset - PNG used for photographs (the worst possible choice)
- Zero AVIF or even WebP delivery
Fixing just the images often improves LCP by 1.5–3 seconds and jumps the PageSpeed score by 25–40 points.
How to Fix AI-Generated Images Properly
You don’t need to redesign anything. You just need a short, disciplined post-processing step.
1. Convert everything to modern formats
Photographs and complex images → AVIF (primary) + WebP fallback
Simple graphics / icons with transparency → WebP or optimized PNG
2. Use the correct markup
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="https://file-hosting.dashnexpages.net/webp/hero.jpg" alt="..." width="1200" height="630" fetchpriority="high" loading="eager">
</picture>
3. Resize aggressively
A 2400 px wide hero on a mobile screen is pure waste. Serve 2–3 sizes with srcset and let the browser choose.
4. Compress with the right quality
AVIF quality 45–55 is usually visually indistinguishable from the original for web use, while cutting file size dramatically.
A Simple Workflow That Actually Works
- Let the AI generate the full page (including placeholder images).
- Download every image that matters.
- Run them through an AVIF/WebP converter (or a proper build step).
- Replace the original
<img>tags with the<picture>pattern above. - Add explicit dimensions and
fetchpriority="high"on the LCP image.
This 10–15 minute cleanup routinely turns an AI site from “pretty but slow” into something that scores 90+ on mobile.
The Bigger Picture
AI is excellent at layout, components, and copy. It is still mediocre at performance decisions — especially around images. That gap is your opportunity.
The developers and freelancers who treat image optimization as a non-negotiable final step are shipping sites that feel dramatically faster than the ones that just accept whatever the AI spat out.
In 2026, “AI-built” is no longer impressive by itself. “AI-built + properly optimized” is.