{"id":60546,"date":"2024-12-13T07:00:00","date_gmt":"2024-12-13T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=60546"},"modified":"2026-08-26T18:21:29","modified_gmt":"2026-08-27T01:21:29","slug":"modern-image-formats","status":"publish","type":"post","link":"https:\/\/www.dreamhost.com\/blog\/modern-image-formats\/","title":{"rendered":"Need for Speed? Meet WebP, AVIF, and Modern Image Formats"},"content":{"rendered":"\n

Think about the last time you gave up on a website because it wouldn\u2019t load. Oversized images may have contributed.<\/p>\n\n\n\n

Modern image formats are image file types, primarily WebP and AVIF, that compress pictures into much smaller files than JPEG or PNG at similar visual quality, so your pages load faster. Modern Image Formats is also the name of a free WordPress plugin that converts your image uploads to WebP or AVIF automatically.<\/p>\n\n\n\n

If your business runs on imagery \u2014 product photos, portfolios, work samples \u2014 the format those images use can affect page speed, which contributes to Core Web Vitals and was associated with conversion-rate differences in the Portent study discussed below.<\/p>\n\n\n\n

In this guide, we\u2019ll cover what WebP and AVIF are, how to choose between them, how to switch your WordPress site over in a few clicks, and how to measure the results with Core Web Vitals.<\/p>\n\n\n\n

Understanding WebP and AVIF images<\/h2>\n\n\n\n

First, some context. The image formats you\u2019ll meet most often on the web are JPEG, PNG, GIF, SVG, WebP, and AVIF, according to MDN\u2019s image file type guide<\/a>. The first four are the old guard. The last two are the modern formats this post is about.<\/p>\n\n\n\n

Google announced WebP in September 2010 as a new image format for the web. Per Google\u2019s WebP documentation<\/a>, lossless WebP images are 26% smaller than PNGs, and lossy WebP images are 25\u201334% smaller than comparable JPEGs at equivalent quality.<\/p>\n\n\n\n

Quick jargon check: lossy compression shrinks a file by discarding image data you\u2019re unlikely to notice, while lossless compression shrinks it without discarding anything. WebP supports both, plus transparency (like PNG) and animation (like GIF).<\/p>\n\n\n\n

Thanks to that efficiency and native support in Chrome, Safari, Firefox, Edge, and Opera, WebP has become a go-to format<\/a>.<\/p>\n\n\n\n

AVIF (AV1 Image File Format) is younger: the Alliance for Open Media published version 1.0 of the format in February 2019. It compresses even harder. MDN\u2019s format guide reports lossy AVIF images around 50% smaller than comparable JPEGs, with support for high dynamic range (HDR) and wide color gamut, so photos keep richer color at smaller sizes.<\/p>\n\n\n\n

AVIF is now supported in Chrome, Edge, Firefox, Opera, and Safari. Its trade-off, per MDN: AVIF doesn\u2019t support progressive rendering, so a file must fully download before it displays. With small files you\u2019ll rarely notice; with very large ones, you might.<\/p>\n\n\n\n

To summarize:<\/strong> JPEG and PNG are older formats that produce larger files and slower loading times. WebP and AVIF are newer and far more compressible, making them smaller and faster to load at the same visual quality.<\/p>\n\n\n\n

One other thing you should know:<\/strong> Modern Image Formats<\/a> is also<\/em> the name of a free plugin from the WordPress Performance Team that enables AVIF and WebP for media uploads on WordPress.org sites.<\/p>\n\n\n\n

In just a bit, we\u2019ll walk you through installing it on your own website.<\/p>\n\n\n\n

Why modern formats matter (hint: speed)<\/h2>\n\n\n\n

Images are the heaviest thing most pages ship. In HTTP Archive\u2019s 2022 Web Almanac<\/a>, the median desktop page weighed 2,315 KB, and 1,026 KB of that (about 44%) was images.<\/p>\n\n\n\n

On mobile, images accounted for 881 KB of the 2,020 KB median page.<\/p>\n\n\n\n

\"Bar<\/figure>\n\n\n\n

Because images are the largest single contributor to page weight, their format matters: the same photo saved as lossy AVIF is around half the size of its JPEG equivalent, per MDN, and smaller files load faster.<\/p>\n\n\n\n

And faster images pay off twice.<\/strong><\/p>\n\n\n\n

First, there\u2019s search engine optimization (SEO)<\/a>.<\/p>\n\n\n\n

Google measures a set of user experience metrics called Core Web Vitals<\/a> on your site, covering loading speed, interactivity, and visual stability. Google\u2019s page experience documentation<\/a> states plainly that \u201cCore Web Vitals are used by our ranking systems.\u201d (Stay tuned \u2014 we\u2019ll dig into measuring them later in this post.)<\/p>\n\n\n\n

Second, loading speed shapes conversions. Portent\u2019s April 2022 analysis<\/a> of conversion data from 20 B2B and B2C websites found that, among the lead-generation sites studied, a site that loads in 1 second had a conversion rate 3x higher than a site that loads in 5 seconds. Among the e-commerce sites, the 1-second sites converted at 2.5x the rate of the 5-second sites.<\/p>\n\n\n\n

\"Faster
Sites that load in 1 second convert at a multiple of 5-second sites: 3x for lead-generation sites and 2.5x for e-commerce sites. Source: Portent, April 2022.<\/figcaption><\/figure>\n\n\n\n

Choosing between AVIF and WebP<\/h2>\n\n\n\n

Before you switch your site to WebP or AVIF, decide which<\/em> format you prefer for which<\/em> images.<\/p>\n\n\n\n

The truth is both are excellent image formats for the web, so the choice is about your priorities.<\/p>\n\n\n\n

Here\u2019s our verdict:<\/p>\n\n\n\n

AVIF for HDR and wide color gamut<\/h3>\n\n\n\n

AVIF is the pick for sharp, detailed images: photography portfolios, digital art, or e-commerce sites<\/a> showcasing high-end products. It delivers the smallest files at high quality, and it handles HDR and wide color gamut.<\/p>\n\n\n\n

WebP for versatility<\/h3>\n\n\n\n

WebP works well for most websites, handling photos, illustrations, logos, and animations<\/a> with ease. It has been supported in browsers for longer, which matters if your audience skews toward older devices. It\u2019s the reliable default.<\/p>\n\n\n\n

For WordPress, let the plugin choose unless you have a specific requirement: it uses AVIF when your server supports it and WebP otherwise. Choose WebP manually if you want to avoid AVIF\u2019s lack of progressive rendering.<\/p>\n\n\n\n

We wrote a detailed guide to this exact decision, so if you want the full comparison, don\u2019t miss AVIF vs. WebP: How To Choose the Right Modern Image Format<\/a>.<\/p>\n\n\n\n

\"AVIF<\/figure>\n\n\n\n

Upload your best images with the Modern Image Formats WordPress plugin<\/h2>\n\n\n\n

That plugin we mentioned earlier, Modern Image Formats<\/a>? It may just be the easiest way for small website owners and operators to get modern formats live.<\/p>\n\n\n\n

So, let\u2019s explore what the tool does, how to install and use it, its benefits, and how to determine if it\u2019s the right solution for you.<\/p>\n\n\n\n

What is the Modern Image Formats plugin for WordPress?<\/h3>\n\n\n\n

WordPress has accepted WebP uploads since version 5.8 in 2021<\/a>, and it added AVIF support in 2024<\/a> with version 6.5. But native support only means you can upload files that are already in those formats. Out of the box, WordPress won\u2019t convert the JPEGs and PNGs you\u2019re uploading today.<\/p>\n\n\n\n

That\u2019s where Modern Image Formats comes in (formerly known as WebP Uploads, and built by the WordPress Performance Team).<\/p>\n\n\n\n

The Modern Image Formats plugin<\/a> converts new image uploads to a modern format automatically. As long as your hosting server supports AVIF, AVIF will be the default output format; otherwise, WebP is used. When both are supported, you can choose your preferred output under Settings<\/strong> > Media<\/strong>.<\/p>\n\n\n\n

Quick note:<\/strong> the plugin converts new uploads only. Images already in your Media Library get converted only if you regenerate them, with a plugin like Regenerate Thumbnails or the WP-CLI command wp media regenerate<\/em>.<\/p>\n\n\n\n

Reminder:<\/strong> your hosting environment<\/a> must support the output format you want to use: AVIF or WebP. You can check without asking anyone: in your WordPress admin, go to Tools<\/strong> > Site Health<\/strong>, open the Info<\/strong> tab, and expand Media Handling<\/strong> to see which formats your server\u2019s image library supports. If AVIF or WebP is missing, contact your host.<\/p>\n\n\n\n

\n\n\n

Get Content Delivered Straight to Your Inbox<\/h2>

Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p>

<\/div>