High performance and SEO friendly lazy loader for images, iframes and more. Many features, like low-res Blurhash placeholders and image fade-in
lazysizes is a WordPress plugin for the high performance, SEO-friendly and auto-triggering lazyloader with the same name. Support includes images (including responsive images with srcset
and the picture
tag), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster. Additionally, you can add low-res/blurry placeholder images using the Blurhash algorithm.
This plugin works by loading the lazysizes script and replacing the src
and srcset
attributes with data-src
and data-srcset
on the front end of a WordPress site. When a post or page is loaded, the lazysizes javascript will load the images, iframes etc. dynamically when needed. All you need to do is to enable the plugin, and possibly tweak a few settings to your liking.
Thanks to aFarkas and contributors for making the lazysizes library possible, and for letting me use the same name.
Also thanks to dbhynds who made the Lazy Load XT plugin, which this plugin is based on.
Lazysizes filters images added to the page using the_content
, post_thumbnail_html
, widget_text
and get_avatar
. If your images are added using another function (wp_get_attachment_image
for example), lazysizes does not filter them by default. There are several options for changing what lazysizes filters, like enabling it to filter acf_the_content
for WYSIWYG content from Advanced Custom Fields, and enabling wp_get_attachment_image
support (somewhat limited, see below). For unsupported use cases you can also filter the HTML yourself by passing it to get_lazysizes_html
.
While this plugin has opt-in support for wp_get_attachment_image
, it doesn’t add a no-Javascript fallback, which causes images to become invisible for users where Javascript is disabled or unsupported. We cannot fix this for you automatically, but you can fix this with a couple of changes to the code that uses wp_get_attachment_image
. For example, if a theme has: echo wp_get_attachment_image($id);
, changing it to the following would lazy load the image and add no-Javascript fallback if enabled in settings: echo get_lazysizes_html( wp_get_attachment_image($id) );
If a popular plugin is incompatible and has a filter for modifying the HTML output, lazysizes could most likely get support for that plugin. In that case, feel free to ask! If the plugin has no such way to filter the output, they would have to add one for lazysizes to leverage.
The low-res Blurhash placeholder feature generates a text string for each image using the Blurhash algorithm. This string includes all the information necessary for the Blurhash script running in the visitor’s browser to decode it into a blurry image, which will be shown while the real image is loading.
Because the final image placeholder is generated in JavaScript, users on faster internet connections can sometimes see the full image directly for images that are above the fold. Images lower down on the page will have a placeholder ready by the time the user reaches them.
The placeholder Blurhash string is not computed on page load, as it can in some cases take several seconds to do so. Instead, it will need to be pregenerated. As long as Blurhash is enabled in the settings, all new images uploaded will have a Blurhash string generated automatically. Additionally, you can manage the Blurhash string for each attachment individually in the Media Library. There is an option to generate and store Blurhash strings on page load, which can be used to easily generate Blurhash strings for lots of images by visiting the page they’re shown on. Just remember to turn that option back off, or your visitors may be slightly upset.
For technical reasons, Blurhash is only supported for local image attachments, and at the moment is not officially supported for picture elements. Images without a Blurhash string will behave just like they do with the option turned off. Blurhash placeholders work with the existing effects, like fade-in, but in some cases the perfect fade-in effect may not be possible. The Blurhash placeholder will still fade in, but it might not fade when transitioning to the full image. This is because of a few edge cases not supported by the advanced Blurhash reveal effect.
The advanced Blurhash reveal effect works by creating an additional image element positioned under the regular image. This gives the best result in combination with the fade effect, but might not support all WordPress themes. Safeguards exist to prevent using the advanced effect when not supported (by falling back to the slightly imperfect fade effect), but in some cases problems may still occur. If you see this type of problem, you can disable the advanced Blurhash reveal effect in the settings. Feel free to contact me on the support forums, and I may be able to work out what was going wrong.
The PHP code for this plugin was originally based on that of Lazy Load XT, with many changes since. The main difference is that this plugin is using a completely different lazy loading library (lazysizes), with no jQuery dependency. Additionally, this plugin is actively maintained and has advanced features like Blurhash support.
Thanks to dbhynds for making the Lazy Load XT plugin. Without that project, this one would not be possible.
There are a few reasons:
This plugin is not affiliated with the lazysizes project, but I asked for, and got, permission by aFarkas to use the name. That’s as far as any connection between the two go.
A partial deploy caused by human error led to a fatal error due to missing files for versions v.1.3.0 and v1.3.1. This has been fixed, along with the following:
Note that this is the last release that will support PHP 5.6 and WordPress 3.9. The next release will most likely require PHP 7.2 and WordPress 4.5 or newer.
Big thanks to martychc23 and dutze for their help and patience in making this release as good as it is.