PNG to AVIF for Web Performance — Improve PageSpeed and LCP

Google PageSpeed Insights frequently flags images with the warning: "Serve images in next-gen formats." The recommended format in that audit is AVIF — ahead of WebP and far ahead of PNG or JPG.

Converting your largest PNG images to AVIF is one of the highest-impact, lowest-effort changes you can make to improve your site's Core Web Vitals score, particularly Largest Contentful Paint (LCP). This guide covers why AVIF helps, how to implement it, and how to handle browser compatibility.

Why AVIF Improves PageSpeed Scores

Google PageSpeed (Lighthouse) gives image-heavy sites low scores partly because PNG and JPG files are large — large files take longer to download, which delays page rendering and pushes up LCP times.

AVIF addresses this directly:

• A 500 KB PNG hero image converted to AVIF might become 80–150 KB at quality 60. That's 350+ KB less data the browser must download before it can render the page.
• Faster download = lower LCP = better PageSpeed score.
• Google's image audit specifically recommends AVIF as the preferred next-gen format because of its superior compression vs WebP and JPG.

Even replacing just the two or three largest images on a page with AVIF can move a PageSpeed score from the 60s into the 80s+.

How to Implement AVIF on Your Website

The safest way to serve AVIF with a fallback for unsupported browsers is the HTML picture element:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="Your description" width="1200" height="630">
</picture>

The browser uses the first format it supports. Chrome, Firefox, and Edge (and Safari 16+) will load the AVIF. Older browsers fall back to WebP, then to the PNG if needed.

For background images in CSS, use feature queries:

/* Default fallback */
.hero { background-image: url('hero.png'); }

/* Override for AVIF-capable browsers */
@supports (background-image: url('.avif')) {
  .hero { background-image: url('hero.avif'); }
}

Sell Custom Apparel — We Handle Printing & Free Shipping

WordPress: Serving AVIF Without a Paid Plugin

WordPress 6.5 added native AVIF upload support. If your WordPress site is on 6.5 or later:

1. Convert your PNG images to AVIF using the free WildandFreeTools converter.
2. Upload the AVIF files to your WordPress media library directly — WordPress accepts them without any plugin.
3. Insert the AVIF images into your posts and pages normally via the block editor.

For sites on WordPress 6.4 and earlier, you have two options without a paid plugin:

• Use the free ShortPixel Adaptive Images plugin — it rewrites image URLs to serve AVIF to supported browsers automatically.
• Manually add the MIME type to your server: add AddType image/avif .avif to your .htaccess (Apache) or the equivalent Nginx config block.

The WordPress AVIF migration guide covers this in detail.

Which Images to Convert First for Maximum PageSpeed Impact

Not all images on a page have equal impact on performance. Prioritize in this order:

1. Hero image or above-the-fold image — this is usually the LCP element. Converting it to AVIF has the biggest effect on your LCP score.
2. Largest images by file size — run PageSpeed Insights and look at the "Serve images in next-gen formats" audit. It lists images by size — start at the top.
3. Images visible on initial load — images in the visible viewport get loaded immediately. Images below the fold are lazily loaded and have less impact on LCP.
4. Repeated images — if a logo or background tile appears on every page, converting it benefits every page load.

Converting just the top 3–5 largest images to AVIF typically resolves the "next-gen formats" audit warning in PageSpeed.

Frequently Asked Questions

Will switching to AVIF break my images in older browsers?

Not if you use the HTML picture element with a fallback. Older browsers that don't support AVIF will load the PNG or WebP version. Only modern browsers receive the AVIF file.

Does AVIF help with Core Web Vitals ranking?

Yes. LCP is one of the three Core Web Vitals used in Google's page experience ranking signal. Reducing image file size (which AVIF does significantly) directly reduces download time, which directly reduces LCP time.

What quality setting should I use for web performance?

Quality 55–70 is the standard range for web use. This produces AVIF files that are indistinguishable from the original PNG at normal screen sizes, while achieving maximum file size reduction.

Will converting to AVIF affect my image quality in Google Images?

Google Images indexes AVIF files and displays them normally. Quality settings of 60+ are sufficient for Google to index and display your images correctly.