Image format optimization helps reduce image file size by converting images to modern formats such as WebP or AVIF.

Use this guide to understand what WebP and AVIF are, when to use them, and what to check before enabling modern image output through the Pressidium Performance Plugin.

Modern image formats can reduce page weight, improve loading speed, and help performance metrics such as Largest Contentful Paint.

When to use this guide

Use this guide when you want to:

  • Understand the difference between WebP and AVIF
  • Decide which modern image format to use
  • Reduce image file size without changing page content
  • Improve performance on image-heavy pages
  • Review browser and quality considerations
  • Troubleshoot modern image output issues

If you need to configure image formats in WordPress, see Image compression settings via Performance Plugin.

Prerequisites

Before enabling WebP or AVIF output, make sure you have:

  • Administrator access to the WordPress site
  • The Pressidium Performance Plugin installed and activated
  • Image optimization enabled or ready to configure
  • A recent backup of the site
  • Original image files kept, at least during initial testing

Access image format settings

To review image format settings:

  1. Log in to your WordPress admin dashboard.
  2. Go to Performance from the left sidebar.
  3. Open Image Optimization.
  4. Review the available output format options.
  5. Check whether WebP, AVIF, or both are available in your environment.

The exact output options may depend on your plugin settings and server image processing support.

What WebP is

WebP is a modern image format designed to reduce image file size while keeping good visual quality.

It is commonly used for:

  • Blog images
  • Featured images
  • Landing page images
  • Product images
  • Hero images
  • General Media Library uploads

WebP is a good default modern format for many WordPress sites because it offers strong compression and broad browser support.

Use WebP when you want a balanced option between compatibility, quality, and smaller image files.

What AVIF is

AVIF is a newer modern image format that can often produce smaller files than WebP at similar visual quality.

It can be useful for:

  • Large image-heavy pages
  • Sites where every kilobyte matters
  • Performance-focused landing pages
  • High-traffic pages where image transfer size has a large impact

AVIF can provide strong compression, but it may take more processing time and may depend more heavily on server support.

Use AVIF when your environment supports it and testing confirms that output quality and loading behavior are correct.

WebP vs AVIF

Both WebP and AVIF can reduce image file size compared with older formats such as JPEG or PNG.

Use this general guidance:

  • WebP is usually the safer default for broad compatibility and reliable output.
  • AVIF can create smaller files, but should be tested carefully.
  • JPEG may still be acceptable for some photographs if modern output is not available.
  • PNG may still be needed for images with transparency, logos, or design assets.
  • SVG should usually remain unchanged and should not be treated like a raster image.

For most sites, start with WebP. Test AVIF separately if you want additional file size reduction and your environment supports it.

How modern image output affects performance

Modern image formats can improve performance by reducing the amount of image data transferred to visitors.

This can help with:

  • Faster page loading
  • Lower page weight
  • Reduced bandwidth usage
  • Better mobile performance
  • Improved Largest Contentful Paint on image-heavy pages

Modern formats are especially useful when the largest visible element on a page is an image, such as a hero image, product image, or featured image.

Note: Image format optimization helps reduce image weight, but it does not replace caching, CSS and JavaScript optimization, or good image sizing practices.

Format quality and compression

WebP and AVIF still require quality settings.

A lower quality setting usually creates smaller files, but it can introduce visible compression artifacts. A higher quality setting usually preserves more detail, but creates larger files.

Use a balanced quality setting first, then test output on key pages.

Pay extra attention to:

  • Faces
  • Product details
  • Text inside images
  • Gradients
  • Dark backgrounds
  • Transparent images
  • Brand assets
  • Photography portfolios

For more guidance on quality settings, see Image compression settings.

Images that need extra care

Some images should be tested carefully before conversion.

Be careful with:

  • Logos
  • Icons
  • Transparent PNGs
  • Screenshots with small text
  • Infographics
  • Product images where detail matters
  • Images with gradients
  • Brand-controlled artwork
  • Design assets used by themes or page builders

