Changing the Property Values of the Decoding and Loading Properties Applied to WordPress Images

Since WordPress version 5.5, the loading=”lazy” property of HTMLImageElement has been added and automatically applied to images and iframes. Similarly, since version 6.1, the decoding=”async” property has been added to images.

The decoding and loading properties of HTMLImageElement are properties related to image loading, but they serve different purposes. Simply put, the decoding property specifies how the image should be decoded, while the loading property instructs the browser on how to load the image. The loading property is particularly useful for improving performance and user experience on pages containing a large number of images or frames.

Image decoding is the process of converting image files into a format that the browser can understand. Typically, images are downloaded from the server in compressed formats (e.g., JPEG, PNG, etc.). The browser receives these compressed image files and decodes them into a bitmap format that can be displayed.

Now, let’s take a look at each property value. As explained in the MDN Web Docs:

decoding property:

• sync: Decode the image synchronously along with rendering the other DOM content, and present everything together.
• async: Decode the image asynchronously, after rendering and presenting the other DOM content.
• auto: No preference for the decoding mode; the browser decides what is best for the user. This is the default value.

loading property:

• lazy: Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it’s reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.
• eager: Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).

Based on this, since noticeable flashing of images during loading was observed with decoding=”async” and loading=”lazy” automatically applied by WordPress, this time, decoding=”auto” and loading=”eager” were changed to prioritize smoothness (images have decoding and loading properties, while iframes only have the loading property value changed).

These settings can improve website loading speed and prioritize smoothness, adapting to the needs of each webpage.

Below is an example of the code to input into functions.php:

// Add decoding="auto" and loading="eager" to img tags
function add_decoding_and_loading_properties($content) {
    // Add decoding="auto" and loading="eager" to img tags
    $content = preg_replace_callback('/<img([^>]*)>/i', function($matches) {
        // Add decoding="auto" and loading="eager"
        return '<img decoding="auto" loading="eager" ' . $matches[1] . '>';
    }, $content);

    // Add loading="eager" to iframe tags
    $content = preg_replace_callback('/<iframe([^>]*)>/i', function($matches) {
        // Add loading="eager"
        return '<iframe loading="eager" ' . $matches[1] . '>';
    }, $content);

    return $content;
}

// Use 'the_content' filter hook to apply to article content
add_filter('the_content', 'add_decoding_and_loading_properties');

One important point to note is that in the above code example, attributes for images and loading can only be applied to areas outputted from WordPress’s the_content() function. This code will not apply to areas where the_content() function is not used.

We are AEDI, a web and graphic design company based in Kurashiki, Okayama, Japan. We provide web design services, WordPress development, multilingual site development, SEO, UI/UX design for software/apps, graphic design for logos, flyers, pamphlets, catalogs, motion design/motion graphics, character design, and branding services. If you are looking for a web design company/to build websites and WordPress sites from scratch, please feel free to contact us. We will create a website tailored to your needs.

References:

<img>: The Image Embed element – HTML: HyperText Markup Language | MDN

HTML Standard

Investigating decoding=”async” in detail