{"id":5055705,"date":"2022-12-14T09:35:55","date_gmt":"2022-12-14T08:35:55","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&p=5055705"},"modified":"2023-05-04T07:47:32","modified_gmt":"2023-05-04T05:47:32","slug":"efficiently-encode-images","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/efficiently-encode-images\/","title":{"rendered":"How to Efficiently Encode Images"},"content":{"rendered":"

Have you run a performance audit using PageSpeed Insights (PageSpeed Insights) and got the \u201cefficiently encode images\u201d warning? Don\u2019t worry. This issue is easy to solve when you have the right tools! <\/p>

\"Efficiently
\u201cEfficiently encode images\u201d warning is triggered when image optimization is needed – Source: PageSpeed Insights<\/a>
<\/figcaption><\/figure>

In this article, we explain what efficiently encoding images means and how it can affect your site’s performance. We also give you 7 image optimization techniques you can use to give an extra speed boost to your WordPress site. And as a bonus, we show you how to easily get rid of the \u201cEfficiently encode images\u201d issue using Imagify, one of WordPress’s best image optimization plugins<\/a>.<\/p>

What Does Efficiently Encode Images Mean?<\/h2>

\u201cEfficiently encoding images\u201d means optimizing images to reduce their file size without compromising quality. It\u2019s all about finding the right balance between size and acceptable visual quality for visitors landing on your website.<\/p>

\"Efficiently
Efficiently encode images explained – Source: WP Rocket<\/a><\/figcaption><\/figure>

What Triggers the \u201cEfficiently Encode Images\u201d Issue?<\/h3>

Google triggers this message if it detects that some of your images could be optimized and compressed. It detects which image could be smaller and improve performance. <\/p>

Lighthouse scans the images displayed on the page and sets the compression level to 85%. If the potential saving is 4 KiB or greater, PageSpeed Insights reports the image and flags it in the \u201cPotential Savings\u201d column:<\/p>

\"The
The image is flagged by Lighthouse because the potential saving is greater than 4B (24.6KiB) – Source: WP Rocket<\/a>
<\/figcaption><\/figure>

The Impact of Optimized Images on Performance <\/h3>

Efficiently encoding Images is an optimization technique allowing you to serve pictures at a smaller size, loading them faster. Unoptimized images at a very high quality often result in large file sizes. If you have 20 of them on your web page, the loading time will likely increase, damaging your visitors\u2019 experience.<\/p>

Pro tips:<\/strong> If the potential KB savings are important, this should be considered a high-priority optimization to avoid any impacts on the speed of your website. <\/td><\/tr><\/tbody><\/table><\/figure>

In the next section, we share 7 image optimization techniques that allow you to serve your images on your WordPress site properly.<\/p>

How to Efficiently Encode Images on WordPress<\/h2>

There are two effective ways to efficiently encode images and fix this PageSpeed Insight recommendation \u2014 the first two of our list. In addition to them, there are also other five steps that can help you optimize your images: <\/p>

  1. Compress Your Images<\/a><\/li>\n\n
  2. Convert Images to WebP (Next-gen format)<\/a><\/li>\n\n
  3. Implement Lazy Loading<\/a><\/li>\n\n
  4. Serve Images with the Correct Dimensions<\/a> <\/li>\n\n
  5. Use an image CDN<\/a><\/li>\n\n
  6. Convert Animated GIFs into Videos<\/a><\/li>\n\n
  7. Use high-expiry headers for images <\/a><\/li><\/ol>

    Let\u2019s go over each step.<\/p>

    1. Compress Your Images<\/h3>

    Image compression reduces the image file while retaining quality. The images can be stored and displayed in their most efficient form, meaning properly encoded on the web page.  Image compression can be lossy but lossless<\/a>. It depends on how much you want to impact its quality.<\/p>

    Image compression should be almost invisible to the naked eye. As an example, this is what an optimized vs. unoptimized image looks like:<\/p>

    \"Compression
    Compression that does not impact the quality – Source: WP Rocket<\/a><\/figcaption><\/figure>

    Unoptimized images significantly affect your page speed and slow down your WordPress site. Thankfully there are many plugins out there that can optimize your images in a few steps. (Jump to our bonus section to see how Imagify can help<\/a>).<\/em><\/p>

    2. Convert Images to WebP (Next-gen Format)<\/h3>

    WebP is a next-gen image format that provides a superior compression level for images. As a result, your images are better encoded, boosting the performance score on the PageSpeed audit. <\/p>

    According to Google\u2019s study,  \u201cWebP images are smaller than their JPEG and PNG counterparts\u2014usually on the magnitude of a 25\u201335% reduction in filesize\u201d. In the figure below, we can see that WebP offers better compression than the JPEG format:<\/p>

    \"WebP
    WebP file is lighter than JPEG file with the same visual quality – Source: Google WebP developers<\/a>
    <\/figcaption><\/figure>

    WebP format also works with PNG transparent images, with the same performance outcome: the file size is much lighter using the WebP format. <\/p>

    \"WebP
    WebP file is lighter than PNG file with the same visual quality – Source: Google WebP developers<\/a>
    <\/figcaption><\/figure>

    If you want to read more about the next-gen format<\/a>, we recommend you read this interesting article that explains how to use WebP format on WordPress<\/a>. <\/p>

    <\/div>\n\t