If an image must remain visually exact, exclude it from optimization.

Original files and rollback

Keep original image files when first enabling WebP or AVIF output.

Originals give you a rollback path if:

  • The converted image looks wrong
  • A format is not supported as expected
  • The quality setting is too aggressive
  • A design asset should not have been optimized
  • You want to regenerate images with different settings

Important: Do not delete original files until you have tested the converted images on important pages and confirmed the output is acceptable.

Use a conservative rollout when enabling modern image formats.

Recommended first pass:

  1. Keep original images.
  2. Start with WebP output.
  3. Use a balanced quality setting.
  4. Exclude logos, icons, and brand-critical assets.
  5. Test key pages on desktop and mobile.
  6. Review image quality and loading behavior.
  7. Try AVIF only after WebP output works correctly.
  8. Run bulk optimization after testing a smaller image set.

This approach helps you reduce image weight while keeping rollback options available.

What to test after enabling WebP or AVIF

After enabling modern image formats, test pages where images are important to performance or design.

Check:

  • Homepage
  • Landing pages
  • Product pages
  • Blog posts
  • Portfolio pages
  • Image galleries
  • Checkout pages
  • Pages with hero images
  • Pages with logos or brand assets

Review both desktop and mobile views.

Look for:

  • Missing images
  • Blurry images
  • Color banding
  • Broken transparency
  • Incorrect image dimensions
  • Images that still load in the original format
  • Images that do not appear in older browsers or embedded contexts

Common questions

Should I use WebP or AVIF?

Start with WebP for most sites.

Use AVIF if your environment supports it and testing confirms that output quality and compatibility are correct.

Can I enable both WebP and AVIF?

This depends on the available plugin settings and server support.

If both are available, test carefully and confirm which format is being served to visitors.

Will WebP or AVIF replace my original images?

That depends on your image optimization settings.

Keep original files during initial testing so you can compare output and roll back if needed.

Are WebP and AVIF always better than JPEG or PNG?

No. They are often smaller, but some images still need special handling.

Logos, icons, transparent PNGs, screenshots, and brand assets may need exclusions or different settings.

Does modern image output fix all image performance issues?

No. You should also use correctly sized images, avoid oversized uploads, enable caching, and review page weight.

Common issues and solutions

Converted images look blurry

The quality setting may be too low.

Increase the quality setting and regenerate the affected image if possible. If the image still does not look correct, exclude it from optimization.

Transparent images look wrong

Some transparent PNGs or design assets may not convert cleanly.

Exclude the affected images or test a different output format.

WebP or AVIF files are not generated

Check that image optimization is enabled and the selected format is supported by your server environment.

Then open Performance > Background Processes and confirm whether optimization tasks are queued, running, paused, or completed.

Images still load as JPEG or PNG

The browser may be receiving the original format because the optimized version has not been generated, the image is excluded, or the environment does not support the selected format.

Check the image settings, exclusions, and background process status.

Some images are missing after enabling modern formats

Disable the most recent image format setting and test again.

If images return, check whether the issue affects a specific image type, file path, theme, page builder, or output format. Exclude affected images if needed.

Best practices

  • Start with WebP before testing AVIF.
  • Keep original files during initial rollout.
  • Use balanced quality settings first.
  • Exclude logos, icons, and brand-critical assets.
  • Test desktop and mobile views.
  • Test key pages before bulk optimization.
  • Avoid running multiple image optimization plugins on the same files.
  • Check Background Processes after starting a large optimization job.
  • Use exclusions instead of disabling image optimization completely.

Need help?

If modern image formats do not generate correctly or images look wrong after optimization, contact Support and include:

  • Site URL
  • WordPress version
  • Plugin version
  • Affected image URL
  • Affected page URL
  • Selected output format
  • Current quality setting
  • Whether original files were kept or deleted
  • Screenshot of the issue
  • Relevant entries from Performance > Logs, if available

Where to go next