{"id":2240,"date":"2024-03-27T20:10:44","date_gmt":"2024-03-27T18:10:44","guid":{"rendered":"https:\/\/fastpixel.io\/?p=2240"},"modified":"2024-03-27T20:11:05","modified_gmt":"2024-03-27T18:11:05","slug":"how-to-serve-images-in-next-gen-formats-on-wordpress","status":"publish","type":"post","link":"https:\/\/fastpixel.io\/fr\/blog\/how-to-serve-images-in-next-gen-formats-on-wordpress\/","title":{"rendered":"How To Serve Images in Next-Gen Formats On WordPress"},"content":{"rendered":"<p>One important aspect of a WordPress website speed optimization process is image delivery. <\/p>\n\n\n\n<p>While JPEG and PNG have been the go-to formats for a long time, newer options like WebP and AVIF are shaking things up by promising faster load times and reduced bandwidth usage.<\/p>\n\n\n\n<p>If you&#8217;re a WordPress user eager to make the most of these next-gen formats and <a href=\"https:\/\/fastpixel.io\/fr\/blog\/10-best-practices-for-wordpress-speed-optimization-2023-guide\/\" data-type=\"link\" data-id=\"https:\/\/fastpixel.io\/blog\/10-best-practices-for-wordpress-speed-optimization-2023-guide\/\">optimize the speed<\/a> of your website, you&#8217;ve come to the right place.<\/p>\n\n\n\n<p>In this guide, we&#8217;ll walk you through the process of serving images in next-gen formats on your WordPress site. <\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-serve-images-in-next-gen-formats-on-wordpress\/#understanding-next-gen-image-formats\" >Understanding next-gen image formats<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-serve-images-in-next-gen-formats-on-wordpress\/#benefits-of-serving-images-in-next-gen-formats\" >Benefits of serving images in next-gen formats<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-serve-images-in-next-gen-formats-on-wordpress\/#how-to-effectively-serve-images-in-next-gen-formats-on-wordpress\" >How to effectively serve images in next-gen formats on WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-serve-images-in-next-gen-formats-on-wordpress\/#conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"understanding-next-gen-image-formats\"><\/span>Understanding next-gen image formats<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Next-gen image formats represent a leap forward in the way we encode, compress, and render images. <\/p>\n\n\n\n<p>Traditional formats like JPEG, PNG, and GIF have served us well over the years, but they come with limitations, such as loss of quality during compression and the inability to support advanced features like transparency and animation effectively.<\/p>\n\n\n\n<p>These next-gen formats like WebP or AVIF leverage compression algorithms and modern encoding techniques to deliver superior image quality and smaller file sizes compared to their predecessors.<\/p>\n\n\n\n<p>These formats achieve their results through a combination of techniques:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Advanced compression algorithms<\/strong>: These formats use more efficient compression algorithms, such as <a href=\"https:\/\/en.wikipedia.org\/wiki\/VP9\" data-type=\"link\" data-id=\"https:\/\/en.wikipedia.org\/wiki\/VP9\" target=\"_blank\" rel=\"noreferrer noopener\">VP9<\/a> for WebP and <a href=\"https:\/\/en.wikipedia.org\/wiki\/AV1\" data-type=\"link\" data-id=\"https:\/\/en.wikipedia.org\/wiki\/AV1\" target=\"_blank\" rel=\"noreferrer noopener\">AV1<\/a> for AVIF, to reduce file sizes without compromising quality.<\/li>\n\n\n\n<li><strong>Efficient encoding<\/strong>: Next-gen formats use smarter encoding methods that optimize image data for better compression and faster decoding.<\/li>\n\n\n\n<li><strong>Support for modern features<\/strong>: Unlike older formats, next-gen formats offer support for features like transparency, animation, and even dynamic content, making them more versatile for a wide range of applications.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"benefits-of-serving-images-in-next-gen-formats\"><\/span>Benefits of serving images in next-gen formats<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Platforms like Google&#8217;s PageSpeed Insights may issue warnings or recommendations regarding the usage of next-gen image formats, including other image-related warnings such as <a href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-fix-image-elements-do-not-have-explicit-width-and-height-in-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/fastpixel.io\/blog\/how-to-fix-image-elements-do-not-have-explicit-width-and-height-in-wordpress\/\">images not having explicit width and height<\/a>, <a href=\"https:\/\/fastpixel.io\/fr\/blog\/easy-way-to-fix-the-properly-size-images-warning-from-pagespeed-insights\/\" data-type=\"link\" data-id=\"https:\/\/fastpixel.io\/blog\/easy-way-to-fix-the-properly-size-images-warning-from-pagespeed-insights\/\">properly size images<\/a>, and <a href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/fastpixel.io\/blog\/how-to-defer-offscreen-images-in-wordpress\/\">deferring offscreen images<\/a>.<\/p>\n\n\n\n<p>These warnings typically highlight the potential for improved performance by using next-gen formats in order to <a href=\"https:\/\/fastpixel.io\/fr\/blog\/easy-way-to-improve-core-web-vitals-on-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/fastpixel.io\/blog\/easy-way-to-improve-core-web-vitals-on-wordpress\/\">improve the Core Web Vitals<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1531\" height=\"809\" src=\"https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-in-next-gen-formats-pagespeed-insights-warning.png\" alt=\"\" class=\"wp-image-2241\" srcset=\"https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-in-next-gen-formats-pagespeed-insights-warning.png 1531w, https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-in-next-gen-formats-pagespeed-insights-warning-300x159.png 300w, https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-in-next-gen-formats-pagespeed-insights-warning-1024x541.png 1024w, https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-in-next-gen-formats-pagespeed-insights-warning-360x190.png 360w\" sizes=\"(max-width: 1531px) 100vw, 1531px\" \/><\/figure>\n\n\n\n<p>Despite these warnings, the advantages often outweigh any potential challenges, and serving images in next-gen formats offers several significant benefits for website owners and users alike:<\/p>\n\n\n\n<p>\u2705 <strong>Faster load times:<\/strong> Web pages with next-gen images load faster, leading to improved user experience and lower bounce rates.<\/p>\n\n\n\n<p>\u2705 <strong>Reduced bandwidth usage:<\/strong> Websites serving images in WebP or AVIF consume less bandwidth, which is particularly beneficial for users on limited data plans or slower internet connections.<\/p>\n\n\n\n<p>\u2705 <strong>Improved SEO performance:<\/strong> Website speed is a crucial factor in search engine optimization (SEO). By serving images in next-gen formats, you can improve your site&#8217;s loading speed, which can positively impact its search engine ranking and overall visibility.<\/p>\n\n\n\n<p>\u2705 <strong>Enhanced user engagement:<\/strong> Faster-loading pages tend to engage users more effectively. With next-gen image formats, you can create a smoother browsing experience, reducing frustration and encouraging visitors to explore your website further.<\/p>\n\n\n\n<p>\u2705 <strong>Cross-platform compatibility:<\/strong> While next-gen formats may not be supported by all browsers, major ones like Chrome, Firefox, and Edge have embraced <a href=\"https:\/\/caniuse.com\/webp\" data-type=\"link\" data-id=\"https:\/\/caniuse.com\/webp\" target=\"_blank\" rel=\"noreferrer noopener\">WebP<\/a>, and <a href=\"https:\/\/caniuse.com\/?search=avif\" data-type=\"link\" data-id=\"https:\/\/caniuse.com\/?search=avif\" target=\"_blank\" rel=\"noreferrer noopener\">AVIF<\/a> is gaining traction. Additionally, fallback options can be implemented to ensure compatibility with older browsers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-effectively-serve-images-in-next-gen-formats-on-wordpress\"><\/span>How to effectively serve images in next-gen formats on WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For some WordPress users, one popular approach to serve next-gen formats is through local generation using plugins like <a href=\"https:\/\/shortpixel.com\/products\/shortpixel-image-optimizer?utm_source=fastpixel\" data-type=\"link\" data-id=\"https:\/\/shortpixel.com\/products\/shortpixel-image-optimizer\" target=\"_blank\" rel=\"noreferrer noopener\">ShortPixel Image Optimizer<\/a>. After installing and setting up the plugin, you can easily <a href=\"https:\/\/shortpixel.com\/knowledge-base\/article\/286-how-to-serve-webp-files-using-spio\" data-type=\"link\" data-id=\"https:\/\/shortpixel.com\/knowledge-base\/article\/286-how-to-serve-webp-files-using-spio\" target=\"_blank\" rel=\"noreferrer noopener\">generate WebP\/AVIF<\/a> and serve them using one of its native methods (via .htaccess or &lt;PICTURE> tag syntax).<\/p>\n\n\n\n<p>However, while local generation offers control and flexibility, it often requires high processing times, especially for websites with heavy media libraries. <\/p>\n\n\n\n<p>For those seeking a more lightweight solution, <a href=\"https:\/\/fastpixel.io\/fr\/\" data-type=\"link\" data-id=\"https:\/\/fastpixel.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">FastPixel<\/a> provides an on-the-fly approach to serving next-gen images. <\/p>\n\n\n\n<p>After <a href=\"https:\/\/fastpixel.io\/downloads\/fastpixel-latest.zip\" data-type=\"link\" data-id=\"https:\/\/fastpixel.io\/downloads\/fastpixel-latest.zip\" target=\"_blank\" rel=\"noreferrer noopener\">downloading<\/a>, installing, and activating the plugin on your WordPress site, FastPixel serves next-gen images on-the-fly, meaning it intercepts requests for images, checks the user&#8217;s browser support, and serves the appropriate version (either WebP or original format) by dynamically changing the image URLs. <\/p>\n\n\n\n<p>This ensures optimized image delivery without requiring pre-generated images or additional storage on the server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Next-gen image formats offer a compelling solution to the challenges of quality and efficiency.<\/p>\n\n\n\n<p>By leveraging next-gen formats like WebP and implementing solutions tailored to WordPress, you can significantly enhance your website&#8217;s performance without compromising on visual quality. <\/p>\n\n\n\n<p>Whether you opt for local generation and serving using plugins like ShortPixel Image Optimizer or embrace on-the-fly solutions like FastPixel, the key lies in adopting technologies that prioritize speed, accessibility, and user satisfaction. <\/p>\n\n\n\n<p>With these tools at your disposal, you can take your WordPress website to the next level in terms of speed.<\/p>\n\n\n\n<div class=\"wp-block-group has-border-color has-palette-color-4-border-color has-palette-color-6-background-color has-background is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-e21fc307 wp-block-group-is-layout-flex\" style=\"border-width:1px;border-radius:20px;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Give FastPixel a try for free<\/h3>\n\n\n\n<p>Take the first step towards a faster website today.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/test.fastpixel.io\/\">Commencer<\/a><\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>One important aspect of a WordPress website speed optimization process is image delivery. While JPEG and PNG have been the go-to formats for a long time, newer options like WebP and AVIF are shaking things up by promising faster load times and reduced bandwidth usage. If you&#8217;re a WordPress user eager to make the most [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2256,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[10,12],"tags":[],"class_list":["post-2240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-optimization","category-world-of-wordpress"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress.png",1024,580,false],"thumbnail":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress-150x150.png",150,150,true],"medium":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress-300x170.png",300,170,true],"medium_large":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress.png",768,435,false],"large":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress.png",1024,580,false],"1536x1536":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress.png",1024,580,false],"2048x2048":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress.png",1024,580,false],"trp-custom-language-flag":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress.png",18,10,false],"betterdocs-category-thumb":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/serve-images-next-gen-format-wordpress-360x204.png",360,204,true]},"uagb_author_info":{"display_name":"Andrei Alba","author_link":"https:\/\/fastpixel.io\/fr\/blog\/author\/andreialba\/"},"uagb_comment_info":0,"uagb_excerpt":"One important aspect of a WordPress website speed optimization process is image delivery. While JPEG and PNG have been the go-to formats for a long time, newer options like WebP and AVIF are shaking things up by promising faster load times and reduced bandwidth usage. If you&#8217;re a WordPress user eager to make the most\u2026","_links":{"self":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/2240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/comments?post=2240"}],"version-history":[{"count":22,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/2240\/revisions"}],"predecessor-version":[{"id":2264,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/2240\/revisions\/2264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/media\/2256"}],"wp:attachment":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/media?parent=2240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/categories?post=2240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/tags?post=2240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}