Lazy Loading is an approach to load offscreen images on a web page only when required. This way, NitroPack can improve the page’s loading time without reducing the actual page size.

What is happening is that users can only view the first images when they open a website. The images below the above-the-fold do not need to be loaded right away. The Automatic Image Lazy Loading from NitroPack will load images only when they are present within the viewport.

By standard images, we mean any image utilized via <img> tag within your HTML. All images found within that tag should be Lazy Loaded by our service.

By background images, we mean any image assigned to a different tag than <img>.
For example, valid tags are:

and etc.

The complexity and variety of ways to apply a background image to an element allow NitroPack to apply Automatic Image Lazy Loading only to background images that were placed within the Inline styling of the specific element.

Example of a working scenario:

<div class=”image” style="background-image: url(image.jpg)"></div>

Example of non-working scenarios:

As you can see, if the background image is added another way, such as in a CSS file or internal CSS <style> tag, it cannot be LazyLoaded on our end.

An inline frame (iframe) is an HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics, and interactive content.

NitroPack easily detects elements with tag <iframe> and lazy loads them.

What images can’t benefit from NitroPack’s Lazy Loading?

Example of an element before Automatic Image Lazy Loading:

<img width="93" height="93" src="https://yourwebsite.com/picture-1.png" loading="lazy" alt="image">

Example of an element after Automatic Image Lazy Loading:

<img width="93" height="93" alt="image" nitro-lazy-src="https://our-cdn-domain.com/picture-1.png" class="lazyloaded" nitro-lazy-empty="" id="AdwWAHJLR" src="https://our-cdn-domain.com/picture-1.png">

The easiest way to check if an element is Lazy Loaded on our end will be to look for the nitro-lazy-src attribute in the website’s source code.

⚠️Keep in mind that NitroPack will not lazy load images in the above-the-fold viewport (the visible section of your website before scrolling), as they are loaded instantly.

To do so, Inspect the image via your browser’s Developer Tools.

You may find the image on the page and right-click the image, then select “Inspect”.

Your browser’s Developer Tools console will open, and you will see the DOM tree with reference to the image.

If you verify that an image is, in fact, not LazyLoaded, please contact our Support team to resolve the issue.

You can locate the Lazy Loading settings in your NitroPack dashboard.

Simply navigate to your NitroPack dashboard > Cache Settings > Images & Media > Images lazy loading.
​

Here is some additional information about every setting:

It makes sure that images get explicit width and height before the image is loaded.

You can specify for which CSS selectors you want to disable our Lazy loading. Especially useful when you want to keep the lazy loading for most of your elements and have a bunch of images that don’t need to be delayed.

For a small performance cost, you can get your slider compatible with our lazy loading during the DOM initialization.

With this setting enabled, NitroPack will display that overlay instead of the video thumbnail before the video is loaded.

Elements approaching the viewport will be loaded depending on when they reach the configured threshold.

You can choose whether you want to have your iframes lazy loaded or not.

​

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