{"id":4872307,"date":"2022-10-25T08:42:14","date_gmt":"2022-10-25T06:42:14","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&p=4872307"},"modified":"2024-11-05T13:36:30","modified_gmt":"2024-11-05T12:36:30","slug":"serve-images-next-gen-formats","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/serve-images-next-gen-formats\/","title":{"rendered":"How to Serve Images in Next-Gen Formats"},"content":{"rendered":"

Google recommends you serve images in next-gen formats to prevent your WordPress site from loading slowly. According to them, next-gen formats provide better compression features than traditional PNG or JPEG formats. <\/p>

\"\"
Google recommends serving images in next-gen formats – Source: PSI<\/a>
<\/figcaption><\/figure>

In this article, we explain what next-gen formats are and how to use them easily in WordPress. <\/p>

What Serve Images in Next-Gen Formats Means<\/h2>

Serve images in next-gen formats means converting them from older existing formats (JPEG or PNG) to WebP or AVIF – which are both optimized for the web. <\/strong><\/p>

What are Next-Gen Formats<\/h3>

Next-gen formats such as WebP or AVIF provide superior compression features compared to all the other web image formats. <\/p>

\"Next-gen
Next-gen formats: better compression rate and preserved quality – Source: WP Rocket<\/a><\/figcaption><\/figure>


AVIF: <\/strong>The AV1 image file format (AVIF) is an open-source image format for storing still and animated images. It was released in February 2019 by the Alliance for Open Media<\/a>. AVIF supports lossy and lossless compression to produce high-quality photos and compresses much better than most popular formats on the web today (JPEG, PNG WebP, JPEG 2000, etc.). AVIF can make you save up to 50% on the total file size.<\/p>

WebP:<\/strong> Introduced by Google in 2010, WebP is also a modern image format that provides superior lossless and lossy compression for images on the web. On average, Google’s developers suggest that a WebP image with lossy compression could be 25% to 34% smaller than a comparable JPEG file.<\/p>

To show you an example, this is how an image looks in JPEG and WebP (quite similar, isn\u2019t it?)<\/p>

\"Unaltered
Unaltered image quality (JPEG vs WebP) – Source: Developers.Google<\/a>
<\/figcaption><\/figure>

By serving your images in next-gen formats, you will get a smaller file size while displaying high-quality visual content to visitors. <\/p>

Impact on the Image Quality When Using Next-Gen Formats<\/h4>

WebP provides a lossy and lossless compression for images on the web. However, even in lossy compression (right), the change is invisible to the human eye: <\/p>

\"Next-gen
Next-gen Format and Browser Compatibility<\/figcaption><\/figure>

Those new formats are supported by many browsers, but some are still lagging behind. WebP is the most supported format compared to AVIF.<\/p>

According to PageSpeed Insights, here\u2019s the latest compatibility list:<\/p>

\"Browsers
Browsers that support AVIF and WEBP next-gen formats (October 2022) – Source: WP Rocket<\/a>
<\/figcaption><\/figure>

What the PageSpeed Insights Recommendation Means<\/h3>

If you are getting the \u201cServe images in next-gen formats\u201d recommendation when running a performance test on PageSpeed Insights, it means you should better optimize your images and convert them to WebP or AVIF. <\/p>

Let\u2019s explain what PSI\u2019s reasoning is behind this report. <\/p>

In the figure below, PageSpeed Insights estimates that 2.7 s could be saved by simply converting the images to WebP or AVIF. The compression would be much more efficient than our current JPEG image, resulting in smaller file size and a faster loading page. <\/p>

File size (JPEG) = 66.9 KB   vs    File size (WEBP) = 29.8 KB% of estimated savings while keeping the same quality = 56%<\/td><\/tr><\/tbody><\/table><\/figure>
\"Google
Google recommending to serve images in next-gen formats to save 2.7s of loading time – Source: PSI<\/a><\/figcaption><\/figure>
\ud83d\udca1Hint: If you are not familiar with Lighthouse and PageSpeed Insights reports, read our full guide about how to improve the Lighthouse performance score and metrics on WordPress<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>

To calculate the total savings and create the final report, Lighthouse follows 3 steps: <\/p>

  1. It scans the images on web pages that are not using a next-gen format: JPEG, PNG, BMP, etc. <\/li>\n\n
  2. It converts them to WebP and estimates what would be the new file size when using a better compression <\/li>\n\n
  3. It reports those estimated savings in the \u201cOpportunities\u201d section.<\/li><\/ol>
    \"How
    How Lighthouse calculates the savings when generating the report – Source: WP Rocket<\/a>
    <\/figcaption><\/figure>

    If you don\u2019t see all your images on the report, that means the potential saving of a particular image was less than 8KB. In that case, they are optimized enough for Lighthouse, who will ignore them when scanning your page.<\/p>

    Now that you know more about WebP and AVIF next-gen formats, it\u2019s important to highlight their actual impact on performance.<\/p>

    Why Next-Gen Formats Are Crucial for Performance: 3 Benefits<\/h2>

    Next-gen formats are great for your website performance because they compress your images more efficiently, reducing the page’s total loading time.\u00a0<\/p>

    Benefit #1 – A faster loading page<\/h3>

    In 2022, visual content like photos and videos is key to catching visitors\u2019 attention. However, websites with many unoptimized media embedded into the page often result in higher loading times. Finally, with mobile-friendly images, mobile users will consume less cellular data and won\u2019t wait too long for the page to be fully loaded. <\/p>

    To illustrate with an example, I created a simple WordPress page with 12 JPEG pictures:<\/p>

    \"\"
    WordPress page with images<\/figcaption><\/figure>

    I ran an audit on GTmetrix and put the data in the first column below. <\/p>

    Then, I converted those pictures to WebP, ran the performance test again, and wrote down the results in the last column. <\/p>

    The conclusion is clear: WebP images made my page smaller, lighter, and load faster. <\/p>

    <\/td>With images in JPEG<\/strong><\/td>With images in WEBP<\/strong><\/td><\/tr>
    Page size<\/strong><\/td>1.3 MB<\/td>714 KB<\/td><\/tr>
    HTTP requests<\/strong><\/td>24 <\/td>12<\/td><\/tr>
    Page load time <\/strong><\/td>2.895 s<\/td>1.789 s<\/td><\/tr><\/tbody><\/table><\/figure>

    Benefit #2 – Healthy Core Web Vitals<\/strong><\/a> and better PSI scores<\/h3>

    Google uses three key metrics to measure the user experience of a web page. You may have heard much about them in the last couple of years. They are called the Core Web Vitals. Image optimization processes – including converting images to next-gen formats – mainly impact the two following Core Web Vitals:<\/p>