Image Formats for WordPress: When to Use WebP, AVIF, JPEG and PNG

Most advice about WordPress images starts with a plugin. Install one, switch on compression, forget about it. That works for a lot of sites, but it skips a decision that matters more than any setting inside the plugin: which file format each image should be in the first place.

A logo saved as JPEG looks smudged. A photograph saved as PNG is several times heavier than it needs to be. A screenshot saved as a high quality WebP might be fine, or might show odd halos around text. The format is a property of the image, and getting it right at export time saves you work later.

This guide covers format choice by type of image, what WordPress itself supports for WebP and AVIF, what your server needs to handle them, how fallbacks work, and which quality settings to start from. It is separate from two neighbouring topics. Pixel dimensions are a different question, covered in what size image to use on WordPress. Choosing a compression plugin is covered in our guide to WordPress image optimization plugins. Here we stay on formats.

The four formats and what each is good at

The Mozilla Developer Network keeps a guide to web image formats that we have used as the reference for the summaries below. Read it if you want the full detail: MDN image file type and format guide.

Format	Compression	Transparency	Best for	Watch out for
JPEG	Lossy	No	Photographs and other continuous tone images	Visible blocks and smudging at low quality, and no transparent background
PNG	Lossless	Yes	Screenshots, graphics with flat colour, anything needing transparency or exact pixels	Large files for photographs
WebP	Lossy or lossless	Yes	A wide range of web images, as a smaller alternative to JPEG and PNG	Older browsers and some tools may not handle it
AVIF	Lossy or lossless	Yes	Photographs where small file size matters most	Less browser and tool support than WebP

MDN describes WebP as an excellent choice for both still and animated images, with much better compression than PNG or JPEG. It describes AVIF as offering slightly better compression again, though with less browser support than WebP and without progressive rendering. For JPEG it says the format is a good choice for lossy compression of still images and is currently the most popular. For PNG it says to prefer it over JPEG for precise reproduction or when transparency is needed.

Those are comparisons, not guarantees. How much smaller a WebP or AVIF file is depends on the image. A noisy, detailed photograph and a simple graphic behave very differently, so test on your own pictures rather than trusting any single percentage.

What lossy and lossless mean

Lossy formats throw away detail the eye is unlikely to notice, and the more you throw away, the smaller the file and the more visible the damage. Lossless formats keep every pixel exactly, so they are larger but never degrade. JPEG is always lossy. PNG is always lossless. WebP and AVIF can be either, which is part of why they are flexible and part of why their settings need attention.

Choosing a format by type of image

The right format depends on what is in the picture, not on where it will appear. Use this table as a starting point.

Type of image	First choice	Why	Alternative
Photograph in a post or product gallery	WebP or AVIF, if your setup supports them	Smaller than JPEG at similar quality	JPEG
Hero or banner photograph	WebP or JPEG, tested at display size	Large images benefit most from smaller files, but quality shows	AVIF
Screenshot with text	PNG, or lossless WebP	Text edges stay sharp	High quality WebP
Logo or icon as artwork	SVG, where it is allowed	Stays sharp at any size	PNG with transparency
Photograph needing a transparent background	PNG, WebP or AVIF	JPEG cannot hold transparency
Simple chart or diagram	PNG or SVG	Flat colour compresses well and stays crisp	WebP lossless
Animation	WebP or AVIF, or a short video	MDN suggests WebP, AVIF or APNG over GIF for animation	GIF only if you must
Photo from a phone	JPEG or whatever your phone exports, then convert if needed	Convenience

Four of those rows deserve a closer look.

Photographs

Photographs are where modern formats pay off most, because MDN describes both WebP and AVIF as offering better compression than JPEG for this kind of image. If your site is mostly photography, such as a store with many product images or a portfolio, this is the choice that affects your page weight.

Screenshots and anything with text

Text has hard edges, and lossy compression tends to leave faint halos around them. For tutorials, documentation and software reviews, PNG or lossless WebP keeps text clean. If file size is a problem, resize the screenshot to the width it displays at before you reach for lossy compression.

Logos and icons

A logo is not a photograph, so it should not be a JPEG. If you have it as vector artwork, SVG is the best format on the web because it scales to any size. One caution: SVG is not in WordPress’s default list of allowed upload types. The wp_get_mime_types() function in core lists JPEG, PNG, WebP, AVIF, HEIC and others, but not SVG. Sites that allow SVG add support themselves, usually with a plugin or code. SVG files can contain scripts, so only allow uploads from people you trust and sanitise them. If that is more than you want to take on, upload the logo as PNG at twice its display width.

