{"id":380,"date":"2021-07-19T11:44:12","date_gmt":"2021-07-19T11:44:12","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=380"},"modified":"2024-12-02T14:29:04","modified_gmt":"2024-12-02T14:29:04","slug":"how-to-convert-images-to-webp","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/how-to-convert-images-to-webp\/","title":{"rendered":"How to Convert Images to WebP on WordPress with Imagify"},"content":{"rendered":"\n<p>Interested in converting your images to WebP on WordPress? <strong>Say hello to Imagify, our free plugin that optimizes your images and converts them to WebP.<\/strong><\/p>\n\n\n\n<p>In our guide, we explain how to deliver high-quality images without slowing down your site. If you already have hundreds of PNG or JPG images on your website, Imagify will optimize them and convert them to WebP automatically.&nbsp;<\/p>\n\n\n\n<p>Sounds promising? Let\u2019s dig into this modern WebP format to see how it impacts performance by shrinking image file sizes up to 35%!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is WebP Format?<\/h2>\n\n\n\n<p>WebP is an image format that offers image compression by reducing the file size but not compromising the quality. Developed by Google, WebP is a modern image file format containing lossless and lossy compression. The format can reduce image file size up to 35% smaller than JPEG and PNG images while retaining high quality. Best of both worlds, right?&nbsp;<\/p>\n\n\n\n<p>Visitors want quality AND a fast website. That\u2019s why there&#8217;ve been new formats coming out in recent years designed with minimizing files in mind while still retaining quality. \u201cWebP\u201d&nbsp; is definitively the most notable update in the past 10 years.&nbsp;<\/p>\n\n\n\n<p>In the example below &#8211; provided by <a href=\"https:\/\/developers.google.com\/speed\/webp\/gallery1\">the Google WebP website<\/a> &#8211; we compare two images with the same quality. One is JPEG, the other one is WebP, and we notice three things, namely:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The quality of the image remains the same in JPEG or WEBP<\/li>\n\n\n\n<li>The JPEG file size is 43.84 KB.<\/li>\n\n\n\n<li>The WebP file is 29.61 KB, which is much lighter than the JPEG format.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"355\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/same-quality-but-different-size-.png\" alt=\"JPEG vs WebP: same quality but different size - Source: WebP Gallery\n\" class=\"wp-image-384\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/same-quality-but-different-size-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/same-quality-but-different-size--300x133.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/same-quality-but-different-size--768x341.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"><br><\/figcaption><\/figure>\n\n\n\n<p>WebP format helps you achieve the following balance:&nbsp; <strong>High-quality images and&nbsp;Low file size<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Is WebP Better Than JPEG And PNG?<\/h2>\n\n\n\n<p>From a file size perspective, it is. Google found out that the average WebP file size was way smaller compared to the JPEG one. Additionally, WebP does not alter the visual quality of the image and makes your website load faster.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"316\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/05\/WebP-file-is-lighter-than-JPEG-file-with-the-same-quality-Source-Google-WebP-developers-.png\" alt=\"WebP file is lighter than JPEG file with the same quality - Source: Google WebP developers\" class=\"wp-image-1405\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/05\/WebP-file-is-lighter-than-JPEG-file-with-the-same-quality-Source-Google-WebP-developers-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/05\/WebP-file-is-lighter-than-JPEG-file-with-the-same-quality-Source-Google-WebP-developers--300x119.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/05\/WebP-file-is-lighter-than-JPEG-file-with-the-same-quality-Source-Google-WebP-developers--768x303.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">WebP file is lighter than JPEG file with the same quality &#8211; Source:<a href=\"https:\/\/developers.google.com\/speed\/webp\/gallery1\"> Google WebP developers<\/a><\/figcaption><\/figure>\n\n\n\n<p>You&#8217;ll learn more on this topic in the next section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why You Should Convert Images to WebP<\/h2>\n\n\n\n<p><strong>The main benefit of the WebP format is to create smaller image files while preserving the same image quality. <\/strong>Consequently, image compressions will result in speeding up your website.<\/p>\n\n\n\n<p>You may not realize this, but pictures take up so much space on your server. Not only does it eat up storage like crazy, but it can also slow down websites too and make your visitors run away.&nbsp;<\/p>\n\n\n\n<p>JPEG, PNG, and GIF are the formats that can be easily converted to WebP:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JPEG<\/strong>: the most common format, ideal for photos and visuals very rich in color<\/li>\n\n\n\n<li><strong>PNG: <\/strong>the recommended format for simple graphics, icons, and logos<\/li>\n\n\n\n<li><strong>GIF:<\/strong> for all the animated images that punctuate your messages<\/li>\n<\/ul>\n\n\n\n<p>As mentioned above, Google ran a <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_study\">WebP compression study<\/a> to see how WebP compares with JPEG and PNG formats in terms of file size. The results are interesting:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A WebP image is 25% smaller than a PNG image.<\/li>\n\n\n\n<li>A WebP image is 25-35% smaller than a JPEG image.<\/li>\n<\/ul>\n\n\n\n<p>These results indicate that WebP can provide significant compression improvements over JPEG and PNG. In the graph below, we see that a WebP image consistently required fewer bits per pixel than JPEG:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/WebP-compression-in-comparison-to-JPEG.png\" alt=\"\" class=\"wp-image-385\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/WebP-compression-in-comparison-to-JPEG.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/WebP-compression-in-comparison-to-JPEG-300x188.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/WebP-compression-in-comparison-to-JPEG-768x480.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p><strong>To sum up, here are seven facts to keep in mind about the WebP format<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Lossy WebP images are potentially 25-34% smaller than JPEG images.<\/li>\n\n\n\n<li>Lossless WebP images are potentially 25% smaller than PNG images.<\/li>\n\n\n\n<li>Just like JPEG or PNG, WebP has its own file extension \u201c.webp\u201d<\/li>\n\n\n\n<li>WebP supports both lossy and lossless compression without altering the visual quality.\u00a0<\/li>\n\n\n\n<li>WebP works with transparent (alpha) background<\/li>\n\n\n\n<li>WebP also supports animation, i.e. animated GIFs.<\/li>\n\n\n\n<li>Some web browsers (only a very few) do not support the WebP format. Check our list below to see which browsers display the WebP format properly:\u00a0<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"481\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/05\/Browsers-that-natively-support-WebP-May-2022-Source-Imagify-.png\" alt=\"Browsers that natively support WebP (May 2022) - Source: Imagify \" class=\"wp-image-1406\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/05\/Browsers-that-natively-support-WebP-May-2022-Source-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/05\/Browsers-that-natively-support-WebP-May-2022-Source-Imagify--300x180.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2022\/05\/Browsers-that-natively-support-WebP-May-2022-Source-Imagify--768x462.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Browsers that natively support WebP (May 2022) &#8211; Source: <a href=\"https:\/\/imagify.io\/\">Imagify&nbsp;<\/a><br><\/figcaption><\/figure>\n\n\n\n<p>Furthermore, Google PageSpeed Insights recommends you <strong><a href=\"https:\/\/imagify.io\/blog\/serve-next-gen-formats-wordpress\/\">serve Images in next-gen formats (WebP)<\/a><\/strong>, which means faster downloads and less data consumption. The web performance tool also suggests <strong>using a WordPress plugin<\/strong> to compress and convert your images to the optimal formats. <\/p>\n\n\n\n<p>Guess who\u2019s on the list? <a href=\"https:\/\/imagify.io\/optimizer\/#page\">Imagify<\/a>!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"570\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-plugin-recommended-by-Google-PageSpeed-Insights-to-speed-up-your-site.png\" alt=\"\" class=\"wp-image-386\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-plugin-recommended-by-Google-PageSpeed-Insights-to-speed-up-your-site.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-plugin-recommended-by-Google-PageSpeed-Insights-to-speed-up-your-site-300x214.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-plugin-recommended-by-Google-PageSpeed-Insights-to-speed-up-your-site-768x547.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">How to Convert Images to WebP&nbsp;<\/h2>\n\n\n\n<p>Imagify is one of the best WordPress plugins to convert your images to WebP and to optimize them.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"336\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-plugin.png\" alt=\"Imagify plugin\" class=\"wp-image-387\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-plugin.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-plugin-300x126.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-plugin-768x323.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>We all know online tools that can convert many formats (from JPG to PDF, for example). Those tools are not user-friendly, and most of them won\u2019t allow you to do bulk conversions for free.&nbsp;<\/p>\n\n\n\n<p>A plugin may be easier to convert your files to WebP. Let\u2019s see why. Things get a bit more complicated when it comes to WordPress. <strong><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">WordPress 5.8<\/a> allows you to upload WebP images but it doesn&#8217;t convert the original format to WebP<\/strong>. <\/p>\n\n\n\n<p>That&#8217;s why we recommend you upload PNG and JPEG images and let Imagify do the job. <strong>The Imagify plugin can automatically convert your images to WebP format in your WordPress dashboard<\/strong>. It will optimize any JPG, GIF, or PNG files on your website by shrinking them for a faster browsing experience without sacrificing quality. If you have images already added to your published pages, don\u2019t worry, Imagify will also convert them.<\/p>\n\n\n\n<p>Imagify automatically optimizes and converts WordPress images to WebP:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>While uploading new images<\/li>\n\n\n\n<li>On your existing ones (bulk feature, which will save you some precious time)<\/li>\n<\/ul>\n\n\n\n<p>What\u2019s more, <a href=\"https:\/\/imagify.io\/blog\/how-to-make-photos-load-faster-wordpress\/\">Imagify helps you make photos load faster on WordPress<\/a>. The plugin <a href=\"https:\/\/imagify.io\/blog\/how-to-resize-compress-multiple-images-online\/\">compresses multiple images in their original formats and resizes images to a set of max dimensions without losing quality<\/a>. It\u2019s not only a converter tool. It\u2019s also a plugin that helps your WordPress site run faster!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Follow our step-by-step guide to see how to convert images to WebP using Imagify:<\/h3>\n\n\n\n<p><strong>Step 1 &#8211; <a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\">Download Imagify for free<\/a><\/strong><\/p>\n\n\n\n<p>Activate the plugin and create a free API KEY.&nbsp;<\/p>\n\n\n\n<p>(Go to your email inbox to get your API key and paste it in the box below).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"357\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/API-key.png\" alt=\"\" class=\"wp-image-390\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/API-key.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/API-key-300x134.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/API-key-768x343.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p><strong>Step 2 &#8211; Setting up the WebP conversion option&nbsp;<\/strong><\/p>\n\n\n\n<p>Once you\u2019ve added your Imagify API key, go to <strong>Settings \u2192 Imagify<\/strong> and scroll to the \u201cOptimization Webp format\u201d section. Make sure that both boxes are checked as below:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"233\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Webp-format-conversion-Imagify-dashboard.png\" alt=\"Webp format conversion - Imagify dashboard\n\" class=\"wp-image-391\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Webp-format-conversion-Imagify-dashboard.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Webp-format-conversion-Imagify-dashboard-300x87.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Webp-format-conversion-Imagify-dashboard-768x224.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>The first box tells Imagify to convert your images to WebP; the second indicates the plugin to serve those WebP images to supported browsers.<\/p>\n\n\n\n<p><strong>Step 3 &#8211; Time to convert your images<\/strong><\/p>\n\n\n\n<p>Go to<strong> Media -&gt; Bulk Optimization <\/strong>and press the blue <strong>&nbsp;Imagify\u2019em all <\/strong>button:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"619\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/imagify-button.png\" alt=\"Imagify\u2019em all button\" class=\"wp-image-392\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/imagify-button.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/imagify-button-300x232.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/imagify-button-768x594.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p>That\u2019s it! You can get a faster website in only three steps with <a href=\"https:\/\/imagify.io\/pricing\/\">Imagify<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pricing of Imagify (and yes, a free plan is available!)<\/strong><\/h3>\n\n\n\n<p><strong>Starter plan: <\/strong>Imagify allows you to optimize and convert 20 MB of images per month for free (around 200 images).&nbsp;<\/p>\n\n\n\n<p><strong>Growth plan:<\/strong> If you need more than that, you can upgrade to a paid plan, which costs $4.99\/month for 500 MB (~5,000 images).<\/p>\n\n\n\n<p><strong>Infinite plan:<\/strong>\u00a0 $9.99\/month (billed yearly) for unlimited data. That\u2019s great if you have a website with thousands of images to optimize.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"443\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/imagify-pricing.png\" alt=\"The pricing can be found on Imagify\u2019s official website. \n\" class=\"wp-image-393\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/imagify-pricing.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/imagify-pricing-300x166.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/imagify-pricing-768x425.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"impact-webp-performance\">The Impact of WebP on Performance with Imagify<\/h2>\n\n\n\n<p>Let&#8217;s now see how to use Imagify to reduce the size of media files.<\/p>\n\n\n\n<p>For the analysis, we will run two scenarios using our WordPress dashboard:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>I\u2019ll upload a GIF, a PNG, a JPG and check the file size for each of them.\u00a0<\/li>\n\n\n\n<li>I\u2019ll activate Imagify, convert my 3 files from above<strong> to WebP<\/strong> and verify the new file size.\u00a0<\/li>\n<\/ol>\n\n\n\n<p>Let\u2019s run the analysis.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Impact of Imagify on my GIF file size:\u00a0<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>GIF file size &#8211; No Imagify<\/strong><\/td><td><strong>WebP Format &#8211; With Imagify&nbsp;<\/strong><\/td><\/tr><tr><td>816 KB<\/td><td>512 KB <\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/GnQlLdrW0I5ZPMFS0x5qNYDXO3vhRyepEbkjjQG1llu0WHNwixMyONtJVJXMtueb2TU4kobcZwwv-EOENpmNuvHuSHcsZTroXVLHDmPLRhYD5KEeWJMPDQQp_MFl0pO0gvS3V-3c\" width=\"298\" height=\"163\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/2FYInTwayQAldPXNxyV5YZv7xhCA_fmFyjKKoljlc-lw9nrpiunJ-cjSDiaAeCvl01p-09_Zr718Y893aJnSna7K0hLzfNR0xujxCNKPt7r5iSKa0Q62TWC6hCWoHrDYdR7kwI8B\" width=\"296\" height=\"219\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Impact of Imagify on my PNG\u00a0 file size:\u00a0<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>PNG file size &#8211; No Imagify<\/strong><\/td><td><strong>WebP Format &#8211; With Imagify<\/strong><\/td><\/tr><tr><td>67 KB<\/td><td>28 KB <\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/zl7xzBb2TnP6N-4_hT61kSAIiUfVqurCtjHhkeVO4gV5MLsVgdz6Lqv2hOtwPkBtmHIn0eDnDffIqd_ZJKRCCVe1hUGT9RXGKRtaAmfe1kxv5w-S6F7e8p9yZJqcqTBR8C8MqgR5\" width=\"298\" height=\"120\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/7nVyr7o2Y-FwWySTXWaKWgV0S9qrjSVok7G4T5a2Ok8u69stDf4GI3dx-2kAWksbPoLAtHMC9lDic3lL65MGnXAC1SuOLWm2C2gw1g1V88uz3jfQfIoaA2JnfwzmrEyWgrIWd8v2\" width=\"287\" height=\"163\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Impact of Imagify on my JPG\u00a0 file size:\u00a0<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>JPG file size &#8211; No Imagify<\/strong><\/td><td><strong>WebP Format &#8211; With Imagify<\/strong><\/td><\/tr><tr><td>755 KB<\/td><td>525 KB <\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/U7kCe8pX89jIUCW1lhpl6m2xcmUBb3gU9r5-uD1XXfzbJoRQ9h40e2cret5VwRjcKe9Wj7Kl1TBHwFoXsAbMyxwPSwKR0ChQ-nQXfpAEFpCHq-Nc6id0qdBsX9PxiXgKApGTEkXd\" width=\"298\" height=\"180\"><\/td><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/mV1TxZU0nTRYavSQAkrCdiP0AbV2OVNiHTVXRXnEc53Usb30Ey5xGnj6ef1jlhKZAobcutANShQgBpkdBfvCbA1CVCYLRWYYTozR6gSU0ZMlsLpP_FuPTTklLjNg9nT2NgzlG59x\" width=\"297\" height=\"147\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Did Imagify reduce my file size when converting them to WebP?&nbsp;<\/strong><\/p>\n\n\n\n<p>The answer is yes! As you saw, all file sizes have significantly decreased after using Imagify and the WebP format. Here&#8217;s a recap:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GIF \u2192 WebP<\/strong>: size went from 816 KB to 512 KB<\/li>\n\n\n\n<li><strong>PNG \u2192 WebP<\/strong>: size went from 67 KB to 28 KB<\/li>\n\n\n\n<li><strong>JPEG \u2192 WebP<\/strong>: size went from 755 KB to 525 KB.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Using Imagify to Improve My Performance Grade on Google PageSpeed Insights<\/h2>\n\n\n\n<p>For this performance audit, I\u2019ve built a page displaying some media: a JPG photo, a PNG element, and a GIF. <\/p>\n\n\n\n<p>We will use Google PageSpeed Insights and run the two following scenarios:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#scenario-1\">Scenario #1<\/a> &#8211; A performance audit of my page (PNG and JPG formats images + GIF) &#8211; no Imagify &#8211; no WebP<\/li>\n\n\n\n<li><a href=\"#scenario-2\">Scenario #2<\/a> &#8211; Performance grade of my page after converting all my media to WebP with Imagify\u00a0<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scenario-1\"><strong>Scenario #1<\/strong>: <strong>No Imagify &#8211; No WebP<\/strong><\/h3>\n\n\n\n<p>I\u2019m in the orange on Google PageSpeed Insights&nbsp; (88\/100), and not all my <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\">Core Web Vitals<\/a> are in the green:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"717\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Audit-without-Imagify-.png\" alt=\"Audit without Imagify - Source: PSI\n\n\" class=\"wp-image-394\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Audit-without-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Audit-without-Imagify--300x269.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Audit-without-Imagify--768x688.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"><br><\/figcaption><\/figure>\n\n\n\n<p>In the opportunities section, we can see several issues related to the format of my images, such as \u201cUse video formats for animated content\u201d or \u201cServe Images in next-gen formats\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"739\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Opportunities-section-PSI.png\" alt=\"Opportunities section - PSI\n\" class=\"wp-image-395\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Opportunities-section-PSI.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Opportunities-section-PSI-300x277.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Opportunities-section-PSI-768x709.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>If I had 50 pages with 200 products, I would be very worried about converting them manually\u2026 But luckily, Imagify can do that for me!&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scenario-2\">Scenario #2: WebP Format with Imagify<\/h3>\n\n\n\n<p>Let\u2019s now take a look at the results after converting all the media to WebP using Imagify.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"606\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-dashboard.png\" alt=\"\" class=\"wp-image-396\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-dashboard.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-dashboard-300x227.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Imagify-dashboard-768x582.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p><strong>My performance grade improved<\/strong>: I\u2019m in the green, with a 99\/100 score!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"732\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/My-green-score-thanks-to-Imagify-.png\" alt=\"My green score thanks to Imagify - Source: PSI\n\" class=\"wp-image-397\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/My-green-score-thanks-to-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/My-green-score-thanks-to-Imagify--300x275.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/My-green-score-thanks-to-Imagify--768x703.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>In the opportunities section, <strong>all my images-related issues are gone:&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"315\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Images-related-issues-are-solved-thanks-to-Imagify.png\" alt=\"Images related issues are solved thanks to Imagify - Source: PSI\n\n\" class=\"wp-image-398\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Images-related-issues-are-solved-thanks-to-Imagify.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Images-related-issues-are-solved-thanks-to-Imagify-300x118.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/07\/Images-related-issues-are-solved-thanks-to-Imagify-768x302.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>WebP is definitively an efficient way to reduce the image sizes and make your WordPress site load faster. This modern format saves on average ~25% more storage than JPEG or PNG files. Another good news is that the user experience will not be affected, seeing as the quality of the images remains the same.&nbsp;<\/p>\n\n\n\n<p>Also, don\u2019t worry if you have at least 200 of one type of image file (png or .jpg) in different sizes because our <a href=\"https:\/\/imagify.io\/optimizer\/#page\">powerful Imagify Plugin<\/a> will replace them with the optimized WebP format without sacrificing quality.&nbsp;<\/p>\n\n\n\n<p><strong>WordPress 5.8 will add support for WebP images (but won&#8217;t convert them from the original format to WebP). That&#8217;s why we still recommend you use a plugin to convert your files.<\/strong> Here\u2019s why:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The ability to upload WebP images directly to the Media Library won\u2019t fix the ~5% of visitors whose browsers don\u2019t support WebP.<\/li>\n\n\n\n<li>Images and pictures are usually in JPG or PNG, so to upload them and convert them in bulk, a plugin like Imagify can save you hundreds of hours.\u00a0<\/li>\n<\/ul>\n\n\n\n<p>What about <a href=\"https:\/\/imagify.io\/optimizer\/#page\">taking Imagify for a test drive<\/a>? It\u2019s free for around 200 images a month.&nbsp;<\/p>\n\n\n\n<p>And remember, if you have any questions about using WebP on your WordPress site, please ask us in the comments below!<\/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>Looking for an efficient way to convert your images to WebP and improve performance? Read our article and learn how Imagify can easily help you!<\/p>\n","protected":false},"author":8,"featured_media":436,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-380","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\/380","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=380"}],"version-history":[{"count":61,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":2711,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/380\/revisions\/2711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media\/436"}],"wp:attachment":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}