Sometimes, images are not displayed in an optimized page version. In most cases, this is due to incompatibility with our Image Lazy Loader.

Page items affected include mostly slider images and slider background images. The slider is working, but either the slides show only text or are blank. Sometimes only the first slider image would be displayed, and the other would be blank.

In general, any missing/not displayed images in the unoptimized original version of the website are subject to investigation.

Here’s how to do it.

The issue may look like this:

How it should be:

The easiest way to identify if the issue is caused by our Image Lazy Loader would be to disable it temporarily:

Please remember to clear the cache for the affected page/pages or perform a full cache purge for the whole website:

To do a full purge, head over to our Dashboard page:

After the page is re-optimized, check if the issue is still there.

This means that it is not caused by our Image Lazy Loader.

🛎️ Another feature or conflict with another plugin may cause the issue. Reach out to our support team at [email protected] or via this link: https://support.nitropack.io to investigate further.

This means that the issue is caused by our Image Lazy Loader, and we can continue with troubleshooting.

✳️ The following lines suit more tech-savvy users.

If you experience issues on your website that may be caused by the “Automatic Image Lazy Loading” option and are not confident enough to tackle the issues alone, please contact NitroPack’s support team for further assistance. Our usual response time is 20 minutes.

📍Before we move on to troubleshooting:

1. Re-enable the Image Lazy Loading feature

2. Clear your cache again

This will ensure all other images on your website remain optimized, while you work on fixing the affected ones.

Let’s begin!

👉To identify the affected image, open two browser tabs (we’ve used Chrome for this example).

One with the optimized page that displays the issue and another with the unoptimized version of the same page (append the ?nonitro parameter to the same URL - yourwebsite.com?nonitro).

👉Then, in the optimized version of the page, right-click on the broken element and hit "Inspect" to open Chrome Inspector.

📍 We recommend hovering over the affected image and then clicking Inspect, as that should take you to the correct element in the Inspect mode.

👉 In the example below, the affected image resides in a <div> element. You will recognize the image by its file name and the file’s extension (.jpg, .png, .jpeg, etc.)

If the nitro-lazy-src attribute is present, you’ve found the culprit.

👉 Let’s proceed with excluding the element from the Image Lazy Loading optimization:

1. Copy the class value. In our case, it's “slide-content” and img tag.

2. Then, open your NitroPack Dashboard > Cache Settings > Images & Media > Images Lazy loading > Additional options.

3. In the “Specify CSS selectors to disable image lazy loading for matching elements” field, paste the values just like that:

.slide-content > img.

4. Click the Save Settings button, clear the cache for the page, and then reload the optimized version of the page with the affected image a few times to confirm that the exclusion is working.

(Optional) 5. To double-check the issue is now resolved, you can go back to the image and inspect it again. Looking at the source code, you'll notice that the nitro-lazy-src attribute mentioned above is now missing.

Exclusion used: .top-rated-seattle-surgeons > img
​

We’re using the specific class “top-rated-seattle-surgeons” as it is unique. The other classes applied may be used elsewhere, and that would cause multiple images to be excluded from lazy loading.

Exclusion used: .saga-slide .slide-bg > img
​

We’re using the specific class “saga-slide” and inner element “slide-bg” as it is unique to the slider used.

📌 If you need any assistance or have questions, reach out to our support team at [email protected] or via this link: https://support.nitropack.io