Transparency

JPEG has no transparency. GIMP’s documentation says it plainly: when you export to JPEG, transparent areas are filled with the background colour, which is white by default. If you need a cut out product on a coloured background, export as PNG, WebP or AVIF.

What WordPress core supports

WordPress’s own developers have published notes on both modern formats. The core team explains in its announcement of WebP support and AVIF support what you can expect. We do not name the version numbers in the body of this guide, because they age. Instead: check your WordPress version against those two posts, or open Tools, then Site Health, then Info, then Media Handling, which the AVIF note says lists the formats your site supports.

What the notes say, in plain terms:

• You can upload WebP and AVIF files and use them like JPEG or PNG, provided your hosting supports them. If the server cannot process the format, the media library shows an error when you upload.
• Support depends on your server’s image library. WordPress works with either Imagick or GD, and each must be built with support for the format.
• Responsive images and lazy loading still apply. The notes say WebP and AVIF images get srcset, lazy loading and the other default image handling.
• Core generates resized copies in the same format as the upload. An uploaded WebP produces WebP sizes. Converting an upload to another format is possible, but you have to ask for it.
• Older browsers are your responsibility. The notes say that if a significant part of your audience uses a browser without support, you should avoid the format or add a polyfill.

The WebP announcement also lists limits that were true when it was written, including that lossless WebP needed Imagick and that animated and transparent WebP files were not supported for resized images. Those details may have changed, which is another reason to read the notes against your own version and to test with a sample file.

HEIC uploads from phones

Phones often save photographs as HEIC. WordPress lists HEIC among its allowed types, and the developer reference for the image_editor_output_format filter says that in recent versions HEIC and HEIF uploads are converted to JPEG by default. Check your version, because earlier versions behave differently.

Multisite

On a multisite network, the allowed file types are stored per site, so a new type may not be allowed on sites created earlier. The core notes for both formats include a snippet using the site_option_upload_filetypes filter to add the extension network wide.

What your server needs

For WebP and AVIF, the format has to be supported by the image library PHP uses. WordPress works with two:

Library	What it is	Notes for modern formats
Imagick	PHP extension wrapping ImageMagick	The WebP note says lossless WebP needed it at the time
GD	PHP’s built-in graphics library	Common on shared hosting. Format support depends on how PHP was built

You do not need to guess which one you have or what it supports. Open Site Health and look at Media Handling. If AVIF or WebP is not listed, ask your host whether they can enable it, or upgrade the plan or PHP build. If the host cannot, you can still use these formats by converting images before upload, but WordPress will not be able to generate resized copies on the server for a format it cannot process.

CDNs and image services

Some CDNs and image services convert formats on the fly and serve each browser the best option it supports. That moves the burden away from your server. It adds a dependency and, on most services, a cost, so compare it with converting in advance. Whether this is better for you depends on how many images you serve and how often they change.

Fallbacks: what happens in a browser that cannot show the format

Browser support for WebP and AVIF is broad. MDN lists both as supported in Chrome, Edge, Firefox, Opera and Safari. Support comes from specific browser versions, so check a compatibility table such as the one MDN links from each format’s page if you serve an audience on older devices.

When you need a fallback, the standard HTML answer is the picture element, which lists sources in order and falls back to a plain img:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" width="1200" height="800" alt="Describe the photo">
</picture>

The browser takes the first source whose type it understands. MDN recommends fallbacks when using AVIF for this reason.

WordPress core does not build this markup for you when you upload a WebP. A plugin or CDN does that, or you write the markup in a template. For most sites the practical path is one of three:

1. Upload JPEG and PNG, and let a plugin or CDN produce and serve WebP or AVIF with fallbacks.
2. Upload WebP, accept that very old browsers are not supported, and keep it simple.
3. Write picture markup in a template for the few images where it matters, such as a hero.

Option 1 is the safest for a site with many editors. Option 2 is fine when you know your audience. Option 3 is for developers.

Quality settings: where to start

Quality is a number from 1 to 100 in most tools, and the same number means different things in different formats. A JPEG at 80 and an AVIF at 80 are not equivalent. So treat any number you read, including those below, as a starting point to test.

