{"id":824,"date":"2021-10-13T09:15:48","date_gmt":"2021-10-13T09:15:48","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=824"},"modified":"2024-03-07T11:28:52","modified_gmt":"2024-03-07T11:28:52","slug":"serve-next-gen-formats-wordpress","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/serve-next-gen-formats-wordpress\/","title":{"rendered":"How to Serve Images in Next-Gen Formats on WordPress: Everything You Should Know"},"content":{"rendered":"\n<p>If you have run a performance audit on Google PageSpeed Insights, you might have seen the \u201cserve images in next-gen formats\u201d opportunity popping up.&nbsp;<\/p>\n\n\n\n<p>Content is king but the format you\u2019ll use to deliver it on your WordPress site also matters. Next-gen (short for next-generation) formats are a way to <a href=\"https:\/\/imagify.io\/blog\/how-to-make-photos-load-faster-wordpress\/\">speed up loading times for images<\/a> on websites. They can be loaded in modern browsers with embedded compression information, so visitors won&#8217;t have to wait forever.<\/p>\n\n\n\n<p>This article will go over the next-gen formats available and how to serve images in these particular formats on WordPress to make your site faster and <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/\">improve your Lighthouse performance score<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Are Next-Gen Formats and Why You Should Use Them<\/h2>\n\n\n\n<p>Next-gen images offer superior compression and quality. They&#8217;re perfect for web use as they take up less data while maintaining the same high level of image quality.&nbsp;<\/p>\n\n\n\n<p>There are two main next-gen formats you can use for your images on WordPress, namely:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/imagify.io\/blog\/how-to-use-webp-images-wordpress\/\">WebP<\/a> (developed by Google) is an image format that utilizes both lossy and lossless compression formats. You get a high-quality image with a small file size! WebP is definitively an excellent replacement for JPEG, PNG, and GIF images, as the quality of the image is also preserved:&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"278\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Same-quality-perceived-by-the-visitor-Source-multiplemedia.com_.png\" alt=\"\" class=\"wp-image-828\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Same-quality-perceived-by-the-visitor-Source-multiplemedia.com_.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Same-quality-perceived-by-the-visitor-Source-multiplemedia.com_-300x104.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Same-quality-perceived-by-the-visitor-Source-multiplemedia.com_-768x267.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Same quality perceived by the visitor &#8211; Source: <a href=\"https:\/\/www.multiplemedia.com\/blog\/webp\">multiplemedia.com<\/a><br><\/figcaption><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/AV1#AV1_Image_File_Format_(AVIF)\">AVIF<\/a> (developed by Alliance for Open Media) is an image file format that makes images smaller while keeping the same image quality. AVIF tends to compress the files even more than WebP, but AVIF is behind for browser support as a young file format. As a result, we encourage you to use the WebP format for your WordPress site. <\/li>\n<\/ul>\n\n\n\n<p>Google PageSpeed Insights also recommends you to serve images in next-gen formats like WebP and AVIF rather than PNG or 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=\"421\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Serving-images-in-WebP-or-AVIF-to-help-your-page-load-faster-Source-PSI-.png\" alt=\"\" class=\"wp-image-829\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Serving-images-in-WebP-or-AVIF-to-help-your-page-load-faster-Source-PSI-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Serving-images-in-WebP-or-AVIF-to-help-your-page-load-faster-Source-PSI--300x158.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Serving-images-in-WebP-or-AVIF-to-help-your-page-load-faster-Source-PSI--768x404.png 768w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Serving-images-in-WebP-or-AVIF-to-help-your-page-load-faster-Source-PSI--360x190.png 360w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Serving images in WebP or AVIF to help your page load faster &#8211; Source: PSI&nbsp;<br><\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>What Are the Benefits of Serving Images in a Next-Gen Format Like WebP?&nbsp;<\/strong><\/h2>\n\n\n\n<p><br>WebP images are around <a href=\"https:\/\/developers.google.com\/speed\/webp\">30% smaller in size<\/a> compared to PNGs or JPEGs. As shown below, the PNG format does a good job at optimizing images, but it\u2019s outperformed by WebP (the last one).&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"459\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Images-having-smaller-file-size-in-WebP-format-Source-__Smashing-Magazine.png\" alt=\"\" class=\"wp-image-831\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Images-having-smaller-file-size-in-WebP-format-Source-__Smashing-Magazine.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Images-having-smaller-file-size-in-WebP-format-Source-__Smashing-Magazine-300x172.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Images-having-smaller-file-size-in-WebP-format-Source-__Smashing-Magazine-768x441.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Images having smaller file size in WebP format &#8211; Source: \u200b\u200bSmashing Magazine<\/figcaption><\/figure><\/div>\n\n\n<p>Bear in mind that for most websites, <a href=\"https:\/\/imagify.io\/blog\/reasons-images-slow-websites\/\">images are the main culprits to slow down your site<\/a>. Large images not only slow down your site but also increase the weight of the page. This will impact your performance on mobile because a heavy page will take longer to load on mobile networks.&nbsp;<\/p>\n\n\n\n<p>Finally, website speed is a major factor taken into account by Google when determining rankings. If you don\u2019t want to appear on page 5, then remember to optimize your images using a next-gen format like WebP.<br><br>Let\u2019s see how to convert your images to WebP on WordPress.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Serve Images in Next-Gen Formats on WordPress<\/h2>\n\n\n\n<p>The easiest and fastest way to convert images into next-gen formats is to use a WordPress plugin. However, you can also optimize and convert your images manually.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s go over both options.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Option 1 &#8211; How to Convert Images in Next-Gen Formats <strong>With<\/strong> a Plugin<\/h3>\n\n\n\n<p>Like always, using a WordPress plugin saves you a precious amount of time. Even Google recommends using a plugin to convert your uploaded images to WebP or Avif.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"693\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/PSI-recommending-WordPress-plugins-.png\" alt=\"\" class=\"wp-image-832\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/PSI-recommending-WordPress-plugins-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/PSI-recommending-WordPress-plugins--300x260.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/PSI-recommending-WordPress-plugins--768x665.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">PSI recommending WordPress plugins&nbsp;<br><\/figcaption><\/figure><\/div>\n\n\n<p>There are six&nbsp; major plugins you can use to optimize your images and serve them into next-gen formats, namely:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/imagify.io\/pricing\/\">Imagify<\/a> &#8211; a free WebP conversion plugin for around 200 images. Imagify also resize and compress your images to boost performance <em>(bonus: <a href=\"#impact-performance\">full tutorial and performance test included in our article<\/a>)<\/em>.<br><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/webp-express\/\"><em>WebP express <\/em><\/a><em>&#8211; <\/em>adds a simple line of code to serve WebP images.<br><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\">EWWW<\/a> &#8211; a smart conversion option to get the right image format for the job (JPG, PNG, GIF, or WebP).<br><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\">Shortpixel Image Optimizer<\/a> &#8211; converts any JPEG, PNG, or GIF to WebP and AVIF.<br><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\">Smush<\/a> &#8211; converts to WebP and automatically serve images in Next-Gen WebP format (pro version only).<br><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/webp-converter-for-media\/\">WebP converter for media <\/a>&#8211; replaces files in standard JPEG, PNG, and GIF formats with WebP format.<\/li>\n<\/ol>\n\n\n\n<p><strong>How to Convert Images to WebP Using Imagify<\/strong><\/p>\n\n\n\n<p>Let\u2019s see an example of WebP conversion using the Imagify plugin. It takes only three steps<\/p>\n\n\n\n<p><strong>Step 1 &#8211; <\/strong><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\">Download<\/a> and install Imagify for free. Activate the plugin and create your API key.<br><\/p>\n\n\n\n<p><strong>Step 2 &#8211; <\/strong>Go to <strong>Settings &gt; Imagify <\/strong>and scroll to the <strong>Optimization <\/strong>tab.<br>Select \u201c<strong>Create WebP version of images<\/strong>\u201d and \u201c<strong>Display images in WebP format on the site<\/strong>\u201d as well as the second option \u201c<strong>Use &lt;picture&gt; tags<\/strong>\u201d.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"308\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/converting-images-to-WebP-options-with-Imagify.png\" alt=\"\" class=\"wp-image-836\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/converting-images-to-WebP-options-with-Imagify.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/converting-images-to-WebP-options-with-Imagify-300x116.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/converting-images-to-WebP-options-with-Imagify-768x296.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p><strong>Step 3 &#8211; <\/strong>Click on the <strong>Generate missing WebP versions <\/strong>blue<strong> <\/strong>button.&nbsp;<\/p>\n\n\n\n<p>Congratulations, you are now serving visitors WebP image formats, as you can see in the WordPress library:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"189\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/WebP-images-WordPress-Library-1.png\" alt=\"WebP images WordPress library\" class=\"wp-image-840\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/WebP-images-WordPress-Library-1.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/WebP-images-WordPress-Library-1-300x71.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/WebP-images-WordPress-Library-1-768x181.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p>Important note: your newly generated WebP images will not be displayed in the WordPress library. If you want to verify that the conversion was successful, then open the web page showing the image. Then go to the <strong>Chrome Developer <\/strong>tab &gt; <strong>Inspect element<\/strong> &gt; <strong>Network<\/strong> &gt; filter by <strong>IMG<\/strong> and look at the <strong>Type<\/strong> column.&nbsp;<\/p>\n\n\n\n<p>You should now see the \u201cWebP\u201d format associated with the image.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"393\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-WordPress-site-serving-WebP-format-images-thanks-to-Imagify-Source-Chrome-Dev-Tools-.png\" alt=\"\" class=\"wp-image-838\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-WordPress-site-serving-WebP-format-images-thanks-to-Imagify-Source-Chrome-Dev-Tools-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-WordPress-site-serving-WebP-format-images-thanks-to-Imagify-Source-Chrome-Dev-Tools--300x147.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-WordPress-site-serving-WebP-format-images-thanks-to-Imagify-Source-Chrome-Dev-Tools--768x377.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">My WordPress site serving WebP format images thanks to Imagify &#8211; Source: Chrome Dev Tools<br><\/figcaption><\/figure><\/div>\n\n\n<p>To learn more next-gen format conversions, we recommend following our detailed guide about serving<a href=\"https:\/\/imagify.io\/blog\/how-to-convert-images-to-webp\/\"> images to WebP using Imagify<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>\ud83d\udd0a Important to note<\/strong>: as of March 2024, <a href=\"https:\/\/imagify.io\/blog\/convert-images-to-avif-performance\/\">Imagify also converts images to Avif<\/a>, the other next-gen format recommended by Google to make your images lighter.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Option 2 &#8211; How to Serve Images in Next-Gen Formats <strong>Without<\/strong> a Plugin<\/h3>\n\n\n\n<p>If you don\u2019t feel like using a plugin to convert your images to the next-gen format, you can manually add a piece of code. Here are two different options you can follow for your WordPress site.&nbsp;<\/p>\n\n\n\n<p><strong>1. Directly edit your WordPress .htaccess file&nbsp;<\/strong><\/p>\n\n\n\n<p>We recommend you follow this option <strong>only<\/strong> if you are very comfortable coding and editing your site files. The .htaccess file is a powerful website file that controls the high-level configuration of your website.&nbsp;<\/p>\n\n\n\n<p>Place the following code from <a href=\"https:\/\/github.com\/vincentorback\/WebP-images-with-htaccess\">GitHub <\/a>in your .htaccess file to replace jpg\/png\/gif images with WebP images:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;IfModule mod_rewrite.c&gt;\n  RewriteEngine On\n\n  # Check if browser supports WebP images\n  RewriteCond %{HTTP_ACCEPT} image\/webp\n\n  # Check if WebP replacement image exists\n  RewriteCond %{DOCUMENT_ROOT}\/$1.webp -f\n\n  # Serve WebP image instead\n  RewriteRule (.+)\\.(jpe?g|png|gif)$ $1.webp &#091;T=image\/webp,E=REQUEST_image]\n&lt;\/IfModule&gt;\n\n&lt;IfModule mod_headers.c&gt;\n  # Vary: Accept for all the requests to jpeg, png and gif\n  Header append Vary Accept env=REQUEST_image\n&lt;\/IfModule&gt;\n\n&lt;IfModule mod_mime.c&gt;\n  AddType image\/webp .webp\n&lt;\/IfModule&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>2. Use the &lt;picture&gt; element in your HTML<\/strong><\/p>\n\n\n\n<p>Modifying the .htaccess file can be tricky. A more responsible option is to <a href=\"https:\/\/googlechrome.github.io\/samples\/picture-element\/\">use the &lt;picture&gt; tag<\/a>. In that case, the browser will automatically choose the appropriate file format to display.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;picture&gt;\n  &lt;source srcset=\"\/path\/to\/image.webp\" type=\"image\/webp\"&gt;\n  &lt;img src=\"\/path\/to\/image.jpg\" alt=\"\"&gt;\n&lt;\/picture&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"impact-performance\">The Impact of WebP on Performance<\/h2>\n\n\n\n<p>As seen above, you can use the Imagify plugin to convert your WordPress images to WebP, the next-gen format recommended by Google. Imagify also allows you to <a href=\"https:\/\/imagify.io\/blog\/how-to-resize-compress-multiple-images-online\/\">optimize multiple images by resizing and compressing them automatically (and in bulk)<\/a>.<\/p>\n\n\n\n<p>It would be interesting to run a few performance tests to confirm what we\u2019ve been saying. I\u2019ll run two scenarios:&nbsp;<\/p>\n\n\n\n<p><strong><a href=\"#scenario-1\">Scenario 1 &#8211; Performance results with JPEG images (no Imagify)<\/a><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>13 images served in the JPEG format<\/li>\n\n\n\n<li>Images are not optimized&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong><a href=\"#scenario-2\">Scenario 2 &#8211; Performance results with WebP&nbsp;images and aggressive optimization mode (with Imagify)<\/a><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>13 images converted and served to the WebP format&nbsp;<\/li>\n\n\n\n<li>Optimized images&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong>Performance tools used:<\/strong><\/p>\n\n\n\n<p>Google PageSpeed Insights and WebPageTest<\/p>\n\n\n\n<p><strong>My test site:&nbsp;<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"1024\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-test-site-642x1024.png\" alt=\"\" class=\"wp-image-844\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-test-site-642x1024.png 642w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-test-site-188x300.png 188w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-test-site-768x1226.png 768w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-test-site.png 800w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"scenario-1\"><strong>Scenario 1: Performance results with JPEG images (no Imagify)<\/strong><\/h3>\n\n\n\n<p>We start the audit with all my images served in JPEG. On average, their size is 270 KB.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"470\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/JPEG-images-and-their-respective-size-source-Chrome-Dev-Tools.png\" alt=\"\" class=\"wp-image-845\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/JPEG-images-and-their-respective-size-source-Chrome-Dev-Tools.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/JPEG-images-and-their-respective-size-source-Chrome-Dev-Tools-300x176.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/JPEG-images-and-their-respective-size-source-Chrome-Dev-Tools-768x451.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">JPEG images and their respective size &#8211; Source: Chrome Dev Tools<\/figcaption><\/figure><\/div>\n\n\n<p>Now let\u2019s have a look at PSI. I\u2019m getting an orange score on mobile (75\/100) and the <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-largest-contentful-paint\/\">Largest Contentful Paint score<\/a> in the red. The LCP score is relevant, especially because the LCP element that affects performance is an image (as it often is). There is room for improvement.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"524\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-mobile-score-no-WebP-no-Imagify-Source-PSI-.png\" alt=\"\" class=\"wp-image-847\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-mobile-score-no-WebP-no-Imagify-Source-PSI-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-mobile-score-no-WebP-no-Imagify-Source-PSI--300x197.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/My-mobile-score-no-WebP-no-Imagify-Source-PSI--768x503.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">My mobile score (no WebP &#8211; no Imagify) &#8211; Source: PSI<\/figcaption><\/figure><\/div>\n\n\n<p>On top of that, PSI has flagged three images-related issues:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Properly size images (especially from mobile)<\/li>\n\n\n\n<li>Serve images in next-gen formats<\/li>\n\n\n\n<li>Image elements do not have explicit width and height<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>KPIs&nbsp;<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Mobile Score &#8211; JPEG images &#8211; No Imagify<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Overall grade&nbsp;<\/td><td class=\"has-text-align-center\" data-align=\"center\">75\/100&nbsp;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">PSI Audit&nbsp;<\/td><td class=\"has-text-align-center\" data-align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/N0mC-xMyBjwW3UjGvdzHJZApT-DV97ldpOGTSW57HOwqT45ItLN_Lw3UMu1yasArQPnyqdM-gqSZF_WUWcV-MvQaASF8ZihHc9BygqaGRoekEc7TfVjrXiFE-I26Lb_DK7hV78G6=s0\" width=\"286\" height=\"203\"><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Largest Contentful Paint<\/td><td class=\"has-text-align-center\" data-align=\"center\">4.9 s<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Page size<\/td><td class=\"has-text-align-center\" data-align=\"center\">1.2 MB&nbsp;<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">HTTP requests<\/td><td class=\"has-text-align-center\" data-align=\"center\">22<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Load time<\/td><td class=\"has-text-align-center\" data-align=\"center\">2.890 s<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scenario-2\"><strong>Scenario 2: Performance results with WebP images and \u201cAggressive\u201d optimization mode (with Imagify)<\/strong><\/h3>\n\n\n\n<p>Now it\u2019s time to convert my 13 JPEG images to WebP and optimize them with Imagify.&nbsp;<\/p>\n\n\n\n<p>To do so, we go to <strong>Settings <\/strong>&gt; <strong>Imagify &gt; Imagify\u2019em all<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"487\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/bulk-optimization-imagifyemall.png\" alt=\"\" class=\"wp-image-848\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/bulk-optimization-imagifyemall.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/bulk-optimization-imagifyemall-300x183.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/bulk-optimization-imagifyemall-768x468.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p>That\u2019s it. My images are now optimized and served in WebP. <strong>We notice an important drop in the file size. It\u2019s confirmed, WebP makes your images lighter.&nbsp;<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"446\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Smaller-images-thanks-to-the-WebP-format-and-Imagify-optimization-.png\" alt=\"\" class=\"wp-image-849\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Smaller-images-thanks-to-the-WebP-format-and-Imagify-optimization-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Smaller-images-thanks-to-the-WebP-format-and-Imagify-optimization--300x167.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Smaller-images-thanks-to-the-WebP-format-and-Imagify-optimization--768x428.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Smaller images thanks to the WebP format and Imagify optimization&nbsp;<br><\/figcaption><\/figure><\/div>\n\n\n<p>We can now run another audit on Google PageSpeed Insights to see if my performance has improved with Imagify. The results are great. <strong>My score went from 75\/100 to 92\/100 on mobile!<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"611\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Improved-PSI-score-on-mobile-using-Imagify-.png\" alt=\"\" class=\"wp-image-850\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Improved-PSI-score-on-mobile-using-Imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Improved-PSI-score-on-mobile-using-Imagify--300x229.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/Improved-PSI-score-on-mobile-using-Imagify--768x587.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Improved PSI score on mobile using Imagify&nbsp;<br><\/figcaption><\/figure><\/div>\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>KPIs<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Mobile Score &#8211; JPEG images&nbsp;<\/strong><br>(<strong>No Imagify<\/strong>)<\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Mobile Score &#8211; WebP&nbsp; images and Aggressive mode (With Imagify)<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Overall grade&nbsp;<\/td><td class=\"has-text-align-center\" data-align=\"center\">75\/100&nbsp;<\/td><td class=\"has-text-align-center\" data-align=\"center\">92\/100<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">PSI Audit&nbsp;<\/td><td class=\"has-text-align-center\" data-align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/N0mC-xMyBjwW3UjGvdzHJZApT-DV97ldpOGTSW57HOwqT45ItLN_Lw3UMu1yasArQPnyqdM-gqSZF_WUWcV-MvQaASF8ZihHc9BygqaGRoekEc7TfVjrXiFE-I26Lb_DK7hV78G6=s0\" width=\"128\" height=\"91\"><\/td><td class=\"has-text-align-center\" data-align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Ec9uzo2Aid8hHiXd0eMCRcaLtDsmFDRUv9mZBeG8uVUtcj6sEt8-zZ8EG58I2GGbfHy6OUL6Or9-T_lY9FzI5Avj3kMhossy14unSw92S71_rIwiMTT0kdJHyxXW0B2hDtsiSGbB=s0\" width=\"216\" height=\"59\"><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Largest Contentful Paint<\/td><td class=\"has-text-align-center\" data-align=\"center\">4.9 s<\/td><td class=\"has-text-align-center\" data-align=\"center\">3.0 s<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Page size<br><\/td><td class=\"has-text-align-center\" data-align=\"center\">1.2 MB&nbsp;<\/td><td class=\"has-text-align-center\" data-align=\"center\">714 KB<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">HTTP requests<br><\/td><td class=\"has-text-align-center\" data-align=\"center\">22&nbsp;<\/td><td class=\"has-text-align-center\" data-align=\"center\">17<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Load time<br><\/td><td class=\"has-text-align-center\" data-align=\"center\">2.890 s<\/td><td class=\"has-text-align-center\" data-align=\"center\">1.059 s<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><br><br>In conclusion,<strong> Imagify made our website faster on mobile:<\/strong> the page is lighter, the number of HTTP requests has dropped, and even my load time is much better.&nbsp;<\/p>\n\n\n\n<p>Last but not least, Imagify has also addressed three main issues previously flagged by PSI:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"215\" src=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/psi-images-related-issues-addressed-with-imagify-.png\" alt=\"PSI image issue solved thanks to Imagify\" class=\"wp-image-851\" srcset=\"https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/psi-images-related-issues-addressed-with-imagify-.png 800w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/psi-images-related-issues-addressed-with-imagify--300x81.png 300w, https:\/\/imagify.io\/blog\/wp-content\/uploads\/2021\/10\/psi-images-related-issues-addressed-with-imagify--768x206.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure><\/div>\n\n\n<p>\u201cServe images in next-gen formats\u201d, \u201cProperly size image\u201d and \u201cEfficiently encode images\u201d are now a passed audit thanks to Imagify.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>Overall, we\u2019ve seen that serving images in next-gen formats is a great step toward performance improvement. WebP format &#8211; along with optimizing and resizing images &#8211; is a winning combination to speed up your WordPress site.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>File size using JPEG<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>File size using WebP + compressed and resized images&nbsp;(around 80% savings thanks to Imagify)<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/rlJ0mQha5rNZcv36H8Uu8eXlKonlkF2l-5kdOE94g6fBWxvKqFbm35YPvtbP0iInslEkdS66_BCC8ghi8Iyi4o6m2aIqrj_ezAdHjAiNoFNrZjFYawwzkfZPa5PxE5bXas6vB9sk=s0\" width=\"286\" height=\"168\"><strong><\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/Do08a2pHxs9_OJQar_-oM1VsgTvSGX9Pj1J9VvwQI1dyh5STLzQImMQtyu6IPSUKc2AL5EfR06XmT_vGgBwvCgE3A9netdjitGM9bFtufKEctyNrTSEi-B54Pel69lESTZT3N0AG=s0\" width=\"286\" height=\"160\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>The conversion from JPEG or PNG to a next-gen format like WebP and Avif is very easy to do with a plugin like Imagify<\/strong>. On top of that, Imagify also compressed and resized our WordPress images, which made us move to a green score on mobile (92\/100 on Google PageSpeed Insights). It\u2019s time to optimize your images and to serve them in WebP. <\/p>\n\n\n\n<p>Conduct your audit and try <a href=\"https:\/\/imagify.io\/optimizer\/#page\">Imagify for free<\/a> today!<\/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>Wondering what next-gen formats are and how you can optimize your images and address the PageSpeed Insights recommendation? We&#8217;ve got you covered in this article.<\/p>\n","protected":false},"author":8,"featured_media":826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-824","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\/824","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=824"}],"version-history":[{"count":45,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/824\/revisions"}],"predecessor-version":[{"id":2402,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/posts\/824\/revisions\/2402"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media\/826"}],"wp:attachment":[{"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/media?parent=824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/categories?post=824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imagify.io\/blog\/wp-json\/wp\/v2\/tags?post=824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}