Seoxpert.io
Get started
mediumBest Practices

Legacy Image Formats Detected

Legacy image formats like PNG, JPG, and GIF are detected on your site. These formats are less efficient than modern alternatives like WebP and AVIF, leading to

By Seoxpert Editorial · Published · Updated

Why it matters

Using legacy formats prevents you from taking advantage of superior compression in WebP and AVIF. This results in larger file sizes, slower page loads, and poorer Core Web Vitals scores, particularly affecting Largest Contentful Paint (LCP). Faster image delivery improves user experience and SEO rankings.

Impact

Serving images in outdated formats increases bandwidth usage, slows down page rendering, and can negatively impact SEO performance by harming user experience and Core Web Vitals metrics. This can lead to lower search rankings and reduced site engagement.

How it's detected

Automated SEO tools, Lighthouse audits, or manual code reviews identify image URLs ending in .jpg, .jpeg, .png, or .gif without modern format alternatives. Tools may flag these resources when more efficient formats are available.

Common causes

  • •Images uploaded directly from cameras or design tools without conversion to modern formats
  • •Lack of automated image optimization in the build or deployment pipeline
  • •CDN or hosting provider not configured to serve or convert images to WebP/AVIF
  • •CMS or e-commerce platforms not supporting modern image formats by default
  • •Developers unaware of browser support for modern formats

How to fix it

Convert your images to WebP or AVIF using tools like ImageMagick, Squoosh, or Sharp. Update your HTML to use the <picture> element with <source> tags for modern formats and a fallback <img> tag for legacy support. Configure your CDN or server to serve WebP/AVIF when supported by the client. Regularly audit your image pipeline to ensure new uploads are optimized.

Code examples

Legacy image format usage (problem)

<img src="/images/banner.jpg" alt="Banner">

Modern image format with fallback (solution)

<picture>
  <source srcset="/images/banner.avif" type="image/avif">
  <source srcset="/images/banner.webp" type="image/webp">
  <img src="/images/banner.jpg" alt="Banner">
</picture>

Node.js image conversion with Sharp (solution)

const sharp = require('sharp');
sharp('input.jpg')
  .toFormat('webp')
  .toFile('output.webp', (err, info) => {
    if (err) throw err;
    console.log('Converted to WebP:', info);
  });

FAQ

How do I know which images are using legacy formats on my site?

You can use tools like Google Lighthouse, PageSpeed Insights, or automated SEO crawlers to scan your site for images with .jpg, .jpeg, .png, or .gif extensions. These tools will flag images that are not served in modern formats like WebP or AVIF.

Will converting all images to WebP or AVIF break image loading in older browsers?

No, as long as you use the <picture> element with appropriate <source> tags for modern formats and a fallback <img> tag for legacy formats, browsers that do not support WebP or AVIF will load the fallback image.

Is it necessary to keep the original JPG or PNG files after converting to WebP/AVIF?

Yes, you should keep the original files as fallbacks for browsers that do not support WebP or AVIF. The <picture> element allows you to specify multiple sources, ensuring compatibility.

Can I automate image format conversion during deployment?

Yes, you can integrate image optimization tools like Sharp, ImageMagick, or Squoosh into your build or deployment pipeline to automatically convert images to modern formats.

Do all CDNs support automatic conversion to WebP or AVIF?

Not all CDNs support this feature by default. Check your CDN's documentation to see if it can automatically serve images in modern formats based on client support, or if you need to handle conversion yourself.

What if my CMS does not support WebP or AVIF?

If your CMS lacks native support, consider using plugins or external optimization services that add WebP/AVIF support, or handle conversion and HTML markup manually.

Related Issues

Pages with Many Images – Review Alt Text

Pages with many images are at elevated risk of missing or poor alt text, which affects both accessibility and image-search traffic.

low
Pages with Excessive Image Count

Pages with excessive image counts load more than 30 images, leading to increased HTTP requests, higher bandwidth usage, and slower page performance. This can ne

low

Found this issue on your site?

Run a scan to see if Legacy Image Formats Detected affects your pages.

Scan my website →