{"id":17798,"date":"2023-12-21T11:00:01","date_gmt":"2023-12-21T11:00:01","guid":{"rendered":"https:\/\/kwebby.com\/blog\/?p=17798"},"modified":"2024-07-08T09:56:38","modified_gmt":"2024-07-08T09:56:38","slug":"serve-images-in-next-gen-formats","status":"publish","type":"post","link":"https:\/\/kwebby.com\/blog\/serve-images-in-next-gen-formats\/","title":{"rendered":"How to Serve Images in Next-Gen Formats (4 Fixes)"},"content":{"rendered":"\n<p>In the realm of web performance optimization, serving images in Next-Gen formats is a prominent solution for accelerating page load times and enhancing user experience. Google PageSpeed Insights or Lighthouse often flags &#8220;Serve images in next-gen formats&#8221; as a common issue affecting page speed performance.<\/p>\n\n\n\n<p>This guide is designed to demystify the concept of <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/uses-webp-images\/\" data-type=\"link\" data-id=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/uses-webp-images\/?utm_source=lighthouse&amp;utm_medium=lr\" target=\"_blank\" rel=\"noreferrer noopener\">Next-Gen image formats<\/a>, outlining stepwise instructions on how to convert and serve these modern formats. Embracing these techniques will not only optimize your PageSpeed Insights score but also significantly improve your website&#8217;s overall performance.<\/p>\n\n\n\n<p>Also checkout ;- <a href=\"https:\/\/kwebby.com\/blog\/google-core-web-vitals\/\">What is Google Core Web Vitals? Step-by-step Guide to Improve it<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are Next-Gen Image Formats?<\/h2>\n\n\n\n<p>Next-gen image formats refer to modern file formats that offer <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/c_study\" data-type=\"link\" data-id=\"https:\/\/developers.google.com\/speed\/webp\/docs\/c_study\" target=\"_blank\">superior compression and better Image quality<\/a> over traditional image formats like JPEG, PNG, and GIF Images.<\/p>\n\n\n\n<p>These Next gen formats include WebP and AVIF images which offers Lossy and lossless compression and they are often called as Web Picture formats <a href=\"https:\/\/developers.google.com\/speed\/webp\" target=\"_blank\" rel=\"noopener noreferrer\">by Google.<\/a><\/p>\n\n\n\n<p>You can read about <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/compression\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/developers.google.com\/speed\/webp\/docs\/compression\" rel=\"noreferrer noopener\">WEBP Compression techniques in detail here<\/a>.<\/p>\n\n\n\n<p>WEBP and AVIF are modern Image formats for the Web and They use more efficient encoding methods to reduce file sizes while maintaining high visual quality. This results in faster image loading and improved visual appeal for users even for Animated Images like GIFs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why are Next-Gen Image Formats Important?<\/h2>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1883\" height=\"869\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-127.png\" alt=\"\" class=\"wp-image-17807\" style=\"width:624px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-127.png 1883w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-127-300x138.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-127-1024x473.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-127-768x354.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-127-1536x709.png 1536w\" sizes=\"auto, (max-width: 1883px) 100vw, 1883px\" \/><\/figure>\n\n\n\n<p>Images Served in Next-gen image formats play a crucial role in website performance, particularly regarding the web page speed at which a site loads and responds to user interactions. The speed of a website is often determined by factors such as the load times of content and the server&#8217;s response to browser requests.<\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/explodingtopics.com\/blog\/mobile-internet-traffic\">As reports states<\/a> that over 55% traffic comes from mobile devices on websites and over 92%+ uses Mobile devices to browse internet, therefore, speed is everything, serving images in smaller image files with same quality of existing images in next gen formats like WEBP is the only solution for webmasters.<\/p>\n\n\n\n<p>A pivotal aspect of this speed equation lies in the balance between image size and quality. Often, you may find yourself in a predicament;<\/p>\n\n\n\n<p><strong>using high-quality images with large file sizes can lead to poor page load times while opting for low-quality images with smaller file sizes can result in faster load times but a diminished user experience due to inferior visual quality.<\/strong><\/p>\n\n\n\n<p>Next-gen image formats help alleviate this problem by offering the best of both worlds;<\/p>\n\n\n\n<p><strong>superior image quality and smaller file sizes, thanks to advanced compression technology.<\/strong><\/p>\n\n\n\n<p>This is why Google&#8217;s PageSpeed Insights tool often recommends using Next-Gen formats, as they significantly enhance your website&#8217;s overall performance and user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Browser Compatibility: WebP vs AVIF<\/h2>\n\n\n\n<p>When considering the adoption of next-gen image formats for your website, it&#8217;s crucial to understand the browsers support to accept WEBp images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">WebP<\/h3>\n\n\n\n<p>WebP, a pioneer in the field of next-gen image formats, boasts wide-ranging browser support. Whether your users are on <strong>Google Chrome, Mozilla Firefox, Opera, Safari, or Microsoft Edge<\/strong>, you can rest assured knowing that WebP images will load seamlessly, ensuring a visually rich and fast website experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">AVIF<\/h3>\n\n\n\n<p>On the other hand, AVIF, though powerful in its compression and quality capabilities, is yet to achieve comprehensive browser compatibility. <strong>As of now, it doesn&#8217;t have support in Safari and Microsoft Edge<\/strong>. This means if your website audience predominantly uses these browsers, you might want to hold off on using AVIF until more extensive support is rolled out.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution #1 &#8211; Convert Your Images using WEBP Converter<\/h2>\n\n\n\n<p>To convert images to Next Gen Images like WEBP images, There are many WEBP Converters available and you browse the list from <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/www.google.com\/search?q=webp+converter+online\">Google itself here<\/a>, but we will use the AnyWEBP tool which offers both Online as well as desktop tools for WEBP conversion in Lossless compression.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using Online Converters<\/h3>\n\n\n\n<p>Online converters like <a target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-indigo-700 underline underline-offset-4\" href=\"https:\/\/anywebp.com\/\">AnyWebP<\/a> offer a simple and efficient way to convert your traditional format images into the WebP format. Their user-friendly interface requires no technical expertise\u2014simply upload your JPEG, PNG, or GIF files and let the tool do the work.<\/p>\n\n\n\n<p>To convert images to Lossy WeBP images go to the <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/anywebp.com\/convert-to-webp\">AnywebP tool here<\/a> and drop your image files;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2987\" height=\"1694\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-129.png\" alt=\"\" class=\"wp-image-17809\" style=\"width:621px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-129.png 2987w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-129-300x170.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-129-1024x581.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-129-768x436.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-129-1536x871.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-129-2048x1161.png 2048w\" sizes=\"auto, (max-width: 2987px) 100vw, 2987px\" \/><\/figure>\n\n\n\n<p>After successful upload, in the next window, Select Output Image File format to WEBP, select lower file size to 0.6 and Choose 0.9 as Quality for WebP Lossless images.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1805\" height=\"918\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-125.png\" alt=\"\" class=\"wp-image-17805\" style=\"width:708px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-125.png 1805w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-125-300x153.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-125-1024x521.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-125-768x391.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-125-1536x781.png 1536w\" sizes=\"auto, (max-width: 1805px) 100vw, 1805px\" \/><\/figure>\n\n\n\n<p>When you&#8217;re ready, click on &#8220;Convert All Images&#8221; to convert your images to WEBP image formats.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1327\" height=\"515\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-120.png\" alt=\"\" class=\"wp-image-17800\" style=\"width:696px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-120.png 1327w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-120-300x116.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-120-1024x397.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-120-768x298.png 768w\" sizes=\"auto, (max-width: 1327px) 100vw, 1327px\" \/><\/figure>\n\n\n\n<p>Now, download images and upload WEBP Images to your website to fix the Lighthouse issue.<\/p>\n\n\n\n<p>In a matter of seconds, your images are transformed into the superior WebP format, ready for download and integration into your website.<\/p>\n\n\n\n<p>This process not only enhances your site&#8217;s load times and overall performance but also improves your PageSpeed Insights score.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using App for Windows\/Mac<\/h3>\n\n\n\n<p>For users seeking a more permanent solution, consider <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/anywebp.com\/software\">downloading the AnyWebP app<\/a>. Available for both Windows and Mac, this handy tool allows you to convert images right from your desktop, eliminating the need to visit the website each time.<\/p>\n\n\n\n<p>Process for converting images to WEBP is pretty simple, select or drop your file and click on convert;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"878\" height=\"1149\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-121.png\" alt=\"\" class=\"wp-image-17801\" style=\"width:332px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-121.png 878w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-121-229x300.png 229w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-121-782x1024.png 782w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-121-768x1005.png 768w\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" \/><\/figure>\n\n\n\n<p>The app maintains the same user-friendly interface and high-speed conversion as the online version, offering a quick and reliable solution for frequent use. By integrating this app into your web optimization workflow, you&#8217;re investing in a tool that ensures your images always meet the highest standards of performance and quality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution #2 &#8211; Use Performance Lab Plugin by WordPress<\/h2>\n\n\n\n<p>For WordPress Images and users, the <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/wordpress.org\/plugins\/performance-lab\/#description\">Performance Lab plugin<\/a> is an indispensable tool for optimizing website performance and make WEBP Conversion super easy from any image types. <\/p>\n\n\n\n<p>One of its most powerful features is its ability to automatically convert JPEG uploads into the far superior Next Gen Format i.e. WebP. This functionality is enabled by default and can significantly enhance your website&#8217;s load times, delivering a smoother and more enjoyable user experience.<\/p>\n\n\n\n<p>To ensure this module is active, navigate to the performance settings under <strong>Settings &gt; Performance<\/strong> in your WordPress dashboard. If the <strong>Enable WebP Uploads<\/strong> module is checked, you&#8217;re all set!<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2629\" height=\"1436\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-131.png\" alt=\"\" class=\"wp-image-17811\" style=\"width:524px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-131.png 2629w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-131-300x164.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-131-1024x559.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-131-768x419.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-131-1536x839.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-131-2048x1119.png 2048w\" sizes=\"auto, (max-width: 2629px) 100vw, 2629px\" \/><\/figure>\n\n\n\n<p>Wondering if your server supports WebP format?<\/p>\n\n\n\n<p>The Performance Lab plugin has you covered. This plugin includes a health check to verify whether or not your server supports the WebP format. You can enable this module in the performance settings and follow the steps to check your server support.<\/p>\n\n\n\n<p>Now, isn&#8217;t that seamless and efficient?<\/p>\n\n\n\n<p>By simply integrating the Performance Lab plugin into your WordPress site, you can significantly enhance your website&#8217;s performance, user experience, and overall PageSpeed Insights score. So, why wait?<\/p>\n\n\n\n<p>Give your website the boost it deserves with this free WEBP Conversion plugin to convert any Image File format to modern Image format i.e. WEBP. It&#8217;s great way for optimizing images from same image formats Image quality using Lossless Compression or use WebP lossy images option to convert a doip in image quality but it&#8217;s far better than other image formats (JPEG Image) for web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution #3 &#8211; Serve WEBP using Cloudflare<\/h2>\n\n\n\n<p>Cloudflare offers a unique feature called &#8220;Polish&#8221; that allows you to optimize your images for better website performance. But how does this work?<\/p>\n\n\n\n<p>To activate Polish, first, ensure your images in the cache are purged or expired. Now, it&#8217;s important to note here that you should not activate Polish and Image Resizing simultaneously. Why? Because Image Resizing already applies lossy compression, which makes Polish redundant.<\/p>\n\n\n\n<p>To begin the activation process, log in to your Cloudflare dashboard and select the account and domain where you want the feature. Navigate to <strong>Speed &gt; Optimization &gt; Image Optimization<\/strong>;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"3419\" height=\"1770\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-132.png\" alt=\"\" class=\"wp-image-17812\" style=\"width:987px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-132.png 3419w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-132-300x155.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-132-1024x530.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-132-768x398.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-132-1536x795.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-132-2048x1060.png 2048w\" sizes=\"auto, (max-width: 3419px) 100vw, 3419px\" \/><\/figure>\n\n\n\n<p>Under &#8216;<strong>Polish<\/strong>&#8216;, you will find a drop-down menu where you can select either &#8216;<strong>Lossy<\/strong>&#8216; or &#8216;<strong>Lossless<\/strong>&#8216;.<\/p>\n\n\n\n<p>Want to further optimize your PNG and JPEG images stored in the origin server?<\/p>\n\n\n\n<p>Consider enabling the &#8216;<strong>WebP<\/strong>&#8216; option. This will allow you to serve them as WebP files to browsers that support this format.<\/p>\n\n\n\n<p>But remember, to ensure WebP is not served from the cache to a browser without WebP support, you need to disable WebP at your origin web server when using Polish.<\/p>\n\n\n\n<p>This straightforward activation process enhances image loading times, providing a superior user experience, and improving your site&#8217;s performance. Isn&#8217;t it time you give your website the speed it deserves with Cloudflare&#8217;s Polish feature?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution #4 Other WordPress Plugins<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Imagify<\/h3>\n\n\n\n<p>With Imagify, you have another powerful WordPress plugin to convert your images to WebP format. Imagify stands out for its user-friendly interface and its ability to maintain high-quality images even after compression\u2014a feature crucial for any website looking to improve its performance without compromising on visual appeal.<\/p>\n\n\n\n<p>Here is how to employ Imagify on your WordPress site:<\/p>\n\n\n\n<p>Begin by downloading and installing the Imagify plugin. Once installed, activate the plugin, and remember to create your free API key. This step is crucial, as the API key connects your site to Imagify, enabling the plugin to work its magic on your images.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2474\" height=\"1314\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-128.png\" alt=\"\" class=\"wp-image-17808\" style=\"width:717px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-128.png 2474w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-128-300x159.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-128-1024x544.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-128-768x408.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-128-1536x816.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-128-2048x1088.png 2048w\" sizes=\"auto, (max-width: 2474px) 100vw, 2474px\" \/><\/figure>\n\n\n\n<p>Now, navigate to <strong>Settings &gt; Imagify<\/strong>. Here, you will find the <strong>Optimization<\/strong> tab\u2014this is where you can control how Imagify interacts with your images.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"3020\" height=\"1284\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-130.png\" alt=\"\" class=\"wp-image-17810\" style=\"width:776px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-130.png 3020w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-130-300x128.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-130-1024x435.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-130-768x327.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-130-1536x653.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-130-2048x871.png 2048w\" sizes=\"auto, (max-width: 3020px) 100vw, 3020px\" \/><\/figure>\n\n\n\n<p>In the <strong>Optimization <\/strong>settings, make sure to select the following options:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1353\" height=\"754\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-123.png\" alt=\"\" class=\"wp-image-17803\" style=\"width:565px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-123.png 1353w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-123-300x167.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-123-1024x571.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-123-768x428.png 768w\" sizes=\"auto, (max-width: 1353px) 100vw, 1353px\" \/><\/figure>\n\n\n\n<p><strong>Create WebP version of images, <\/strong>Enable this option to activate the next.<\/p>\n\n\n\n<p>The next option is to <strong>Display images in WebP format on the site<\/strong>, There&#8217;s two option i.e. <strong>Use Rewrite rules<\/strong> (edits .htaccess file or Nginx Config file) for WEBP replacement Image or <strong>Use &lt;picture&gt; tags<\/strong>. We recommend you to use Picture element tags to serve images in next-gen formats like WEBP.<\/p>\n\n\n\n<p>Selecting these options instructs Imagify to create a WebP version of your uploaded images, display these versions on your site, and use the &lt;picture&gt; tag format, which allows multiple sources for an image to be specified.<\/p>\n\n\n\n<p>Alternatively, You can also use Imagify Resize larger images to Properly size images to support webp images responsivness across various devices. <\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1246\" height=\"589\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-122.png\" alt=\"\" class=\"wp-image-17802\" style=\"width:599px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-122.png 1246w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-122-300x142.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-122-1024x484.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-122-768x363.png 768w\" sizes=\"auto, (max-width: 1246px) 100vw, 1246px\" \/><\/figure>\n\n\n\n<p>By integrating Imagify into your WordPress site, you&#8217;re not only improving the performance and load times of your website but also ensuring that your images remain crisp and visually appealing. So why wait? Experience the benefits of Imagify today!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">WebP Converter for Media<\/h3>\n\n\n\n<p><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/wordpress.org\/plugins\/webp-converter-for-media\/\">WebP Converter for Media<\/a> is a powerful WordPress plugin that transforms the way your website manages images. It efficiently optimizes your images, serving WebP and AVIF formats (available in the Pro version) instead of the traditional ones. This shift results not only in faster load times but also in improved performance across your website.<\/p>\n\n\n\n<p>Here&#8217;s how you can integrate this impressive plugin into your WordPress site:<\/p>\n\n\n\n<p>Start by installing the WebP Converter for Media plugin. This is your first step towards enhanced image optimization.<\/p>\n\n\n\n<p>Once installed, make your way to `General Settings &gt; Conversion strategy &gt; List of supported output formats and select the &#8220;WebP&#8221; option.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1310\" height=\"799\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-124.png\" alt=\"\" class=\"wp-image-17804\" style=\"width:413px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-124.png 1310w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-124-300x183.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-124-1024x625.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-124-768x468.png 768w\" sizes=\"auto, (max-width: 1310px) 100vw, 1310px\" \/><\/figure>\n\n\n\n<p>Next, scroll to the bottom of the options page and click on the <strong>Start Bulk Optimization<\/strong> button. Your images will now begin their transformation to the WebP format.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1618\" height=\"897\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-126.png\" alt=\"\" class=\"wp-image-17806\" style=\"width:503px;height:auto\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-126.png 1618w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-126-300x166.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-126-1024x568.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-126-768x426.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-126-1536x852.png 1536w\" sizes=\"auto, (max-width: 1618px) 100vw, 1618px\" \/><\/figure>\n\n\n\n<p>With WebP Converter for Media, you&#8217;re investing in a tool that significantly enhances your site&#8217;s performance, user experience, and overall appeal.<\/p>\n\n\n\n<p>So, isn&#8217;t it time you gave your site&#8217;s images the optimization they deserve?<\/p>\n\n\n\n<p>Start using WebP Converter for Media today!<\/p>\n\n\n\n<p>Also read,<\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/optimize-images-for-seo-in-wordpress\/\">How to Optimize Images for SEO In WordPress (Only Guide You Need!)<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/css-image-sprites\/\">How to use CSS Image Sprites To Reduce HTTP Requests and Increase Pagespeed<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/lazyload-images-videos-and-iframes\/\">How to Lazyload Images, Videos and Iframes<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/ecommerce-seo-experts-image-alt-tags\/\">Why do eCommerce SEO experts use Image alt tags? (4 Solid Reasons)<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/google-images-seo\/\">Google Images SEO : Best Practices<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>As you can see, there are several ways to serve WebP images on your WordPress site. Whether it&#8217;s through plugins like Performance Lab or Imagify, or by utilizing features on your server or through a CDN like Cloudflare, the benefits of using WebP cannot be ignored.<\/p>\n\n\n\n<p>So why not take the first step towards improving your website&#8217;s performance and user experience by serving WebP images today?<\/p>\n\n\n\n<p>With these solutions, it&#8217;s never been easier to implement this powerful image format and reap its rewards.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the realm of web performance optimization, serving images in Next-Gen formats is a prominent solution for accelerating page load times and enhancing user experience.&hellip;<\/p>\n","protected":false},"author":1,"featured_media":17784,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[100,734,848,3],"tags":[],"class_list":["post-17798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-core-web-vitals","category-performance","category-seo"],"_links":{"self":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/17798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/comments?post=17798"}],"version-history":[{"count":3,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/17798\/revisions"}],"predecessor-version":[{"id":22155,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/17798\/revisions\/22155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media\/17784"}],"wp:attachment":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media?parent=17798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/categories?post=17798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/tags?post=17798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}