How to Fix "Serve Images in Next-Gen Formats" in WordPress (Without a Plugin)

What "Serve Images in Next-Gen Formats" Actually Means

Lighthouse flags this audit when your page serves images in older formats (typically JPEG/PNG) that could be materially smaller if you served them as modern formats like WebP or AVIF.

The key idea isn't “WebP is magic.” It's that smaller image payloads reduce the amount of data the browser must download before it can paint the page. This is why it shows up next to LCP: if your LCP element is a 900KB JPEG hero, you're asking the browser to download a big file before you can “look fast.”

Why this shows up next to LCP

Largest Contentful Paint (LCP) measures how long it takes for the largest element in the viewport (often a hero image, featured image, or large banner) to render.

So if your LCP element is a 900KB JPEG hero, you're effectively asking the browser to download and decode a big file before you can “look fast.” Convert that hero to WebP/AVIF, and you often reduce transfer size enough to move LCP in the right direction (especially on mobile connections).

Why More Image Plugins Often Make Things Worse

I'm not anti-plugin. I'm anti “three plugins doing the same job with different defaults.” The most common failure mode we see on WordPress performance audits involves a stack that creates real costs:

• More CPU load (image processing inside your hosting environment).
• More moving parts (updates, conflicts, weird edge cases with themes).
• More media clutter (duplicate files, “-scaled” variants, “backup-originals” folders).

If you want a clean backend, a plugin-free workflow is simple: only upload optimized images in the first place.

The Clean External Workflow (Mochify)

Mochify is built for exactly this: pre-optimizing images before they ever hit WordPress. Here is the workflow we recommend:

1. Export or identify your hero and key content images (the ones PageSpeed calls out).
2. Drag them into Mochify, convert JPG/PNG → WebP or AVIF, and compress.
3. Download the optimized files and re-upload to WordPress, replacing the originals in your content/theme.

Why Mochify fits this job:

• Images are processed in memory and discarded immediately-no disk storage, no retention.
• Mochify runs a high-performance C++ engine for fast conversions and compression.
• You can process up to 25 images in parallel in a batch (for free), which makes "cleaning up" a page or a small library realistic in one sitting.

Step-by-Step: Fixing One Template/Page

Pick one page that matters commercially - homepage, a top category, or a best-selling product page. We're going to fix that page, not "optimize your whole site" in theory.

<picture>
    <source type="image/avif" srcset="/images/hero.avif">
    <source type="image/webp" srcset="/images/hero.webp">
    <img src="/images/hero.jpg" width="1600" height="900" alt="Your descriptive alt text">
</picture>

Best-Practice Settings & Dimensions

This is where most WordPress sites quietly lose: they upload a beautiful 5000px-wide image, then let WordPress generate a dozen derivatives, and still end up serving something too heavy for the first viewport.

Below is a cheat-sheet you can use as a starting point (not dogma-test against your theme layout and audience).

Two rules I use in audits:

1. If an image is above the fold, you should be able to justify its byte cost.
2. If an image is below the fold, don't let it be larger than the above-the-fold hero.

A Small Format Comparsion (Example)

Here's what "serve images in next-gen formats" looks like in practice-same visual image, different encodings.

The point isn't chasing perfect numbers - it's removing hundred of kilobytes from the crtical rendering path.

Measuring the Impact (Before vs. After)

After you replace the images:

1. Run PageSpeed Insights again on the same URL.
2. You should see "Serve images in next-gen formats" disappear from the Opportunities section.
3. Check your LCP metric - it should improve, often by a significant margin (especially on mobile).
4. If you use Core Web Vitals in Google Search Console, you may see an improvement there as well after Google re-crawls your page.

A simple before/after story (example)

• Before: hero JPEG ~900KBl LCP ~3.2s (mobile).
• After: hero AVIF ~180KB LCP ~2.1s (mobile).

Treat those numbers as an illustration, not a promise. But the mechanism is real: LCP is driven by the render time of the largest viewport element, and on many WordPress sites that element is an image.

When You Might Want Automation (Mochify Pro)

The manual workflow is perfect for:

• A handful of high-traffic pages.
• A small catalog.
• A publisher cleaning up top posts once per quarter.

But if you're processing thousands of product images, running multiple client sites, or building a CI-style media pipeline, you eventually want automation.

That's where Mochify Pro fits:

• An API for high-volume, automated conversion/compression.
• Parameters to fine tine quality and size.

Importantly, the privacy model doesn't change: Mochify is designed around in-memory processing and immediate discard-accounts would store settings and keys, not your images.