{"id":242,"date":"2024-11-20T09:47:07","date_gmt":"2024-11-20T09:47:07","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=242"},"modified":"2024-11-21T07:18:52","modified_gmt":"2024-11-21T07:18:52","slug":"how-to-use-webp-images-wordpress","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/how-to-use-webp-images-wordpress\/","title":{"rendered":"How to Use WebP Images on WordPress: Everything You Need to Know"},"content":{"rendered":"\n<p>So, did you read about the benefits of the next-gen format everywhere and want to know how to use WebP on WordPress? Our guide comes at the perfect time!&nbsp;<\/p>\n\n\n\n<p>Did you know that unoptimized images are often the main reason for a slow website? You should always consider the format you serve them because it can deeply affect your site speed.&nbsp;<\/p>\n\n\n\n<p>And spoiler alert: converting your JPEG or PNG images to the WebP format could significantly improve your site&#8217;s performance. Do you need help figuring out where to start your WebP journey?<\/p>\n\n\n\n<p>In this article, you\u2019ll learn everything you need to know about WebP, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What&#8217;s the WebP format, and why you should use it on WordPress.<\/li>\n\n\n\n<li>How WebP works on WordPress.<\/li>\n\n\n\n<li>Which browsers support WebP.<\/li>\n\n\n\n<li>Which WebP converter plugins are best for your needs.&nbsp;<\/li>\n\n\n\n<li>How to convert your images to WebP using a WordPress plugin like Imagify.<\/li>\n<\/ul>\n\n\n\n<p>&nbsp;Follow our guide to use WebP on WordPress properly!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s WebP Image Format?&nbsp;<\/h2>\n\n\n\n<p>WebP is <a href=\"https:\/\/imagify.io\/blog\/serve-next-gen-formats-wordpress\/\">a next-generation image format<\/a> created by Google that provides superior compression for web images compared to traditional formats. With WebP, you can serve smaller image files to your visitors while maintaining a quality comparable to JPEG or PNG. In other words, you save some KB without affecting the quality of your pictures.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"795\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Saving-up-to-80-on-my-file-size-with-WebP-conversion-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2681\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Saving-up-to-80-on-my-file-size-with-WebP-conversion-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Saving-up-to-80-on-my-file-size-with-WebP-conversion-Source-Imagify--300x298.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Saving-up-to-80-on-my-file-size-with-WebP-conversion-Source-Imagify--150x150.png 150w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Saving-up-to-80-on-my-file-size-with-WebP-conversion-Source-Imagify--768x763.png 768w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Saving-up-to-80-on-my-file-size-with-WebP-conversion-Source-Imagify--64x64.png 64w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Saving up to 80% on my file size with WebP conversion &#8211; Source: <a href=\"https:\/\/imagify.io\/\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why Should You Use WebP Images on WordPress: 3 Benefits<\/h2>\n\n\n\n<p>If you are still wondering if you should use WebP images on WordPress, the answer is yes! Here are 3 benefits of using WebP images that will make you want to convert all your JPEG and PNG images to the WebP format:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. You Make Your WordPress Site Run Faster with Smaller Images File Size<\/h3>\n\n\n\n<p>WebP format means smaller file sizes, meaning your browser can render the content to your visitors much faster.&nbsp;<\/p>\n\n\n\n<p>Google states that WebP images are, on average, 30% smaller than JPEG images of quality standards. To confirm their study, we ran our analysis and found that our images converted to WebP were smaller by even more than 30%. Here\u2019s an example below.&nbsp;<\/p>\n\n\n\n<p>Before uploading the images to my WordPress site, I converted all my JPEGs to WebP and saved up 50% on average:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"784\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/WebP-benefits-smaller-file-size-and-equal-quality-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2707\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/WebP-benefits-smaller-file-size-and-equal-quality-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/WebP-benefits-smaller-file-size-and-equal-quality-Source-Imagify--300x294.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/WebP-benefits-smaller-file-size-and-equal-quality-Source-Imagify--768x753.png 768w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/WebP-benefits-smaller-file-size-and-equal-quality-Source-Imagify--64x64.png 64w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WebP benefits: smaller file size and equal quality &#8211; Source: <a href=\"https:\/\/imagify.io\/\">Imagify<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. You Save on Bandwith&nbsp;<\/h3>\n\n\n\n<p>Smaller images require less data from your server to the user&#8217;s final device. If you use WebP, you can reduce your bandwidth consumption and, ultimately, limit the cost of your hosting provider.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. You Rank Better on Google&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Speed is important because it\u2019s a ranking factor and may impact your SEO performance. A faster website gives users a better experience, so Google is more likely to rank it higher. Since WebP images are lighter than JPEG and PNG formats, they load faster, which is also essential for offering a top-notch user experience.<\/p>\n\n\n\n<p>Google provides a suite of free tools designed to assess your website&#8217;s speed and overall user experience. One of these tools is <a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed Insights<\/a>, which uses the powerful Lighthouse technology to deliver comprehensive performance reports.&nbsp;And guess what? To improve performance and serve a higher user experience to your visitors, PageSpeed Insights recommends <a href=\"https:\/\/imagify.io\/blog\/serve-next-gen-formats-wordpress\/\">you serve images in next-gen formats such as WebP<\/a> or <a href=\"https:\/\/imagify.io\/blog\/how-to-convert-jpg-images-avif\/\">AVIF<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"215\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-format-is-recommended-to-speed-up-your-site-and-reduce-data-consumption-Source-PageSpeed-Insights.png\" alt=\"\" class=\"wp-image-2684\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-format-is-recommended-to-speed-up-your-site-and-reduce-data-consumption-Source-PageSpeed-Insights.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-format-is-recommended-to-speed-up-your-site-and-reduce-data-consumption-Source-PageSpeed-Insights-300x81.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-format-is-recommended-to-speed-up-your-site-and-reduce-data-consumption-Source-PageSpeed-Insights-768x206.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WebP format is recommended to speed up your site and reduce data consumption &#8211; Source: <a href=\"https:\/\/pagespeed.web.dev\/\">PageSpeed Insights<\/a><br><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\ud83d\udca1<strong>Key takeaway<\/strong>: WebP provides smaller file sizes and faster loading times than traditional image formats, making it an ideal format for the web.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Does WordPress Support WebP?<\/h2>\n\n\n\n<p>WordPress supports the WebP format since WordPress 5.8 was released on July 20, 2021. From that WordPress version forward, you can upload and use WebP images in your WordPress library without using any extra plugins.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create and Use WebP Images in WordPress<\/h2>\n\n\n\n<p>Creating WebP images on your WordPress site is easier than you might think. Keep reading to discover how to enable and use this format to enhance your site&#8217;s performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Upload WebP Images in WordPress<\/h2>\n\n\n\n<p>To upload WebP images, follow the process you usually do for JPEGs and PNGs. Go to the WordPress library and upload a new media file.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"340\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Updating-my-WebP-file-quickly-to-the-WordPress-library-Source-My-WordPress-admin-1-1.png\" alt=\"Updating my WebP file quickly to the WordPress library - Source: My WordPress admin\n\" class=\"wp-image-2686\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Updating-my-WebP-file-quickly-to-the-WordPress-library-Source-My-WordPress-admin-1-1.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Updating-my-WebP-file-quickly-to-the-WordPress-library-Source-My-WordPress-admin-1-1-300x128.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Updating-my-WebP-file-quickly-to-the-WordPress-library-Source-My-WordPress-admin-1-1-768x326.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Updating my WebP file quickly to the WordPress library &#8211; Source: My WordPress admin<br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Enable WebP in WordPress and Get WebP Images<\/h2>\n\n\n\n<p>You don\u2019t need to \u201cenable\u201d WebP in WordPress because the format is supported out of the box. You can simply upload your WebP images and use them anywhere when designing your site. However, note that WordPress <strong>does not offer WebP conversion<\/strong>. If you upload a JPEG and want to get a WebP image, you\u2019ll still need an online tool or a plugin to do the conversion.<br><br>WordPress plugins can convert directly from your WordPress admin, while online tools and software will do the conversion outside your WordPress installation. You\u2019ll need to re-upload the converted file to your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"705\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/how-to-use-webp-on-wordpress-2-ways.png\" alt=\"How to use WebP on WordPress - Source: Imagify\n\" class=\"wp-image-2705\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/how-to-use-webp-on-wordpress-2-ways.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/how-to-use-webp-on-wordpress-2-ways-300x264.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2024\/11\/how-to-use-webp-on-wordpress-2-ways-768x677.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">How to use WebP on WordPress &#8211; Source: <a href=\"https:\/\/imagify.io\/\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Check that WebP is Working on Your WordPress Site<\/h2>\n\n\n\n<p>There are two easy ways to check that your WordPress site is serving WebP images: by saving the image on your desktop or opening the image in a new tab. With both techniques, you can quickly check whether the image file extension is WebP.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Checking if WebP Works by Saving the Image:&nbsp;<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the page and right-click to save the image on your desktop. Select the <strong>\u201cSave Image As\u201d<\/strong> option.&nbsp;<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Same-image-as-button-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2688\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Same-image-as-button-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Same-image-as-button-Source-Imagify--300x188.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Same-image-as-button-Source-Imagify--768x480.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">\u201cSame image as\u201d button &#8211; Source <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><\/figcaption><\/figure>\n\n\n\n<p>2. If the file extension is WebP, that means the conversion worked and that your site is properly using WebP:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"169\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-extension-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2689\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-extension-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-extension-Source-Imagify--300x63.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-extension-Source-Imagify--768x162.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WebP extension &#8211; Source <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Checking if WebP Works by Opening It in a New Tab:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Do a right-click on the image you want to check and select the \u201c<strong>Open in a new tab<\/strong>\u201d button.&nbsp;<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"396\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Open-image-in-a-new-tab-button-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2690\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Open-image-in-a-new-tab-button-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Open-image-in-a-new-tab-button-Source-Imagify--300x149.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Open-image-in-a-new-tab-button-Source-Imagify--768x380.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">\u201cOpen image in a new tab\u201d button &#8211; Source <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a>&nbsp;<\/figcaption><\/figure>\n\n\n\n<p>2. Go to the new tab and check the file extension as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"158\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-extension-from-the-new-tab-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2691\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-extension-from-the-new-tab-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-extension-from-the-new-tab-Source-Imagify--300x59.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-extension-from-the-new-tab-Source-Imagify--768x152.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WebP extension from the new tab &#8211; Source <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Which Web Browsers Support WebP Images?<\/h2>\n\n\n\n<p>In 2024, the major browsers support WebP as long as they are up-to-date. There are a few exclusions for outdated versions that need to be mentioned, according to the <a href=\"http:\/\/caniuse.com\/webp\">Caniuse<\/a> website:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;If you are using a version of Edge inferior to version 18, then the WebP images won\u2019t be supported.&nbsp;<\/li>\n\n\n\n<li>For Safari users, Safari 14.0 \u2013 15.6 has full support of WebP but requires macOS 11 Big Sur or later.<\/li>\n\n\n\n<li>Outdated versions of Chrome (before 31), Opera (before 19), and Android Browser (before 4.2) offer only partial support for lossless, alpha, and animated WebP images.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"347\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-Supports-across-the-major-browsers-Source-caniuse-.png\" alt=\"\" class=\"wp-image-2693\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-Supports-across-the-major-browsers-Source-caniuse-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-Supports-across-the-major-browsers-Source-caniuse--300x130.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-Supports-across-the-major-browsers-Source-caniuse--768x333.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WebP Supports across the major browsers &#8211; Source: <a href=\"https:\/\/caniuse.com\/webp\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Which WebP Converter Plugin is Best For You?<\/h2>\n\n\n\n<p>The best WebP converter plugins for WordPress are Imagify, WebP Converter For Media, ShortPixel, and WebP Express.<\/p>\n\n\n\n<p>All of these plugins convert images to WebP easily on WordPress, but some also offer advanced image optimization features that can help you improve your performance scores on PageSpeed Insights.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If you are a WordPress agency\u2026<\/strong><\/h3>\n\n\n\n<p>Try Imagify for its automatic and user-friendly features. You can set it to optimize and convert images to WebP when uploading. If your clients add pictures, they\u2019ll be automatically optimized and converted without additional steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If you are a blogger with just a few images\u2026<\/strong><\/h3>\n\n\n\n<p>Choose WebP Express or WebP Converter For Media if you&#8217;re looking for straightforward WebP optimizers without extra advanced features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If you are a WooCommerce store owner\u2026<\/strong><\/h3>\n\n\n\n<p>Opt for Imagify or ShortPixel because you may need WebP conversion plus advanced options like <a href=\"https:\/\/imagify.io\/blog\/image-optimization-tips-ecommerce\/\">compression or auto-resizing for large image product files<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If you are a developer or a performance-focused WordPress user\u2026<\/strong><\/h3>\n\n\n\n<p>Imagify is your best ally for <a href=\"https:\/\/imagify.io\/blog\/optimize-images-page-speed-google\/\">passing PageSpeed Insights audits<\/a>, offering WebP conversion and advanced optimization with its Smart compression level. Imagify can compress your images up to 90% without impacting the visual quality.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If you are a photographer\u2026<\/strong><\/h3>\n\n\n\n<p>ShortPixel is worth considering because it offers WebP conversion combined with Glossy compression, meaning your images maintain top-notch quality to showcase your photography work.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\ud83d\udcd6 Do you still need help in finding the best WebP conversion plugins? <a href=\"https:\/\/imagify.io\/blog\/best-webp-plugins\/\">Check the 4 best WebP plugins for more details<\/a>.&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use WebP Images with Imagify<\/h2>\n\n\n\n<p>Imagify automatically converts your images to WebP directly from your WordPress admin (and it\u2019s free for up to 20MB of data a month!).cImagify is also the easiest image optimization WordPress plugin that compresses images without impacting their visual quality. Thanks to the <a href=\"https:\/\/imagify.io\/blog\/imagify-smart-compression\/\">Smart level compression mode<\/a>, Imagify does all the heavy lifting, ensuring a perfect balance between image compression and quality right after installing the plugin.<\/p>\n\n\n\n<p>Ultimately, you will get a faster website and boost your PageSpeed Insights score. Imagify can also help you address the PageSpeed Insights audits related to image optimization, such as \u201c<a href=\"https:\/\/imagify.io\/blog\/efficiently-encode-images-wordpress\/\">Efficiently encode images<\/a>\u201d and \u201c<a href=\"https:\/\/imagify.io\/blog\/serve-next-gen-formats-wordpress\/\">Serve images in next-gen formats<\/a>.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"684\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Imagify-WebP-converter-and-image-compressor-plugin-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2694\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Imagify-WebP-converter-and-image-compressor-plugin-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Imagify-WebP-converter-and-image-compressor-plugin-Source-Imagify--300x257.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Imagify-WebP-converter-and-image-compressor-plugin-Source-Imagify--768x657.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Imagify: WebP converter and image compressor plugin &#8211; Source: <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><\/figcaption><\/figure>\n\n\n\n<p>Here\u2019s how to use WebP images on WordPress thanks to Imagify:<br><br>1. Download and Install the free Imagify plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"288\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Installing-Imagify-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2695\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Installing-Imagify-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Installing-Imagify-Source-Imagify--300x108.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Installing-Imagify-Source-Imagify--768x276.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Installing Imagify &#8211; Source: <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><\/figcaption><\/figure>\n\n\n\n<p>2. Create a free account to get your API key.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"224\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Creating-your-API-key-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2696\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Creating-your-API-key-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Creating-your-API-key-Source-Imagify--300x84.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Creating-your-API-key-Source-Imagify--768x215.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Creating your API key &#8211; Source: <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><\/figcaption><\/figure>\n\n\n\n<p>3. Go to <strong>Settings<\/strong> &gt; <strong>Imagify<\/strong> &gt; <strong>Optimization Next-gen image format<\/strong>.<em> Imagify selects WebP by default and converts your images to WebP during optimization.&nbsp;<\/em><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"453\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Next-gen-section-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2697\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Next-gen-section-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Next-gen-section-Source-Imagify--300x170.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Next-gen-section-Source-Imagify--768x435.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Next-gen section &#8211; Source: <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><\/figcaption><\/figure>\n\n\n\n<p>4. Click on the <strong>Generate missing next-gen images versions<\/strong> button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"166\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Next-gen-button-to-convert-all-the-images-to-WebP-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2698\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Next-gen-button-to-convert-all-the-images-to-WebP-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Next-gen-button-to-convert-all-the-images-to-WebP-Source-Imagify--300x62.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/Next-gen-button-to-convert-all-the-images-to-WebP-Source-Imagify--768x159.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Next-gen button to convert all the images to WebP &#8211; Source: <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><\/figcaption><\/figure>\n\n\n\n<p>5. Go to the WordPress library to see that images are now in WebP. You will also see some indications about the whole image optimization process and the total savings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"383\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-generated-and-overall-savings-after-optimization-Source-Imagify-.png\" alt=\"\" class=\"wp-image-2700\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-generated-and-overall-savings-after-optimization-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-generated-and-overall-savings-after-optimization-Source-Imagify--300x144.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2023\/04\/WebP-generated-and-overall-savings-after-optimization-Source-Imagify--768x368.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WebP generated and overall savings after optimization &#8211; Source: <a href=\"https:\/\/imagify.io\/features\">Imagify<\/a><br><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\ud83d\udcd6 Read the <a href=\"https:\/\/imagify.io\/blog\/how-to-convert-images-to-webp\/\">full tutorial about converting images to WebP with Imagify<\/a> to see Imagify\u2019s impact on performance.&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>WordPress supports WebP formats like traditional PNGs or JPEGs, but if you need to <strong>convert<\/strong> your images to this next-gen format, you\u2019ll need a plugin like Imagify.<\/p>\n\n\n\n<p>Converting images to WebP is an excellent start for optimizing your pictures, but more can be done, such as compression and serving images at the correct size according to the user\u2019s screen.<\/p>\n\n\n\n<p>Imagify is the easiest image optimization plugin to help you convert images to WebP and apply powerful compression directly on WordPress. You don\u2019t take any risks because Imagify is free for up to 20MB per month! Try it, convert your images to WebP, optimize them with <a href=\"http:\/\/imagify.io\/pricing\">Imagify<\/a>, and enjoy the performance boost!<\/p>\n<a href=\"https:\/\/imagify.io\/optimizer\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter bottom-blog-post-cta\" src=\"https:\/\/imagify.io\/blog\/wp-content\/themes\/imagify\/assets\/img\/gwic-1.png\" alt=\"Imagify, decrease the size of your images, increase the speed of your website: try it for free\" width=\"690\" height=\"190\"><\/a>","protected":false},"excerpt":{"rendered":"<p>Using WebP images can speed up your site&#8217;s load times. In this post, you&#8217;ll learn everything you need to know about using WebP on your WordPress website.<\/p>\n","protected":false},"author":8,"featured_media":269,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image-optimization"],"_links":{"self":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/comments?post=242"}],"version-history":[{"count":38,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/242\/revisions"}],"predecessor-version":[{"id":2708,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/242\/revisions\/2708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media\/269"}],"wp:attachment":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media?parent=242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/categories?post=242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/tags?post=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}