In WordPress

Core exposes a filter, wp_editor_set_quality, which sets the compression quality for generated images. The developer reference notes that it receives the quality, the MIME type and the image dimensions. That lets you set a different quality per format. The core note on AVIF shows an example that returns a lower number only for image/avif, and states that a quality of 100 puts AVIF into lossless mode.

add_filter( 'wp_editor_set_quality', 'myshop_image_quality', 10, 2 );

function myshop_image_quality( $quality, $mime_type ) {
    if ( 'image/webp' === $mime_type ) {
        return 80;
    }

    return $quality;
}

The 80 above is an example of the mechanism, not a recommendation for every site. Pick a value by testing.

A test you can run in ten minutes

1. Choose three representative images: a detailed photograph, a smooth gradient or sky, and a screenshot with text.
2. Export each at three or four quality levels in the format you are testing.
3. View them at the size they will actually appear on your page, on a real screen, not zoomed in.
4. Choose the lowest quality where you cannot see a difference without hunting for it.
5. Write the numbers down so everyone on your team exports the same way.

Gradients and skies show banding first. Text shows halos first. Detailed foliage hides compression well.

Avoid compressing twice

Every lossy save costs some quality. Start from the original or a lossless master, export once at the final settings, and do not run an already compressed JPEG through another compressor. If you use an optimisation plugin, keep your originals so you can redo the work if you change your mind.

Keep an eye on file size, not only quality

The browser’s network panel shows the real size of each image on a page. After changing formats, reload a few key pages and compare the total image weight. A change that saves little on your particular images is not worth the extra moving parts.

Putting it into a routine

For a blog or business site with a few editors:

1. Decide a default format for photographs, for example WebP, and a default for screenshots, for example PNG. Write it in your editorial guide.
2. Check Site Health for what your server supports.
3. Resize to the right dimensions before upload, using the sizes guide linked above.
4. Export once, at the tested quality.
5. Upload, and use the image block with descriptive alt text.
6. If you add an optimisation plugin, set it to leave your chosen formats alone, or to convert in the way you intended.

For a store, add a rule for product photographs: one format, one size ratio, one background. Consistency helps the page look tidy, and it makes automated conversion predictable.

Community and membership sites

On a community site, much of the image traffic comes from members, not editors: avatars, cover photos and photos in the activity feed. You cannot choose their formats, so conversion and compression on upload do more of the work. If you run a community on Reign, the Reign performance guide covers image handling for member uploads.

Mistakes to avoid

• Converting everything to AVIF without checking the server. If the server cannot process it, uploads fail or resized copies are missing.
• Saving logos as JPEG. Edges smear, and the background is never transparent.
• Using PNG for photographs. The file is far heavier than it needs to be.
• Assuming one quality number fits every format. Test each format separately.
• Forgetting dimensions. A perfectly compressed image that is four times wider than its slot still wastes bandwidth.
• Throwing away originals. Without them you cannot re-export at a different quality or format later.

Frequently asked questions

Does WordPress support WebP and AVIF without a plugin?

Core WordPress can accept and use both formats if your WordPress version includes support and your server’s image library can process them. The version numbers are in the core announcements, so check your version against those posts. Site Health, under Info and Media Handling, shows what your site supports.

Should I convert all my images to WebP?

Not necessarily. WebP suits most photographs and many graphics, but screenshots with text and exact pixel work can be better as PNG or lossless WebP. Convert in batches, compare results on your own images, and keep the originals.

Is AVIF better than WebP?

MDN describes AVIF as offering slightly better compression than WebP, with less browser support and no progressive rendering. In practice the difference depends on the image, fewer browsers and tools handle it. WebP is the easier default for many sites.

Do I need a fallback for older browsers?

It depends on your audience. WebP and AVIF are supported in current versions of the major browsers, according to MDN, but older devices exist. If you need to cover them, serve a JPEG or PNG fallback through the picture element, a plugin or a CDN.

Can WordPress convert my JPEG uploads to WebP automatically?

Core does not do it by default, but it provides the image_editor_output_format filter, which maps one MIME type to another, and the core notes show examples of using it. Plugins and image services also offer conversion. Test the result before applying it to a whole library.

What quality setting should I use?

There is no single right number. Start in the range your tool suggests, export a few real images at several levels, and pick the lowest setting where the difference is not visible at display size. Record the number so everyone uses the same one.