Optimize Image Loading in WordPress (fetchpriority, lazy load, decoding)

This feature is available in the Pro version starting from v1.2.7.1, and the Lite version starting from v1.4.0.4.

If you are using v1.2.7.1 (Pro), or v1.4.0.4 (Lite), you will notice just 3 fields: Source (Image URI or RegEx), Attribute and Value. You can upgrade to the latest version OR use the existing format, and whenever you will update the plugin, the changes will be applied to the new format (below you have an explanation of how it works). The new fields will be visible from v1.2.7.2 (Pro) and v1.4.0.5 (Lite) (to be released)

The Resource Loading feature in Asset CleanUp (located in “Settings” — “Resource Loading”) allows you to control how specific images are loaded by the browser.

You can use it to add performance-related attributes to selected <img> tags, by matching the image source, CSS class, or the full <img> tag.

This is useful when you want to:

  • prioritize important above-the-fold images
  • lazy-load images that are not immediately visible
  • improve Largest Contentful Paint (LCP);
  • reduce unnecessary loading pressure during the initial page load
  • fine-tune how the browser decodes images.

Quick Navigation

How it works

↑ Back to top

Asset CleanUp Pro scans the HTML output of the page and looks for image tags matching the rules you define.

When a matching image is found, the selected attribute and value are added to the corresponding <img> tag.

For example, if you add this rule:

IF / Match rule THEN apply attribute Value
Image source contains /hero.jpg fetchpriority high

An image such as:

<img src="https://example.com/wp-content/uploads/hero.jpg" alt="Hero image">

can be changed to:

<img src="https://example.com/wp-content/uploads/hero.jpg" alt="Hero image" fetchpriority="high">

This feature does not replace the image, resize it, compress it, or change the image file itself. It only adds or updates attributes on the matching <img> tag.

Available attributes

↑ Back to top

Not sure when to use fetchpriority="high" versus loading="lazy"? Read the detailed guide with practical examples and recommendations.

fetchpriority

The fetchpriority attribute tells the browser how important an image is compared to other resources.

Value Effect
high Suggests that the browser should prioritize loading this image. Useful for hero images, banners, featured images, or images likely to affect LCP.
low Suggests that the browser can give this image lower priority. Useful for less important images.
auto Lets the browser decide the priority automatically.

Example:

<img src="/hero.jpg" alt="Hero image" fetchpriority="high">

Use fetchpriority="high" carefully. It should usually be used only for the most important visible image on the page, such as the main hero image or the image responsible for Largest Contentful Paint.

loading

The loading attribute controls whether the browser should load the image immediately or delay it until needed.

Value Effect
eager Loads the image immediately. Useful for important above-the-fold images.
lazy Delays loading the image until it is close to entering the viewport. Useful for below-the-fold images.

Example:

<img src="/gallery-image.jpg" alt="Gallery image" loading="lazy">

Do not lazy-load important above-the-fold images, especially the main hero image, as this can hurt LCP.

decoding

The decoding attribute gives the browser a hint about how image decoding should be handled.

Value Effect
async Allows the browser to decode the image asynchronously. This can help reduce rendering delays.
sync Suggests that the image should be decoded synchronously. Use carefully, as it can block rendering.
auto Lets the browser decide the best decoding behavior.

Example:

<img src="/image.jpg" alt="Image" decoding="async">

In most cases, decoding="async" is a safe option for non-critical images.

Rule builder fields

↑ Back to top

1. IF / Match rule

If you select to match it by the Image source, the following tags from the <img> tag: “src”, “srcset”, “data-src”, and “data-srcset” would be checked. For CSS Class, it would check the “class” attribute (you can even add multiple classes there, separated by space or as CSS selector style). As for the Whole IMG tag, it could match anything within the code><img> tag (e.g. you might have a very particular text in the “alt” attribute or a particular attribute set). The matching value field can be used in two ways:

  • as a plain text match — Contains” drop-down option
  • as a regular expression match — “Matches RegEx” drop-down option
— Plain text matching

If you enter a normal string, Asset CleanUp Pro will look for that exact text inside the image URL. Using a partial path is often easier and more flexible, especially if the same site is used across staging, production, CDN URLs, or different domains.

Example:

/wp-content/uploads/hero.jpg

This would match an image such as:

<img src="https://example.com/wp-content/uploads/hero.jpg" alt="Hero image">

This type of rule is useful when you want to target one specific image.

— RegEx matching

If you enter a regular expression, Asset CleanUp Pro will use it to match multiple image URLs that follow a specific pattern.

Example:

#/wp-content/uploads/(.*?).jpg#

