Support Home > Appearance > Lazy Images

Lazy Images

Lazy Images makes pages load much faster by only loading images the user can see, and waiting until the user scrolls down to load images that are offscreen.

In our testing this provides a huge benefit in terms of page speed and bandwidth, and a great for users in low-bandwidth (or expensive-bandwidth) environments – e.g. mobile phones.

To enable this experimental feature:

– Going to /wp-admin/admin.php?page=jetpack_modules
– Find the “Lazy Images” module and click “Activate”

We intend on shipping UI for Lazy Images in the Jetpack 5.7.0 release.

What does it do?

Lazy images works by filtering on the post content and modifying image tags so that the src attribute loads a transparent placeholder image.

So, for example, <img src="https://jetpack.com/image.jpg" /> would become something like <img src="https://jetpack.com/placeholder.jpg" data-lazy-src="https://jetpack.com/image.jpg" /> .

Then, when JavaScript loads, it will look for all images in the viewport, and replace the src attribute with what is in data-lazy-src. This also occurs as the user scrolls down the page as images come into the viewport.

Why does this matter?

When a website loads, by default, it tries to load all of the images that it sees in the source. For a desktop browser visitor, loading that page may not be an issue. But, imagine the loading experience for mobile visitors where the viewport is much less wide, which results in content getting pushed out of the viewport. Without lazy images, mobile users would end up loading many images that aren’t even in the viewport.

Lazy images can drastically improve site performance. With mobile usage of the Internet now surpassing that of the desktop, which means that majority of our users are likely accessing our content over cellular connections, this performance increase is very important.

In our testing, the average site will load three times as fast and use less than half the bandwidth with lazy images enabled.

Customizing Lazy Images

With the 5.6.0 release of Jetpack, Lazy Images shipped with two filters that allow users to tweak its functionality.

The first filter is lazyload_is_enabled, which will allow developers to customize when lazy loading should be enabled. For example, if a developer doesn’t want lazy images to run on a certain page, the developer could hook in and disable lazy images for that page.

The second filter is lazyload_images_placeholder_image, which will allow a developer to specify their own placeholder image. By default, Jetpack will load a 1×1 transparent gif, but certain implementations may call for something else.

Lastly, there is the jetpack_lazy_images_new_attributes filter which will allow a developer to modify the attributes for a lazy loaded image as the content is filtered. This is to allow for changes based on implementations that we don’t foresee.

  • Table Of Contents

  • Categories

  • Contact Us

    Need more help? Feel free to contact us.