{"id":89283,"date":"2021-06-07T20:22:05","date_gmt":"2021-06-07T20:22:05","guid":{"rendered":"https:\/\/make.wordpress.org\/core\/?p=89283"},"modified":"2021-11-09T14:35:40","modified_gmt":"2021-11-09T14:35:40","slug":"wordpress-5-8-adds-webp-support","status":"publish","type":"post","link":"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/","title":{"rendered":"WordPress 5.8 adds WebP support"},"content":{"rendered":"

WebP<\/a> is a modern image format that provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth. WebP is supported in all modern browsers according to caniuse<\/a>.<\/p>\n\n\n\n

From WordPress version 5.8 forward, you can upload and use WebP images in WordPress like you would a JPEG or PNG image today (as long as your hosting service supports WebP). Switching to the WebP format for your images will improve your site\u2019s performance and your site visitor\u2019s experience.\u00a0<\/p>\n\n\n\n

How WebP Helps You<\/h2>\n\n\n\n

WebP images are significantly smaller than their JPEG equivalents, so visitors to your site will see the complete page loaded more quickly. Smaller images take less bandwidth to transmit, and your images still get all of the responsive benefits of srcset<\/code> and lazy loading by default. Finally, WebP is supported in all major browsers, so most sites can start using them today.<\/p>\n\n\n\n

Creating WebP images<\/h2>\n\n\n\n

Image editing tools support exporting in WebP, or you can also use command line conversion tools<\/a> or web based tools like Squoosh<\/a>. Once you save your images as WebP, upload them to WordPress and use them like you would any other image.\u00a0<\/p>\n\n\n\n

Using WebP images<\/h2>\n\n\n\n

WebP images work like any other image in WordPress with some small caveats.\u00a0<\/p>\n\n\n\n

WebP images support lossy and lossless compression, as well as an animated format and support for transparent images. In WordPress, the lossless WebP<\/em> format is only supported when the hosting server uses Imagick (the PHPPHP<\/span> The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher<\/span><\/span><\/span> library) until LibGD adds support<\/a>. In addition, animated and alpha formats are not yet supported for resized images (lossy images are created instead when you upload in these formats).<\/p>\n\n\n\n

WebP support in the media library requires that your web server\u2019s image processing library (WordPress supports both Imagick and LibGD) supports the WebP format. Fortunately these libraries have supported WebP for quite a while so support is widely available. If your web server does not support WebP, you will see an error message when you try to upload a WebP image.<\/p>\n\n\n\n

If your audience includes a significant number of users on an unsupported browser (IE11 for example), either avoid using WebP images, or\u00a0 enqueue a browser polyfill<\/a>.<\/p>\n\n\n\n

Plans for the future<\/h2>\n\n\n\n

The media component team is also exploring the option of having WordPress perform the image format conversion on uploaded images \u2013 using WebP as the default output format for sub-sized images. You can track progress and test this feature on the trac ticket<\/a>. We are also keeping our eyes on even more modern formats like AVIF and JPEGXL that will both improve compression and further reduce resources required for compression.<\/p>\n\n\n\n

FAQ<\/h2>\n\n\n\n

How can I fine tune the compression quality setting used for WebP images?<\/h3>\n\n\n\n

Developers or plugins can use the wp_editor_set_quality<\/code> filterFilter<\/span> Filters are one of the two types of Hooks https:\/\/codex.wordpress.org\/Plugin_API\/Hooks<\/a>. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.<\/span><\/span><\/span> to set the quality setting. The passed mime type enables setting by type, for example:<\/p>\n\n\n

\n\/\/ Use a quality setting of 75 for WebP images.\nfunction filter_webp_quality( $quality, $mime_type ) {\n  if ( 'image\/webp' === $mime_type ) {\n     return 75;\n  }\n  return $quality;\n}\nadd_filter( 'wp_editor_set_quality', 'filter_webp_quality', 10, 2 );\n<\/pre><\/div>\n\n\n
What happens if I enable the filter to use WebP sub-sizes, but upload JPEG? Do the sub-sizes have to match the original?<\/h3>\n\n\n\n
By default, WordPres creates the sub-sized images of the same type as the uploaded file, so uploaded WebP files to get WebP files on your site. If you want to experiment with uploading JPEG and having WordPress auto-convert these to WebP for your sub-sized images, check out this plugin<\/a> (related trac ticket<\/a>).<\/p>\n\n\n\n
If I use WordPress multisitemultisite<\/span> Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network<\/strong>, blog<\/strong>, site<\/strong><\/span><\/span><\/span>, will all my sites work with WebP images?<\/h3>\n\n\n\n
No. Multisite stores the file types that users are allowed to upload when a site is created. We are working on improving this in #53167<\/a>. In the meantime, to ensure all existing sites on a networknetwork<\/span> (versus site, blog)<\/span><\/span><\/span> allow WebP files, you can use the site_option<\/code> filter in a network mu-pluginPlugin<\/span> A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https:\/\/wordpress.org\/plugins\/<\/a> or can be cost-based plugin from a third-party.<\/span><\/span><\/span> to add webp<\/code> to the allowed file types for all network sites:<\/p>\n\n\n
\n\/\/ Ensure all network sites include WebP support.\nadd_filter(\n  'site_option_upload_filetypes',\n  function ( $filetypes ) {\n    $filetypes = explode( ' ', $filetypes );\n    if ( ! in_array( 'webp', $filetypes, true ) ) {\n      $filetypes[] = 'webp';\n    }\n    $filetypes \u00a0 = implode( ' ', $filetypes );\n\n    return $filetypes;\n  }\n);\n<\/pre><\/div>\n\n\n
<\/p>\n\n\n\n
<\/p>\n
#<\/span>5-8<\/a>, #<\/span>core-images<\/a>, #<\/span>dev-notes<\/a>, #<\/span>images<\/a><\/p>