{"id":251350,"date":"2026-09-14T13:16:00","date_gmt":"2026-09-14T13:16:00","guid":{"rendered":"https:\/\/muhamedahmed.com\/convert-images-webp-avif-wordpress\/"},"modified":"2026-11-14T02:07:21","modified_gmt":"2026-11-14T02:07:21","slug":"convert-images-webp-avif-wordpress","status":"publish","type":"post","link":"https:\/\/muhamedahmed.com\/en\/convert-images-webp-avif-wordpress\/","title":{"rendered":"How to Convert Images to WebP and AVIF in WordPress (Without Breaking Anything)"},"content":{"rendered":"<p>To <strong>convert images to WebP in WordPress<\/strong> (or AVIF), you can rely on native support (WebP since WordPress 5.8, AVIF since 6.5) when your server&#8217;s image library supports the format, use an optimisation plugin that converts new and existing uploads with fallbacks, or let a CDN convert images on the fly. Keep originals and check the result on real pages.<\/p>\n<p>Images are usually the heaviest part of a page and often the <a href=\"https:\/\/muhamedahmed.com\/en\/how-to-improve-lcp-wordpress\/\">LCP element<\/a>, so this is one of the most effective speed fixes.<\/p>\n<h2>WebP vs AVIF: which should I use?<\/h2>\n<p>Use both when you can. AVIF typically gives smaller files at similar quality, particularly for photographs, but takes longer to encode and some older browsers lack support. WebP is a dependable middle ground with very broad support. A good setup serves AVIF to browsers that accept it, WebP to others, and JPEG or PNG as the last fallback.<\/p>\n<h2>Step 1: check what your server supports<\/h2>\n<p>WordPress uses Imagick or GD to create resized images. Whether it can produce WebP or AVIF depends on how those libraries were compiled on your host.<\/p>\n<p>Check in Tools \u2192 Site Health \u2192 Info \u2192 Media Handling, or with WP-CLI:<\/p>\n<pre><code class=\"language-bash\">wp eval 'var_dump( wp_image_editor_supports( array( &quot;mime_type&quot; =&gt; &quot;image\/avif&quot; ) ) );'\nwp eval 'var_dump( wp_image_editor_supports( array( &quot;mime_type&quot; =&gt; &quot;image\/webp&quot; ) ) );'\n<\/code><\/pre>\n<p>If AVIF returns <code>false<\/code>, your host&#8217;s library lacks it; use a plugin or CDN that converts elsewhere, or ask the host.<\/p>\n<h2>Step 2: choose your approach<\/h2>\n<h3>Option A: native WordPress output format<\/h3>\n<p>Since WordPress 5.8, the <code>image_editor_output_format<\/code> filter lets you tell WordPress to generate sub-sizes in a different format:<\/p>\n<pre><code class=\"language-php\">add_filter( 'image_editor_output_format', function ( $formats ) {\n    $formats['image\/jpeg'] = 'image\/webp';\n    return $formats;\n} );\n<\/code><\/pre>\n<p>This affects new uploads&#8217; generated sizes. It is simple, but you manage fallbacks and existing images yourself.<\/p>\n<h3>Option B: an optimisation plugin<\/h3>\n<p>Most popular image optimisation and caching plugins can convert uploads to WebP and AVIF, bulk-process the existing library, and rewrite the HTML to <code>&lt;picture&gt;<\/code> elements or use server rules to serve the best format. This is the most practical route for most sites.<\/p>\n<p>What to look for:<\/p>\n<ul>\n<li>Converts both new uploads and the existing library.<\/li>\n<li>Keeps originals.<\/li>\n<li>Provides fallbacks via <code>&lt;picture&gt;<\/code> or <code>Accept<\/code> header rules.<\/li>\n<li>Lets you set quality per format.<\/li>\n<li>Excludes specific images when needed (logos, SVGs).<\/li>\n<\/ul>\n<h3>Option C: CDN conversion<\/h3>\n<p>Image CDNs and some CDN features convert and resize at the edge based on the browser&#8217;s <code>Accept<\/code> header. No load on your server, but check costs and make sure the cache varies correctly by format.<\/p>\n<h2>Step 3: fallbacks with picture<\/h2>\n<p>When serving through HTML:<\/p>\n<pre><code class=\"language-html\">&lt;picture&gt;\n  &lt;source srcset=&quot;photo.avif&quot; type=&quot;image\/avif&quot;&gt;\n  &lt;source srcset=&quot;photo.webp&quot; type=&quot;image\/webp&quot;&gt;\n  &lt;img src=&quot;photo.jpg&quot; width=&quot;1200&quot; height=&quot;800&quot; alt=&quot;Handmade leather bag&quot;&gt;\n&lt;\/picture&gt;\n<\/code><\/pre>\n<p>The browser takes the first type it supports. Width, height and alt stay on the <code>&lt;img&gt;<\/code>.<\/p>\n<h2>Step 4: don&#8217;t forget dimensions<\/h2>\n<p>Format conversion of a 4000 px image still wastes data on a phone. Check:<\/p>\n<ul>\n<li>Upload sizes: resize huge originals before or at upload. WordPress scales very large images down to a maximum of 2560 px by default (the &#8220;big image&#8221; threshold).<\/li>\n<li><code>srcset<\/code> and <code>sizes<\/code> are present so the browser picks a suitable width.<\/li>\n<li>Theme image sizes match how images are actually displayed.<\/li>\n<li>Width and height attributes exist to prevent layout shift (<a href=\"https:\/\/muhamedahmed.com\/en\/core-web-vitals-guide\/\">CLS<\/a>).<\/li>\n<\/ul>\n<h2>Step 5: bulk convert existing images<\/h2>\n<p>On a large media library, bulk conversion can strain a slow server. My approach:<\/p>\n<ol>\n<li>Back up <code>wp-content\/uploads<\/code>.<\/li>\n<li>Run conversion in small batches, outside peak hours.<\/li>\n<li>Regenerate missing thumbnails only where needed:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">wp media regenerate --only-missing --yes\n<\/code><\/pre>\n<ol start=\"4\">\n<li>Spot-check pages for broken or blurry images.<\/li>\n<\/ol>\n<p>More commands are in my <a href=\"https:\/\/muhamedahmed.com\/en\/wp-cli-commands\/\">WP-CLI guide<\/a>.<\/p>\n<h2>Quality settings<\/h2>\n<p>There is no universal number. Start with moderate quality, compare visually at real display size, and adjust. Product photos with fine texture may need more; decorative backgrounds can go lower. Logos and illustrations with flat colours are often better as SVG or lossless WebP.<\/p>\n<h2>Alt text and SEO<\/h2>\n<p>Changing format should not change meaning. Keep descriptive alt text, keep filenames readable (<code>blue-leather-bag.jpg<\/code>, not <code>IMG_0042.jpg<\/code>), and make sure image sitemaps or SEO plugins point to working URLs.<\/p>\n<h2>Checklist<\/h2>\n<ul>\n<li>Server support for WebP\/AVIF checked<\/li>\n<li>Approach chosen: native, plugin or CDN<\/li>\n<li>Originals kept<\/li>\n<li>Fallbacks working in browsers without AVIF<\/li>\n<li>Dimensions and srcset correct<\/li>\n<li>Existing library converted in batches<\/li>\n<li>LCP image verified in the new format<\/li>\n<li>Visual quality checked on real devices<\/li>\n<\/ul>\n<h2>Common mistakes<\/h2>\n<ul>\n<li>Converting PNG logos to lossy formats and getting blurry edges.<\/li>\n<li>Serving AVIF without a fallback.<\/li>\n<li>A CDN cache that does not vary by format, serving AVIF to a browser that cannot show it.<\/li>\n<li>Bulk converting on a shared host during business hours and slowing the site.<\/li>\n<\/ul>\n<h2>Native support in WordPress core<\/h2>\n<p>WordPress has supported uploading WebP since version 5.8 and AVIF since version 6.5, provided the server&#8217;s image library supports the format (<a href=\"https:\/\/make.wordpress.org\/core\/2024\/02\/23\/wordpress-6-5-adds-avif-support\/\" target=\"_blank\" rel=\"noopener\">Make WordPress Core: AVIF support in 6.5<\/a>). Upload support is not the same as automatic conversion. If you upload a JPEG, core still creates JPEG thumbnails by default. To output a different format, you need a filter such as <code>image_editor_output_format<\/code>, a plugin, or a CDN that converts on the fly.<\/p>\n<p>A minimal example that makes WordPress generate WebP sub-sizes from JPEG uploads:<\/p>\n<pre><code>add_filter( 'image_editor_output_format', function( $formats ) {\n    $formats['image\/jpeg'] = 'image\/webp';\n    return $formats;\n} );<\/code><\/pre>\n<p>Test it on staging first, and note it only affects new uploads, not existing images.<\/p>\n<h2>CDN conversion with Cloudflare<\/h2>\n<p>If the site is behind Cloudflare, features such as Polish can serve WebP to supporting browsers without changing files on your server, and Cloudflare Images can transform images by URL (<a href=\"https:\/\/developers.cloudflare.com\/images\/polish\/\" target=\"_blank\" rel=\"noopener\">Cloudflare docs: Polish<\/a>). The advantages are no server CPU load and no change to your media library. The trade-offs are plan requirements and less control over quality per image. Check that the response varies correctly so each browser gets a format it supports.<\/p>\n<h2>Choosing an approach by site type<\/h2>\n<table>\n<thead>\n<tr>\n<th>Site<\/th>\n<th>Suggested approach<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Small brochure site, few images<\/td>\n<td>Convert manually before upload with a tool such as Squoosh, upload WebP directly<\/td>\n<\/tr>\n<tr>\n<td>Blog with a growing library<\/td>\n<td>Core output filter or an optimisation plugin, bulk convert old images in batches<\/td>\n<\/tr>\n<tr>\n<td>WooCommerce store with thousands of products<\/td>\n<td>CDN conversion or a plugin that offloads processing, to protect shared hosting resources<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Shared hosting limits<\/h2>\n<p>Many freelancers in Egypt and the Gulf host clients on shared plans. AVIF encoding is much heavier than JPEG or WebP encoding, and bulk conversion can hit CPU or process limits, cause timeouts or slow the live site. Practical precautions:<\/p>\n<ul>\n<li>Run bulk jobs at night local time and in small batches.<\/li>\n<li>Prefer WP-CLI commands where the plugin offers them, so the work does not depend on a browser tab staying open.<\/li>\n<li>Take a backup of <code>wp-content\/uploads<\/code> before starting.<\/li>\n<li>Watch the hosting resource graphs during the first batch.<\/li>\n<\/ul>\n<h2>Browser support today<\/h2>\n<p>WebP is supported by all current major browsers, and AVIF is supported by current versions of Chrome, Edge, Firefox and Safari (<a href=\"https:\/\/caniuse.com\/avif\" target=\"_blank\" rel=\"noopener\">Can I use: AVIF<\/a>). Older iPhones that cannot update to a recent iOS version may still lack AVIF, which is why fallbacks still matter for a general audience.<\/p>\n<h2>Measuring the benefit<\/h2>\n<p>Do not assume the conversion helped; measure it. Before and after, record the total image weight of your home page and a product page in the DevTools Network tab, and the LCP time in PageSpeed Insights. If the LCP image did not change format, for example because it is a CSS background, the biggest win may still be missing. See <a href=\"https:\/\/muhamedahmed.com\/en\/how-to-improve-lcp-wordpress\/\">how to improve LCP<\/a> for that case.<\/p>\n<h2>Frequently asked questions<\/h2>\n<h3>Should I delete the original JPEGs?<\/h3>\n<p>No. Keep originals so you can regenerate sizes later or switch formats if something goes wrong.<\/p>\n<h3>Is AVIF always smaller than WebP?<\/h3>\n<p>Often, but not always. For simple graphics and small thumbnails the difference can be small, so compare a few real images from your site.<\/p>\n<h3>Do image formats affect SEO directly?<\/h3>\n<p>Google can index WebP and AVIF. The SEO benefit comes indirectly through faster loading and better user experience.<\/p>\n<p>Need your media library optimised safely? <a href=\"https:\/\/muhamedahmed.com\/en\/contact\/\">Contact me<\/a>. Next in this series: <a href=\"https:\/\/muhamedahmed.com\/en\/self-host-google-fonts-wordpress\/\">self-hosting Google Fonts<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to convert images to WebP and AVIF in WordPress: native support, plugin and server approaches, fallbacks, responsive sizes, bulk conversion and the mistakes to avoid.<\/p>\n","protected":false},"author":1,"featured_media":252318,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_mx_tldr":"WordPress can upload and display WebP (since 5.8) and AVIF (since 6.5), if the server's image library supports them.\nYou can convert at upload, in bulk with a plugin, or on the fly at a CDN.\nAlways keep originals and serve fallbacks when a browser lacks support.\nFormat is only half the win; correct dimensions and srcset matter just as much.","_mx_faq":"Is AVIF better than WebP? | AVIF often produces smaller files at similar visual quality, especially for photos, but encoding is slower. WebP encodes faster and is very widely supported. Many sites serve AVIF with a WebP or JPEG fallback.\nDoes WordPress support AVIF? | Yes. WordPress 6.5 added AVIF support for uploads and image sizes, as long as the server's image library (Imagick or GD) supports AVIF.\nWill converting images hurt SEO? | No, if image URLs keep working, alt text stays, and the images still load. Serving modern formats usually helps performance.\nShould I delete the original JPEGs? | Keep originals as a fallback and for future re-encoding. Storage is cheaper than a lost source image."},"categories":[100],"tags":[131,129,127,130,42],"class_list":["post-251350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-speed-performance","tag-avif","tag-images","tag-performance","tag-webp","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/posts\/251350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/comments?post=251350"}],"version-history":[{"count":2,"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/posts\/251350\/revisions"}],"predecessor-version":[{"id":252902,"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/posts\/251350\/revisions\/252902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/media\/252318"}],"wp:attachment":[{"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/media?parent=251350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/categories?post=251350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/muhamedahmed.com\/en\/wp-json\/wp\/v2\/tags?post=251350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}