Image Optimization in Headless WordPress: Beyond next/image

WordPress is notorious for bloated images. Editors upload 5MB photos from their phone, and suddenly your site loads like it’s 2010.

In headless WordPress, you have a unique opportunity to fix this at the framework level.

The WordPress Media Problem

Traditional WordPress generates multiple image sizes on upload. But these sizes are often wrong for modern responsive design. You end up with dozens of unused files cluttering your media library.

Plus, WordPress doesn’t handle modern formats (WebP, AVIF) or responsive srcsets particularly well.

The Next.js Solution

Next.js Image component handles optimization automatically:

• Serves modern formats (WebP/AVIF) to supporting browsers
• Generates responsive srcsets on-demand
• Lazy loads by default
• Prevents layout shift with automatic sizing

But you need to configure it correctly for WordPress.

FlatWP’s Approach

We create a custom image loader that:

1. Pulls the original image from WordPress
2. Proxies it through Next.js optimization
3. Caches the optimized versions globally
4. Serves from Vercel’s edge network

The result? A 5MB WordPress upload becomes a 50KB WebP delivered in milliseconds.

Configuration

In your next.config.js:

images: {
  domains: ['cms.flatwp.com/'],
  formats: ['image/avif', 'image/webp'],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920],
}

Then use it in components:

<Image
  src={post.featuredImage.url}
  alt={post.featuredImage.alt}
  width={1200}
  height={630}
  priority={isAboveFold}
/>

WordPress-Side Optimization

Even better: prevent bloated uploads in the first place. Our WordPress plugin includes:

• Upload size limits
• Automatic compression before upload
• Warnings when images exceed recommended dimensions
• Bulk optimization tools for existing media

Performance Impact

We measured a typical blog post with 5 images:

• Traditional WordPress: 2.3MB transferred, 4.2s load
• FlatWP optimized: 180KB transferred, 0.8s load

That’s a 92% reduction in bandwidth and 5x faster load times. For free.