This would match JPG images loaded from the /wp-content/uploads/ directory, including images in subfolders.

For example, it can match:

https://example.com/wp-content/uploads/hero.jpg
https://example.com/wp-content/uploads/2026/05/banner.jpg
https://example.com/wp-content/uploads/products/product-photo.jpg

This type of rule is useful when you want to apply the same loading attribute to a group of images instead of adding one rule for each image.

— Examples
“Image source” option Match type   What it matches
/wp-content/uploads/hero.jpg Plain text (Contains) Only image URLs containing this exact path.
/wp-content/uploads/ Plain text (Contains) Any image URL containing /wp-content/uploads/.
#/wp-content/uploads/(.*?).jpg# RegEx JPG images inside /wp-content/uploads/, including subfolders.
#/wp-content/uploads/2026/(.*?).(jpg|png|webp)# RegEx JPG, PNG, or WebP images inside the /wp-content/uploads/2026/ directory.

RegEx rules are powerful, but they should be used carefully. A broad RegEx pattern can match more images than expected.

2. THEN apply: Attribute

Choose which attribute should be added or updated on the matching image.

Available options:

3. THEN apply: Value

Choose the value for the selected attribute.

Attribute Available values
fetchpriority high, low, auto
loading eager, lazy
decoding async, sync, auto

Common use cases

↑ Back to top

Prioritize the main hero image

Match rule Attribute Value
Image source contains /hero.jpg fetchpriority high 
<img src="/hero.jpg" alt="Hero image" fetchpriority="high">

Prevent the hero image from being lazy-loaded

Match rule THEN apply attribute Value
Image source contains /hero.jpg loading eager 
<img src="/hero.jpg" alt="Hero image" loading="eager">

Lazy-load a below-the-fold image

Match rule THEN apply attribute Value
Image source contains /gallery-image.jpg loading lazy 
<img src="/gallery-image.jpg" alt="Gallery image" loading="lazy">

Decode non-critical images asynchronously

Match rule THEN apply attribute Value
Image source contains /image.jpg decoding async 
<img src="/image.jpg" alt="Image" decoding="async">
Image type Recommended attribute
Main hero image / LCP image fetchpriority="high" and usually loading="eager"
Below-the-fold images loading="lazy"
Non-critical images decoding="async"
Uncertain cases Leave the browser default or use auto

Avoid applying fetchpriority="high" to many images. If too many resources are marked as high priority, the browser has less useful information for deciding what truly matters.

Important notes

↑ Back to top

This feature only applies to actual <img> tags found in the HTML source.

It does not apply to:

  • CSS background images;
  • images loaded later by JavaScript;
  • images inside external iframes;
  • images that are not present in the HTML output when Asset CleanUp Pro processes the page.

If an image is generated dynamically after the page has loaded, the rule may not apply to it.

Testing your changes

↑ Back to top

  1. Clear any page cache, CSS/JS cache, CDN cache, and browser cache if needed.
  2. Open the page in an incognito/private window.
  3. View the page source or inspect the image in DevTools.
  4. Check whether the expected attribute was added to the matching <img> tag.
  5. Test the page in tools such as PageSpeed Insights, Lighthouse, WebPageTest, or Chrome DevTools.

Example

↑ Back to top

Match rule THEN apply attribute Value
Image source contains /hero2.jpg fetchpriority high
Image source contains /hero3.png loading eager
Image source contains /hero1.jpg fetchpriority high

Possible output:

<img src="/wp-content/uploads/hero2.jpg" alt="Hero 2" fetchpriority="high">

<img src="/wp-content/uploads/hero3.png" alt="Hero 3" loading="eager">

<img src="/wp-content/uploads/hero1.jpg" alt="Hero 1" fetchpriority="high">

When not to use this feature

↑ Back to top

You may not need this feature if:

  • Your theme already handles image loading correctly
  • Your LCP image is already properly prioritized
  • All below-the-fold images are already lazy-loaded
  • You are not sure which image affects performance

For best results, first identify the important images using Lighthouse, PageSpeed Insights, or Chrome DevTools, then create rules only for those specific images.

Note: Rules are applied only to images that are loaded as external resources. Images embedded directly in the HTML using data URIs (e.g. src="data:image/...") are automatically ignored, as attributes like fetchpriority or loading do not apply to them.

When matching by image source, the matching process checks common image attributes such as src, srcset, data-src, and data-srcset. If a match is found, the rule is applied to the corresponding <img> tag.

This ensures that rules are applied only where they can have an actual impact on page loading and performance.

Was this post helpful?