{"id":1162,"date":"2022-02-17T08:14:11","date_gmt":"2022-02-17T08:14:11","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=1162"},"modified":"2024-03-07T11:26:21","modified_gmt":"2024-03-07T11:26:21","slug":"efficiently-encode-images-wordpress","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/efficiently-encode-images-wordpress\/","title":{"rendered":"How to Efficiently Encode Images on WordPress and Fix the PageSpeed Warning"},"content":{"rendered":"\n

If you run an audit of your WordPress site through PageSpeed Insights, Lighthouse may recommend you efficiently encode your images. PageSpeed Insights (PSI) is a tool that generates a performance report for your entire WordPress page. If it detects that your images could be better optimized, it triggers the \u201cefficiently encode images\u201d warning.<\/p>\n\n\n\n

\"\u201cEfficiently
\u201cEfficiently encode images\u201d issue – Source: PageSpeed Insights<\/a>
<\/figcaption><\/figure>\n\n\n\n

In this guide, we explain what efficiently encoding images means and how to check the status of your<\/em> images. This is also an effective way to improve your Lighthouse performance score<\/a>. We also share 6 image optimization techniques and a quick way <\/strong>to fix the \u201cEfficiently encode images\u201d warning.<\/p>\n\n\n\n

Let\u2019s dive in!<\/p>\n\n\n\n

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

Efficiently encoding images means optimizing images to reduce their file size without significantly impacting their quality. <\/p>\n\n\n\n

How does Lighthouse flag images as optimizable? What triggers this issue? <\/h4>\n\n\n\n

Lighthouse scans all your images on the page you are auditing, then sets the compression level to 85%. If the potential saving is 4 KiB or greater, they will report the image and flag it as an error in your performance report.<\/p>\n\n\n\n

\"Image
Image flagged by Lighthouse because the potential saving is superior to 4B (24.6KiB)<\/em>
<\/figcaption><\/figure>\n\n\n\n

Uncompressed images at very high quality often result in large file size. And the larger the images are, the more time it will take to download and render them to your visitors. When this happens for all <\/em>your images, the total loading time is likely to increase, and you may end up with a slow website.  <\/p>\n\n\n\n

To avoid this situation, we are sharing 6 optimization techniques that allow you to properly serve your images on the web. <\/p>\n\n\n\n

6 Ways to Efficiently Encode Images on WordPress:<\/h2>\n\n\n\n

There are six steps you can take to efficiently encode images and tackle this PageSpeed Insight recommendation, including: <\/p>\n\n\n\n

    \n
  1. Compressing Your Images<\/a><\/li>\n\n\n\n
  2. Implementing Lazy Load<\/a><\/li>\n\n\n\n
  3. Converting Images to WebP (Next-gen format)<\/a><\/li>\n\n\n\n
  4. Serving Images with the Correct Dimensions <\/a><\/li>\n\n\n\n
  5. Using an image CDN<\/a><\/li>\n\n\n\n
  6. Replacing Animated GIFs with Video<\/a><\/li>\n<\/ol>\n\n\n\n

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

    1. Compressing Your Images<\/h3>\n\n\n\n

    The goal of image compression is to reduce the image file without compromising too much quality. That makes PageSpeed Insights very happy because the images can be stored and rendered in the most efficient form, making them properly encoded. Image compression may be lossy but lossless<\/a> if you prefer not to touch the image quality. <\/p>\n\n\n\n

    However, if you use the right tool, lossless compression is not visible to the naked eye. <\/p>\n\n\n\n

    In our example below, one is the original file, and the other has been compressed. Can you spot the difference? I can\u2019t. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Remember, suboptimal images significantly affect your page speed and slow down your WordPress site. The easiest way to avoid any performance issues is to use a WordPress plugin. Don\u2019t worry. We did the heavy lifting for you, and we have put together a list of the best image compression plugin for WordPress<\/a>.  <\/p>\n\n\n\n

    If you prefer the manual way to compress your images, we get you covered too. And if you feel overwhelmed by PhotoShop and Lightroom, there are plenty of alternative optimization tools<\/a> you can use. <\/p>\n\n\n\n

    2. Implementing Lazy Load<\/h3>\n\n\n\n

    Lazy loading helps to efficiently encode your images because it\u2019s an optimization technique aiming to display images only when needed. If the user views them, images will be rendered by the browser. Otherwise, the loading will be deferred to prioritize the most critical content. Google recommends \u201cDefer offscreen images<\/a>\u201d on PageSpeed, which means applying the following lazy load script: <\/p>\n\n\n\n

    \u201cloading=lazy\u201d<\/code><\/pre>\n\n\n\n
    Remember, you should avoid setting this script for any images in the first visible viewport. Instead, apply the delay on the content below-the-fold: <\/p>\n\n\n\n
    \"Applying
    Applying lazy loading for the content below-the-fold
    <\/figcaption><\/figure>\n\n\n\n
    If you don\u2019t feel like implementing lazy loading manually, you can use a free WordPress plugin like Lazy Load by WP Rocket<\/a> or take a look at the best lazy load plugins for WordPress<\/a>.<\/p>\n\n\n\n
    3. Converting Images to WebP (Next-gen format)<\/h3>\n\n\n\n
    Developed by Google, WebP is a next-gen image format that provides better lossless and lossy compression for images. This results in encoding your images better on your WordPress site and passing the PageSpeed audit. <\/p>\n\n\n\n
    In fact, according to Google,  \u201cthe average WebP file size is 25%-34% smaller compared to JPEG file size\u201d. This table shows that WebP achieves better compression than the JPEG format:<\/p>\n\n\n\n
    \"WebP
    WebP with a smaller file size – Source: Greenspector<\/a>
    <\/figcaption><\/figure>\n\n\n\n
    Are you convinced? Imagify plugin can convert your images to WebP<\/a> directly from the WordPress dashboard. <\/p>\n\n\n\n
    If you want to learn more about this next-gen format, we recommend reading how to use WebP format on WordPress<\/a>.\u00a0<\/p>\n\n\n\n
    \ud83d\udd0a Important to note<\/strong>: as of March 2024, 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
    4. Serving Images with the Correct Dimensions <\/h3>\n\n\n\n
    Lighthouse makes it easy to find the incorrectly-sized images on your WordPress site. Simply audit your page, and if you find the \u201cProperly size images\u201d warning, you should resize them.<\/p>\n\n\n\n
    The DevTools Elements panel can also be used to check what size an image is displayed at: <\/p>\n\n\n\n
    \"Identifying
    Identifying my image size in the \u201cElements\u201d tab – Source: DevTools<\/figcaption><\/figure>\n\n\n\n
    That section sounds easy, but given the variety of screen sizes available in 2022, things can quickly get complex. <\/p>\n\n\n\n
    One rule: ideally, your page should never serve larger images than the user’s screen. <\/strong><\/p>\n\n\n\n