```
```html
```
## [Demo with code examples](http://afarkas.github.io/lazysizes/#examples)
Can be seen [here](http://afarkas.github.io/lazysizes/#examples)
## Responsive image support (picture and/or srcset)
Lazysizes is built upon the Responsive image standard and extends it with additional functionality. For full cross browser responsive image support you must use either a full polyfill like [picturefill](https://github.com/scottjehl/picturefill) or use the extreme lightweight partial [respimg polyfill plugin](plugins/respimg) or the [responsive image on demand plugin](plugins/rias). Alternatively, you can simply define a fallback src via the ``data-src`` attribute. If you want to learn more about the responsive image syntax read "[The anatomy of responsive images](https://jakearchibald.com/2015/anatomy-of-responsive-images/)".
## What makes lazysizes so awesome:
**lazysizes** is different than other lazy image loaders.
1. **Detects any visibility changes on current and future lazyload elements in any web environment automatically**: The script works as an universal, self-initializing, self-configuring and self-destroying component and detects any changes to the visibility of any current and future image/iframe elements automatically no matter whether it becomes visible through a user scroll, a CSS animation triggered through ``:hover`` or through any kind of JS behavior (carousel, slider, infinite scroll, masonry, isotope/filtering/sorting, AJAX, SPAs...). It also works automatically in conjunction with any kind of JS-/CSS-/Frontend-Framework (jQuery mobile, Bootstrap, Backbone, Angular, React, Ember (see also the [attrchange/re-initialization extension](plugins/attrchange))).
2. **Future-proof**: It directly includes standard responsive image support (``picture`` and ``srcset``)
3. **Separation of concerns**: For responsive image support it adds an automatic ``sizes`` calculation as also alias names for media queries feature. There is also no JS change needed if you add a scrollable container with CSS (overflow: auto) or create a mega menu containing images.
4. **Performance**: It's based on highly efficient, best practice code (runtime **and** network) to work jank-free at 60fps and can be used with hundreds of images/iframes on CSS and JS-heavy pages or webapps.
5. **Extendable**: It provides JS and CSS hooks to extend lazysizes with any kind of lazy loading, lazy instantiation, in view callbacks or effects (see also the [available plugins/snippets](#plugins)).
6. **Intelligent prefetch/Intelligent resource prioritization**: lazysizes prefetches/preloads near the view assets to improve user experience, but only while the browser network is idling (see also ``expand``, ``expFactor`` and ``loadMode`` options). This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.
7. **Lightweight, but mature solution**: lazysizes has the right balance between a lightweight and a fast, reliable solution
8. **SEO improved**: lazysizes does not hide images/assets from Google. No matter what markup pattern you use. Google doesn't scroll/interact with your website. lazysizes detects, whether the user agent is capable to scroll and if not, reveals all images instantly.
## More about the API
**lazysizes** comes with a simple markup and JS API. Normally you will only need to use the markup API.
### Markup API
Add the ``class`` ``lazyload`` to all ``img`` and ``iframe`` elements, which should be loaded lazy. *Instead* of a ``src`` or ``srcset`` attribute use a ``data-src`` or ``data-srcset`` attribute:
```html
```
#### 
```
**
```
The LQIP technique can be enhanced by combining it with CSS transitions/animation to sharpen/unblur or overfade the LQIP image.
Please also have a look at our [lazysizes Blur Up plugin](https://jsfiddle.net/trixta/v0oq0412/embedded/result/) (recommended).
```html
```
### The noscript pattern
In case disabled JavaScript is a concern you can combine this simple pattern with an image inside a ``noscript`` element.
```html
```
Note: As an alternative to the noscript pattern also checkout the [noscript extension](plugins/noscript).
### [data-expand] attribute
Normally lazysizes will expand the viewport area to lazy preload images/iframes which might become visible soon. This value can be adjusted using the ``expand`` option.
Additionally, this general option can be overridden with the ``data-expand`` attribute for each element. Different than the general ``expand`` option the ``data-expand`` attribute also accepts negative values (All numbers but ``0`` are accepted!).
This becomes especially handy to add unveiling effects for teasers or other elements:
```html
```
### CSS API
lazysizes adds the class ``lazyloading`` while the images are loading and the class ``lazyloaded`` as soon as the image is loaded. This can be used to add unveil effects:
```css
/* fade image in after load */
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
```
```css
/* fade image in while loading and show a spinner as background image (good for progressive images) */
.lazyload {
opacity: 0;
}
.lazyloading {
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(loader.gif) no-repeat center;
}
```
### Broken image symbol
In case you are using an `alt` attribute but do not declare a `src`/`srcset` attribute you will end up with a broken image symbol.
There are two easy ways to deal with it.
Either define a `src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="` or add the following CSS.
```css
img.lazyload:not([src]) {
visibility: hidden;
}
```
### JS API
**lazysizes** automatically detects new elements with the class ``lazyload`` so you won't need to call or configure anything in most situations.
#### JS API - options
Options can be set by declaring a global configuration option object named ``lazySizesConfig``. This object must be defined before the lazysizes script. A basic example:
```js
window.lazySizesConfig = window.lazySizesConfig || {};
// use .lazy instead of .lazyload
window.lazySizesConfig.lazyClass = 'lazy';
// use data-original instead of data-src
lazySizesConfig.srcAttr = 'data-original';
//page is optimized for fast onload event
lazySizesConfig.loadMode = 1;
```
In case you are using a module bundler it is recommended to change the options directly after importing the `lazysizes` module:
```js
import lazySizes from 'lazysizes';
// other imports ...
lazySizes.cfg.lazyClass = 'lazy';
```
Here the list of options:
* ``lazySizesConfig.lazyClass`` (default: ``"lazyload"``): Marker class for all elements which should be lazy loaded (There can be only one ``class``. In case you need to add some other element, without the defined class, simply add it per JS: ``$('.lazy-others').addClass('lazyload');``)
* ``lazySizesConfig.preloadAfterLoad`` (default: ``false``): Whether lazysizes should load all elements after the window onload event. Note: lazySizes will then still download those not-in-view images inside of a lazy queue, so that other downloads after onload are not blocked.)
* ``lazySizesConfig.preloadClass`` (default: ``"lazypreload"``): Marker class for elements which should be lazy pre-loaded after onload. Those elements will be even preloaded, if the ``preloadAfterLoad`` option is set to ``false``. Note: This *class* can be also dynamically set (``$currentSlide.next().find('.lazyload').addClass('lazypreload');``).
* ``lazySizesConfig.loadingClass`` (default: ``"lazyloading"``): This ``class`` will be added to ``img`` element as soon as image loading starts. Can be used to add unveil effects.
* ``lazySizesConfig.loadedClass`` (default: ``"lazyloaded"``): This ``class`` will be added to any element as soon as the image is loaded or the image comes into view. Can be used to add unveil effects or to apply styles.
* ``lazySizesConfig.expand`` (default: ``370-500``): The ``expand`` option expands the calculated visual viewport area in all directions, so that elements can be loaded before they become visible. The default value is calculated depending on the viewport size of the device. (Note: Reasonable values are between ``300`` and ``1000`` (depending on the ``expFactor`` option.) In case you have a lot of small images or you are using the LQIP pattern you can lower the value, in case you have larger images set it to a higher value. Also note, that lazySizes will dynamically shrink this value to ``0`` if the browser is currently downloading and expand it if the browser network is currently idling and the user not scrolling (by multiplying the ``expand`` option with ``1.5`` (``expFactor``)). This option can also be overridden with the ``[data-expand]`` attribute.
* ``lazySizesConfig.minSize`` (default: ``40``): For ``data-sizes="auto"`` feature. The minimum size of an image that is used to calculate the ``sizes`` attribute. In case it is under ``minSize`` the script traverses up the DOM tree until it finds a parent that is over ``minSize``.
* ``lazySizesConfig.srcAttr`` (default: ``"data-src"``): The attribute, which should be transformed to ``src``.
* ``lazySizesConfig.srcsetAttr`` (default: ``"data-srcset"``): The attribute, which should be transformed to ``srcset``.
* ``lazySizesConfig.sizesAttr`` (default: ``"data-sizes"``): The attribute, which should be transformed to ``sizes``. Makes almost only makes sense with the value ``"auto"``. Otherwise, the ``sizes`` attribute should be used directly.
* ``lazySizesConfig.customMedia`` (default: ``{}``): The ``customMedia`` option object is an alias map for different media queries. It can be used to separate/centralize your multiple specific media queries implementation (layout) from the ``source[media]`` attribute (content/structure) by creating labeled media queries. (See also the [custommedia extension](plugins/custommedia)).
* ``lazySizesConfig.loadHidden`` (default: ``true``): Whether to load `visibility: hidden` elements. Important: lazySizes will load hidden images always delayed. If you want them to be loaded as fast as possible you can use `opacity: 0.001` but never `visibility: hidden` or `opacity: 0`.
* ``lazySizesConfig.ricTimeout`` (default: ``0``): The timeout option used for the `requestIdleCallback`. Reasonable values between: 0, 100 - 1000. (Values below 50 disable the `requestIdleCallback` feature.)
* ``lazySizesConfig.throttleDelay`` (default: ``125``): The timeout option used to throttle all listeners. Reasonable values between: 66 - 200.
```html
lazySizes is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind.
Simply add the JS to your website and put the class lazyload to all elements, which should be lazy loaded. For a short API description go to the readme.md.
The low quality image placeholder pattern is a performance technique. While it might increase measuered time until the onload event, it dramatically increases percieved performance.
This pattern is recommend for above the fold/crictical images.
<img alt="100%x200" src="low-quality.jpg" data-src="normal-quality.jpg" class="lazyload" />
The normal image pattern is can be used for non-critical images or in case there is no low quality image available:
<img class="lazyload" data-src="image.jpg" alt="Desert Road" />
Simply use data-srcset and data-sizes and you can support responsive images.
<img alt="" src="small.jpg" sizes="(min-width: 1000px) 930px, 90vw" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" class="lazyload" />
picture elementThe picture element is also supported. Simply add the lazyload class to the img and use data-srcset on your source and the img element.
<picture> <!--[if IE 9]><video style="display: none"><![endif]--> <source data-srcset="500.jpg" media="(max-width: 500px)" /> <source data-srcset="1024.jpg" media="(max-width: 1024px)" /> <source data-srcset="1200.jpg" /> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" alt="image with artdirection" /> </picture>
automatic sizes feature: In case of lazy loading images the sizes attribute of the img/source elements can be calculated with JS.
This automatic sizes feature is directly included in lazySizes. Simply use the keyword auto inside of the data-sizes attributes (data-sizes="auto").
Important: How sizes is calculated: The automatic sizes calculation takes the width of the image if it is over 40 (see also minSize option). In case it's below the minSize threshold, it traverses up the DOM tree until it finds a parent which is over 40 and uses this number. Often the following general CSS rule might help: img[data-sizes="auto"] { display: block; }.
The autosizes feature makes using responsive images with the right sizes value easy as hell.
<img alt="" data-sizes="auto" src="small.jpg" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" class="lazyload" />
For responsive images support you must use either use a full polyfill like picturefill or respimage or use the extreme lightweight partial respimg polyfill plugin or use the Responsive Images as a Service extension.
Iframes can be loaded too:
<iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" class="lazyload" frameborder="0" allowfullscreen></iframe>
Nulla vitae elit libero, a pharetra augue mollis interdum.
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
LazySizes can be extended to load nearly everything lazily. The ls.unveilhooks.js plugin can be used to lazy load scripts, background images, and videos. Simply add a data-script to your widget and you are done:
<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload"> <!-- widget content --> <div>
While other lazy loaders or responsive images solution need to be called, if new elements are added to the DOM or do become visible through a special user interaction or a JavaScript behavior.
LazySizes does automatically detect any changes to the DOM and the visibility of .lazyload elements.
lazySizes is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind.
Simply add the JS to your website and put the class lazyload to all elements, which should be lazy loaded. For a short API description go to the readme.md.
The low quality image placeholder pattern uses a low quality image for the first impression.
<img alt="bird" src="low-quality.jpg" data-src="normal-quality.jpg" class="lazyload" />
Of course the low quality image can be simply omitted to save more image data.
<img class="lazyload" data-src="image.jpg" alt="Mountain" />
Simply use data-srcset and you can support responsive images.
<img alt="Jellyfish" sizes="(min-width: 1000px) 930px, 90vw" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" data-src="medium.jpg" class="lazyload" />
picture elementThe picture element is also supported. Simply add the lazyload class to the img and use data-srcset on your source and the img element.
<picture> <!--[if IE 9]><video style="display: none"><![endif]--> <source data-srcset="240.jpg 240w, 320.jpg 320w, 500.jpg 500w" media="(max-width: 550px)" /> <source data-srcset="640.jpg 640w, 990.jpg 990w, 1024.jpg 1024w" media="(max-width: 1024px)" /> <source data-srcset="1200.jpg 1200w" /> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="1024.jpg" class="lazyload" alt="image with artdirection" /> </picture>
automatic sizes feature: In case of lazy loading images the sizes attribute of the img/source elements can be calculated with JS.
This automatic sizes feature is directly included in lazySizes. Simply use the keyword auto inside of the data-sizes attributes (data-sizes="auto").
Important: How sizes is calculated: The automatic sizes calculation takes the width of the image if it is over 40 (see also minSize option). In case it's below the minSize threshold, it traverses up the DOM tree until it finds a parent which is over 40 and uses this number. Often the following general CSS rule might help: img[data-sizes="auto"] { display: block; }.
The autosizes feature makes using responsive images with the right sizes value easy as hell.
<img alt="house by the lake" data-sizes="auto" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" data-src="medium" class="lazyload" />
For responsive images support you must use either use a full polyfill like picturefill or use the extreme lightweight partial respimg polyfill plugin or use the Responsive Images as a Service extension.
Iframes can be loaded too:
<iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" class="lazyload" frameborder="0" allowfullscreen></iframe>
[data-expand]: More than lazyloadingLazySizes normally loads in view elements as fast as possible and near the view elements are lazily pre-loaded. This can be modified in general using the expand option. With the data-expand attribute this can be changed element specific to expand or shrink the viewport.
This can be used to create unveiling effects for elements with or even without loading anything.
<style>
.teaser.lazyload {
opacity: 0;
transform: scale(0.8);
}
.teaser.lazyloaded {
opacity: 1;
transform: scale(1);
transition: all 700ms;
}
</style>
<script>
window.lazySizesConfig = {
addClasses: true
};
</script>
<div class="teaser lazyload" data-expand="-110">
<img data-src="image.jpg" class="lazyload" />
<h1>Teaser Title</h1>
<p>...</p>
</div>
Nulla vitae elit libero, a pharetra augue mollis interdum.
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
LazySizes can be extended to load nearly everything lazily. The ls.unveilhooks.js plugin can be used to lazy load scripts, background images, and videos. Simply add a data-script to your widget and you are done:
<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload"> <!-- widget content --> <div>
While other lazy loaders or responsive images solution need to be called, if new elements are added to the DOM or do become visible through a special user interaction or a JavaScript behavior.
LazySizes does automatically detect any changes to the DOM and the visibility of .lazyload elements.
lazySizes is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind.
Simply add the JS to your website and put the class lazyload to all elements, which should be lazy loaded. For a short API description go to the readme.md.
The low quality image placeholder pattern is a performance technique. While it might increase measured time until the onload event, it dramatically increases perceived performance.
This pattern is recommended for above the fold/critical images.
<img alt="100%x200" src="low-quality.jpg" data-src="normal-quality.jpg" class="lazyload" />
The normal image pattern can be used for non-critical/below the fold images or in case there is no low quality image available:
<img class="lazyload" data-src="image.jpg" alt="Desert Road" />
Simply use data-srcset and data-sizes and you can support responsive images.
<img alt="" src="small.jpg" sizes="(min-width: 1000px) 930px, 90vw" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" class="lazyload" />
picture elementThe picture element is also supported. Simply add the lazyload class to the img and use data-srcset on your source and the img element.
<picture> <!--[if IE 9]><video style="display: none"><![endif]--> <source data-srcset="500.jpg" media="(max-width: 500px)" /> <source data-srcset="1024.jpg" media="(max-width: 1024px)" /> <source data-srcset="1200.jpg" /> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" data-src="1024.jpg" alt="image with artdirection" /> </picture>
automatic sizes feature: In case of lazy loading images the sizes attribute of the img/source elements can be calculated with JS.
This automatic sizes feature is directly included in lazySizes. Simply use the keyword auto inside of the data-sizes attributes (data-sizes="auto").
Important: How sizes is calculated: The automatic sizes calculation takes the width of the image if it is over 40 (see also minSize option). In case it's below the minSize threshold, it traverses up the DOM tree until it finds a parent which is over 40 and uses this number. Often the following general CSS rule might help: img[data-sizes="auto"] { display: block; }.
The autosizes feature makes using responsive images with the right sizes value easy as hell.
<img alt="" data-sizes="auto" data-src="medium.jpg" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" class="lazyload" />
For responsive images support you must use either use a full polyfill like picturefill or use the extreme lightweight partial respimg polyfill plugin or use the Responsive Images as a Service extension.
Iframes can be loaded too:
<iframe data-src="//www.youtube.com/embed/ZfV-aYdU4uE" class="lazyload" frameborder="0" allowfullscreen></iframe>
[data-expand]: More than lazyloadingLazySizes normally loads in view elements as fast as possible and near the view elements are lazily pre-loaded. This can be modified in general using the expand option. With the data-expand attribute this can be changed element specific to expand or shrink the viewport.
This can be used to create unveiling effects for elements with or even without loading anything.
<style>
.teaser.lazyload {
opacity: 0;
transform: scale(0.8);
}
.teaser.lazyloaded {
opacity: 1;
transform: scale(1);
transition: all 700ms;
}
</style>
<script>
window.lazySizesConfig = {
addClasses: true
};
</script>
<div class="teaser lazyload" data-expand="-80">
<img data-src="image.jpg" class="lazyload" />
<h1>Teaser Title</h1>
<p>...</p>
</div>
Nulla vitae elit libero, a pharetra augue mollis interdum.
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
LazySizes can be extended to load nearly everything lazily. The ls.unveilhooks.js plugin can be used to lazy load scripts, background images, and videos. Simply add a data-script to your widget and you are done:
<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload"> <!-- widget content --> <div>
While other lazy loaders or responsive images solution need to be called, if new elements are added to the DOM or do become visible through a special user interaction or a JavaScript behavior.
LazySizes does automatically detect any changes to the DOM and the visibility of .lazyload elements.
The numbers on the top are the calculated resolutions for the image:
number in green is the image selected. While number in gray is the next lower and number in red is the next higher candidate.
The image on the left side has the data-optimumx attribute attached, while the same image on the right side is always loaded with the full density.
As you will see with this demo. Some images do gain significant quality with retina, but some others don't. The standard HTML responsive image markup has no way to tell the browser about does differences, therefore the browser often can't make educated decisions. The optimumx plugin solves this by limiting the source canidates to reasonable ones.
with data-optimumx |
without data-optimumx |
|---|---|
|
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
with data-optimumx |
without data-optimumx |
|
|
with data-optimumx |
without data-optimumx |
|
|
with data-optimumx |
without data-optimumx |
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
|
with data-optimumx |
without data-optimumx |
|
|
The srcset with the sizes attribute is definitely the way to go to create responsive, flexibel, adaptive images.
Unfortunately there is no way to tell the browser, that a specific image doesn't gain much perceived quality with a higher density or that image quality of a specific image isn't important for the user experience.
Due to the fact, that a 2x retina means 4x data and 3x retina means 9x data, performance can suffer even on good connections badly.
lazySizes data-optimumx feature (build on top of data-sizes="auto") gives the developer more control to use adaptive images markup, but opt-out from to high retina at some point by defining the optimum density.
Unfortunately this demo makes only sense, if you are using a retina device. Maybe come back with one (tablet / smartphone)? Sorry!
data-optimumx attribute
any kind of content you want to be unveiled
Tweets by @TwitterDev */ 'use strict'; var scriptadded; function loadExecuteTwitter(){ if(window.twttr && twttr.widgets){ twttr.widgets.load(); return; } if(scriptadded){ return; } var elem = document.createElement('script'); var insertElem = document.getElementsByTagName('script')[0]; elem.src = '//platform.twitter.com/widgets.js'; scriptadded = true; insertElem.parentNode.insertBefore(elem, insertElem); } document.addEventListener('lazybeforeunveil', function(e){ if(e.detail.instance != lazySizes){return;} var twttrWidget = e.target.getAttribute('data-twitter'); if(twttrWidget){ lazySizes.aC(e.target, twttrWidget); loadExecuteTwitter(); } }); })); ================================================ FILE: plugins/unload/README.md ================================================ # lazysizes unload Unloads ``img.lazyload`` (including ``picture``) elements if they consume a lot of memory and they are out of view. To improve memory consumption as also resize/orientationchange performance. ## Usage Simply add the lazysizes unload extension to your site. ## Options * ``lazySizesConfig.unloadClass`` (default: ``"lazyunload"``): Elements with this class will be unloaded even if they only consume less memory/pixels than defined in ``unloadPixelThreshold``. * ``lazySizesConfig.unloadedClass`` (default: ``"lazyunloaded"``): If an element was unloaded it becomes the class ``lazyunloaded``. * ``lazySizesConfig.unloadPixelThreshold`` (default: Number is dynamically calculated): If the amount of image pixels exceeds this threshold this image will be unloaded. * ``lazySizesConfig.autoUnload`` (default: ``true``): Whether unloading should happen automatically with all lazyload images. If set to false, only elements with the class ``lazyunload`` will be unloaded. * ``lazySizesConfig.emptySrc`` (default: transparent data uri): The src to be used as unload image. * ``lazySizesConfig.unloadHidden`` (default: ``true``): Whether hidden images (``display: none;``) also should be unloaded. **Note**: In case you dynamically change the ``data-src``/``data-srcset`` of an already unloaded element, you have to remove the ``lazyunloaded`` class. ## Events * ``lazyafterunload``: This event will be fired on the unloaded lazyload elements. This event can be used to extend the unload functionality. ```js //div ajax example which returns DOM string: document.addEventListener('lazybeforeunveil', function (e) { var containerId = e.target.getAttribute('data-id'); //load ajax content with containerId //append content to e.target.innerHTML }); //clean DOM nodes inside container that where previously loaded by ajax: //lazyafterunload gives possibility to take care of the cleanup in this case document.addEventListener('lazyafterunload', function (e) { var container = e.target; while (container.firstElementChild) { container.removeChild(container.firstElementChild); } }); ``` ================================================ FILE: plugins/unload/ls.unload.js ================================================ (function(window, factory) { var globalInstall = function(){ factory(window.lazySizes); window.removeEventListener('lazyunveilread', globalInstall, true); }; factory = factory.bind(null, window, window.document); if(typeof module == 'object' && module.exports){ factory(require('lazysizes')); } else if (typeof define == 'function' && define.amd) { define(['lazysizes'], factory); } else if(window.lazySizes) { globalInstall(); } else { window.addEventListener('lazyunveilread', globalInstall, true); } }(window, function(window, document, lazySizes) { 'use strict'; if(!document.addEventListener){return;} var config, checkElements; var lazySizesCfg = lazySizes.cfg; var unloadElements = []; var requestAnimationFrame = window.requestAnimationFrame || setTimeout; var unloader = { checkElements: function(){ var i, len, box; var expand = (lazySizes._defEx + 99) * 1.1; var vTop = expand * -1; var vLeft = vTop; var vBottom = innerHeight + expand; var vRight = innerWidth + expand; for(i = 0, len = checkElements.length; i < len; i++){ box = checkElements[i].getBoundingClientRect(); if((box.top > vBottom || box.bottom < vTop || box.left > vRight || box.right < vLeft) || (config.unloadHidden && !box.top && !box.bottom && !box.left && !box.right)){ unloadElements.push(checkElements[i]); } } requestAnimationFrame(unloader.unloadElements); }, unload: function(element){ var sources, isResponsive, i, len; var picture = element.parentNode; lazySizes.rC(element, config.loadedClass); if(element.getAttribute(config.srcsetAttr)){ element.setAttribute('srcset', config.emptySrc); isResponsive = true; } if(picture && picture.nodeName.toUpperCase() == 'PICTURE'){ sources = picture.getElementsByTagName('source'); for(i = 0, len = sources.length; i < len; i++){ sources[i].setAttribute('srcset', config.emptySrc); } isResponsive = true; } if(lazySizes.hC(element, config.autosizesClass)){ lazySizes.rC(element, config.autosizesClass); element.setAttribute(config.sizesAttr, 'auto'); } if(isResponsive || element.getAttribute(config.srcAttr)){ element.src = config.emptySrc; } lazySizes.aC(element, config.unloadedClass); lazySizes.aC(element, config.lazyClass); lazySizes.fire(element, 'lazyafterunload'); }, unloadElements: function(elements){ elements = Array.isArray(elements) ? elements : unloadElements; while(elements.length){ unloader.unload(elements.shift()); } }, _reload: function(e) { if(lazySizes.hC(e.target, config.unloadedClass) && e.detail){ e.detail.reloaded = true; lazySizes.rC(e.target, config.unloadedClass); } } }; function init(){ if(!window.lazySizes || checkElements){return;} var docElem = document.documentElement; var throttleRun = (function(){ var running; var run = function(){ unloader.checkElements(); running = false; }; return function(){ if(!running){ running = true; setTimeout(run, 999); } }; })(); config = lazySizes.cfg; removeEventListener('lazybeforeunveil', init); if(!('unloadClass' in config)){ config.unloadClass = 'lazyunload'; } if(!('unloadedClass' in config)){ config.unloadedClass = 'lazyunloaded'; } if(!('unloadHidden' in config)){ config.unloadHidden = true; } if(!('emptySrc' in config)){ config.emptySrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; } if(!('autoUnload' in config)){ config.autoUnload = true; } if(!('unloadPixelThreshold' in config)){ config.unloadPixelThreshold = 60000; } if(config.autoUnload){ docElem.addEventListener('load', function(e){ if(e.target.naturalWidth * e.target.naturalHeight > config.unloadPixelThreshold && e.target.className && e.target.className.indexOf && e.target.className.indexOf(lazySizesCfg.loadingClass) != -1 && e.target.className.indexOf(lazySizesCfg.preloadClass) == -1){ lazySizes.aC(e.target, lazySizesCfg.unloadClass); } }, true); } lazySizes.unloader = unloader; checkElements = document.getElementsByClassName([config.unloadClass, config.loadedClass].join(' ')); setInterval(throttleRun, 9999); addEventListener('lazybeforeunveil', throttleRun); addEventListener('lazybeforeunveil', unloader._reload, true); } addEventListener('lazybeforeunveil', init); })); ================================================ FILE: plugins/unveilhooks/README.md ================================================ # lazysizes unveilhooks extension The unveilhooks plugin extends lazySizes to also unveil / lazyload scripts/widgets, background images, styles and video/audio elements: ```htmlNothing Twitter is doing is working https://t.co/s0FppnacwK pic.twitter.com/GK9MRfQkYO
— The Verge (@verge) April 26, 2016
The Responsive Image as Service plugin enables lazySizes to generate the best suitable image source based on an URL pattern. It works with pre-build images (i.e. grunt-responsive-images) as also with any third party or self hosted REST like image API / image on demand service.
For a short but full API description go to the readme.md.
Include the ls.rias plugin right after your lazysizes script, add the lazyload class as usual and the data-sizes="auto" attribute.
Inside of your data-src value include the {width} placeholder
*/
(function(window, factory) {
var globalInstall = function(){
factory(window.lazySizes);
window.removeEventListener('lazyunveilread', globalInstall, true);
};
factory = factory.bind(null, window, window.document);
if(typeof module == 'object' && module.exports){
factory(require('lazysizes'));
} else if (typeof define == 'function' && define.amd) {
define(['lazysizes'], factory);
} else if(window.lazySizes) {
globalInstall();
} else {
window.addEventListener('lazyunveilread', globalInstall, true);
}
}(window, function(window, document, lazySizes) {
'use strict';
var regPicture;
var lazySizesCfg = lazySizes.cfg;
var img = document.createElement('img');
if(('srcset' in img) && !('sizes' in img) && !window.HTMLPictureElement){
regPicture = /^picture$/i;
document.addEventListener('lazybeforeunveil', function(e){
if(e.detail.instance != lazySizes){return;}
var elem, parent, srcset, sizes, isPicture;
var picture, source;
if(e.defaultPrevented ||
lazySizesCfg.noIOSFix ||
!(elem = e.target) ||
!(srcset = elem.getAttribute(lazySizesCfg.srcsetAttr)) ||
!(parent = elem.parentNode) ||
(
!(isPicture = regPicture.test(parent.nodeName || '')) &&
!(sizes = elem.getAttribute('sizes') || elem.getAttribute(lazySizesCfg.sizesAttr))
)
){return;}
picture = isPicture ? parent : document.createElement('picture');
if(!elem._lazyImgSrc){
Object.defineProperty(elem, '_lazyImgSrc', {
value: document.createElement('source'),
writable: true
});
}
source = elem._lazyImgSrc;
if(sizes){
source.setAttribute('sizes', sizes);
}
source.setAttribute(lazySizesCfg.srcsetAttr, srcset);
elem.setAttribute('data-pfsrcset', srcset);
elem.removeAttribute(lazySizesCfg.srcsetAttr);
if(!isPicture){
parent.insertBefore(picture, elem);
picture.appendChild(elem);
}
picture.insertBefore(source, elem);
});
}
}));
================================================
FILE: plugins/include/README.md
================================================
# lazysizes include plugin
**lazysizes** include extension/plugin asynchronously include non crucial content, styles or JS modules. Due to lazyloading, prioritized queuing and preload after load techniques lazySizes include extension scales much better than similar other solutions.
Typical use cases are:
* lazy loading different content, styles or JS modules depending on certain conditions (responsive content, responsive behavior, media queries, existence of a DOM element, browser features, user preferences, element queries...)
* deferring heavy to render or uncacheable content (client or server side)
* progressively enhancing the document with new JS enabled content
* splitting or deferred loading of large JS/CSS modules in larger projects
* clean and simple architecture for initialization/loading and/or destroying/unloading of (conditional) JS behaviors
* deferred self-initializing of DOM behaviors
## Basic usage
Put a ``data-include`` attribute on your ``.lazyload`` element and reference the URL to load:
```html
```
The ``data-include`` can also consume a list of candidates represented by a URL in combination with an optional parenthesised condition. The lazySizes include extension will then take the first URL, that matches the condition:
```html
```
```html
```
### The ``getOptimumX`` option callback
Normally the image specific optimal pixel density should be added as a floating point number using the ``data-optimumx`` attribute. Additionally it is also possible to add the ``"auto"`` keyword as a value of the ``data-optimumx`` attribute. In that case the ``getOptimumX`` option callback is invoked with the element as the first argument.
```html
```
Unfortunately these techniques also double or even triple (think 1x: 65-85q, 2x: 30-50q, 3x/4x 15-40q) the amount of generated image candidates. In case you don't have so much resources the optimumx extension in conjunction with proper image compression is the best thing you can do.
But be aware each image has different characteristics: While some images look great on a HIGH DPI device even with a ``data-optimumx="1.2"`` other will need a much higher density for a good perceived quality.
## 
```
* ``lazySizesConfig.rias.prefix`` (default: ``""``): A string, which is prepended to the generated src.
```html
```
### Tip: Constraining the pixel density for a generated ``srcset`` attribute.
In case you don't want to generate additional compressive images for high resolution displays you can combine the RIaS extension with the [optimumx extension](../optimumx) to constrain the maximum pixel density for the generated ``srcset`` list.
```html
```
================================================
FILE: plugins/rias/ls.rias.js
================================================
(function(window, factory) {
var globalInstall = function(){
factory(window.lazySizes);
window.removeEventListener('lazyunveilread', globalInstall, true);
};
factory = factory.bind(null, window, window.document);
if(typeof module == 'object' && module.exports){
factory(require('lazysizes'));
} else if (typeof define == 'function' && define.amd) {
define(['lazysizes'], factory);
} else if(window.lazySizes) {
globalInstall();
} else {
window.addEventListener('lazyunveilread', globalInstall, true);
}
}(window, function(window, document, lazySizes) {
/*jshint eqnull:true */
'use strict';
var config, riasCfg;
var lazySizesCfg = lazySizes.cfg;
var replaceTypes = {string: 1, number: 1};
var regNumber = /^\-*\+*\d+\.*\d*$/;
var regPicture = /^picture$/i;
var regWidth = /\s*\{\s*width\s*\}\s*/i;
var regHeight = /\s*\{\s*height\s*\}\s*/i;
var regPlaceholder = /\s*\{\s*([a-z0-9]+)\s*\}\s*/ig;
var regObj = /^\[.*\]|\{.*\}$/;
var regAllowedSizes = /^(?:auto|\d+(px)?)$/;
var anchor = document.createElement('a');
var img = document.createElement('img');
var buggySizes = ('srcset' in img) && !('sizes' in img);
var supportPicture = !!window.HTMLPictureElement && !buggySizes;
(function(){
var prop;
var noop = function(){};
var riasDefaults = {
prefix: '',
postfix: '',
srcAttr: 'data-src',
absUrl: false,
modifyOptions: noop,
widthmap: {},
ratio: false,
traditionalRatio: false,
aspectratio: false,
};
config = lazySizes && lazySizes.cfg;
if(!config.supportsType){
config.supportsType = function(type/*, elem*/){
return !type;
};
}
if(!config.rias){
config.rias = {};
}
riasCfg = config.rias;
if(!('widths' in riasCfg)){
riasCfg.widths = [];
(function (widths){
var width;
var i = 0;
while(!width || width < 3000){
i += 5;
if(i > 30){
i += 1;
}
width = (36 * i);
widths.push(width);
}
})(riasCfg.widths);
}
for(prop in riasDefaults){
if(!(prop in riasCfg)){
riasCfg[prop] = riasDefaults[prop];
}
}
})();
function getElementOptions(elem, src, options){
var attr, parent, setOption, prop, opts;
var elemStyles = window.getComputedStyle(elem);
if (!options) {
parent = elem.parentNode;
options = {
isPicture: !!(parent && regPicture.test(parent.nodeName || ''))
};
} else {
opts = {};
for (prop in options) {
opts[prop] = options[prop];
}
options = opts;
}
setOption = function(attr, run){
var attrVal = elem.getAttribute('data-'+ attr);
if (!attrVal) {
// no data- attr, get value from the CSS
var styles = elemStyles.getPropertyValue('--ls-' + attr);
// at least Safari 9 returns null rather than
// an empty string for getPropertyValue causing
// .trim() to fail
if (styles) {
attrVal = styles.trim();
}
}
if (attrVal) {
if(attrVal == 'true'){
attrVal = true;
} else if(attrVal == 'false'){
attrVal = false;
} else if(regNumber.test(attrVal)){
attrVal = parseFloat(attrVal);
} else if(typeof riasCfg[attr] == 'function'){
attrVal = riasCfg[attr](elem, attrVal);
} else if(regObj.test(attrVal)){
try {
attrVal = JSON.parse(attrVal);
} catch(e){}
}
options[attr] = attrVal;
} else if((attr in riasCfg) && typeof riasCfg[attr] != 'function' && !options[attr]){
options[attr] = riasCfg[attr];
} else if(run && typeof riasCfg[attr] == 'function'){
options[attr] = riasCfg[attr](elem, attrVal);
}
};
for(attr in riasCfg){
setOption(attr);
}
src.replace(regPlaceholder, function(full, match){
if(!(match in options)){
setOption(match, true);
}
});
return options;
}
function replaceUrlProps(url, options){
var candidates = [];
var replaceFn = function(full, match){
return (replaceTypes[typeof options[match]]) ? options[match] : full;
};
candidates.srcset = [];
if(options.absUrl){
anchor.setAttribute('href', url);
url = anchor.href;
}
url = ((options.prefix || '') + url + (options.postfix || '')).replace(regPlaceholder, replaceFn);
options.widths.forEach(function(width){
var widthAlias = options.widthmap[width] || width;
var ratio = options.aspectratio || options.ratio;
var traditionalRatio = !options.aspectratio && riasCfg.traditionalRatio;
var candidate = {
u: url.replace(regWidth, widthAlias)
.replace(regHeight, ratio ?
traditionalRatio ?
Math.round(width * ratio) :
Math.round(width / ratio)
: ''),
w: width
};
candidates.push(candidate);
candidates.srcset.push( (candidate.c = candidate.u + ' ' + width + 'w') );
});
return candidates;
}
function setSrc(src, opts, elem){
var elemW = 0;
var elemH = 0;
var sizeElement = elem;
if(!src){return;}
if (opts.ratio === 'container') {
// calculate image or parent ratio
elemW = sizeElement.scrollWidth;
elemH = sizeElement.scrollHeight;
while ((!elemW || !elemH) && sizeElement !== document) {
sizeElement = sizeElement.parentNode;
elemW = sizeElement.scrollWidth;
elemH = sizeElement.scrollHeight;
}
if (elemW && elemH) {
opts.ratio = opts.traditionalRatio ? elemH / elemW : elemW / elemH;
}
}
src = replaceUrlProps(src, opts);
src.isPicture = opts.isPicture;
if(buggySizes && elem.nodeName.toUpperCase() == 'IMG'){
elem.removeAttribute(config.srcsetAttr);
} else {
elem.setAttribute(config.srcsetAttr, src.srcset.join(', '));
}
Object.defineProperty(elem, '_lazyrias', {
value: src,
writable: true
});
}
function createAttrObject(elem, src){
var opts = getElementOptions(elem, src);
riasCfg.modifyOptions.call(elem, {target: elem, details: opts, detail: opts});
lazySizes.fire(elem, 'lazyriasmodifyoptions', opts);
return opts;
}
function getSrc(elem){
return elem.getAttribute( elem.getAttribute('data-srcattr') || riasCfg.srcAttr ) || elem.getAttribute(config.srcsetAttr) || elem.getAttribute(config.srcAttr) || elem.getAttribute('data-pfsrcset') || '';
}
addEventListener('lazybeforesizes', function(e){
if(e.detail.instance != lazySizes){return;}
var elem, src, elemOpts, sourceOpts, parent, sources, i, len, sourceSrc, sizes, detail, hasPlaceholder, modified, emptyList;
elem = e.target;
if(!e.detail.dataAttr || e.defaultPrevented || riasCfg.disabled || !((sizes = elem.getAttribute(config.sizesAttr) || elem.getAttribute('sizes')) && regAllowedSizes.test(sizes))){return;}
src = getSrc(elem);
elemOpts = createAttrObject(elem, src);
hasPlaceholder = regWidth.test(elemOpts.prefix) || regWidth.test(elemOpts.postfix);
if(elemOpts.isPicture && (parent = elem.parentNode)){
sources = parent.getElementsByTagName('source');
for(i = 0, len = sources.length; i < len; i++){
if ( hasPlaceholder || regWidth.test(sourceSrc = getSrc(sources[i])) ){
sourceOpts = getElementOptions(sources[i], sourceSrc, elemOpts);
setSrc(sourceSrc, sourceOpts, sources[i]);
modified = true;
}
}
}
if ( hasPlaceholder || regWidth.test(src) ){
setSrc(src, elemOpts, elem);
modified = true;
} else if (modified) {
emptyList = [];
emptyList.srcset = [];
emptyList.isPicture = true;
Object.defineProperty(elem, '_lazyrias', {
value: emptyList,
writable: true
});
}
if(modified){
if(supportPicture){
elem.removeAttribute(config.srcAttr);
} else if(sizes != 'auto') {
detail = {
width: parseInt(sizes, 10)
};
polyfill({
target: elem,
detail: detail
});
}
}
}, true);
// partial polyfill
var polyfill = (function(){
var ascendingSort = function( a, b ) {
return a.w - b.w;
};
var reduceCandidate = function (srces) {
var lowerCandidate, bonusFactor;
var len = srces.length;
var candidate = srces[len -1];
var i = 0;
for(i; i < len;i++){
candidate = srces[i];
candidate.d = candidate.w / srces.w;
if(candidate.d >= srces.d){
if(!candidate.cached && (lowerCandidate = srces[i - 1]) &&
lowerCandidate.d > srces.d - (0.13 * Math.pow(srces.d, 2.2))){
bonusFactor = Math.pow(lowerCandidate.d - 0.6, 1.6);
if(lowerCandidate.cached) {
lowerCandidate.d += 0.15 * bonusFactor;
}
if(lowerCandidate.d + ((candidate.d - srces.d) * bonusFactor) > srces.d){
candidate = lowerCandidate;
}
}
break;
}
}
return candidate;
};
var getWSet = function(elem, testPicture){
var src;
if(!elem._lazyrias && lazySizes.pWS && (src = lazySizes.pWS(elem.getAttribute(config.srcsetAttr || ''))).length){
Object.defineProperty(elem, '_lazyrias', {
value: src,
writable: true
});
if(testPicture && elem.parentNode){
src.isPicture = elem.parentNode.nodeName.toUpperCase() == 'PICTURE';
}
}
return elem._lazyrias;
};
var getX = function(elem){
var dpr = window.devicePixelRatio || 1;
var optimum = lazySizes.getX && lazySizes.getX(elem);
return Math.min(optimum || dpr, 2.4, dpr);
};
var getCandidate = function(elem, width){
var sources, i, len, media, srces, src;
srces = elem._lazyrias;
if(srces.isPicture && window.matchMedia){
for(i = 0, sources = elem.parentNode.getElementsByTagName('source'), len = sources.length; i < len; i++){
if(getWSet(sources[i]) && !sources[i].getAttribute('type') && ( !(media = sources[i].getAttribute('media')) || ((matchMedia(media) || {}).matches))){
srces = sources[i]._lazyrias;
break;
}
}
}
if(!srces.w || srces.w < width){
srces.w = width;
srces.d = getX(elem);
src = reduceCandidate(srces.sort(ascendingSort));
}
return src;
};
var polyfill = function(e){
if(e.detail.instance != lazySizes){return;}
var candidate;
var elem = e.target;
if(!buggySizes && (window.respimage || window.picturefill || lazySizesCfg.pf)){
document.removeEventListener('lazybeforesizes', polyfill);
return;
}
if(!('_lazyrias' in elem) && (!e.detail.dataAttr || !getWSet(elem, true))){
return;
}
candidate = getCandidate(elem, e.detail.width);
if(candidate && candidate.u && elem._lazyrias.cur != candidate.u){
elem._lazyrias.cur = candidate.u;
candidate.cached = true;
lazySizes.rAF(function(){
elem.setAttribute(config.srcAttr, candidate.u);
elem.setAttribute('src', candidate.u);
});
}
};
if(!supportPicture){
addEventListener('lazybeforesizes', polyfill);
} else {
polyfill = function(){};
}
return polyfill;
})();
}));
================================================
FILE: plugins/static-gecko-picture/ls.static-gecko-picture.js
================================================
/**
* FF's first picture implementation is static and does not react to viewport changes, this tiny script fixes this.
*/
(function(window, factory) {
var globalInstall = function(){
factory(window.lazySizes);
window.removeEventListener('lazyunveilread', globalInstall, true);
};
factory = factory.bind(null, window, window.document);
if(typeof module == 'object' && module.exports){
factory(require('lazysizes'));
} else if (typeof define == 'function' && define.amd) {
define(['lazysizes'], factory);
} else if(window.lazySizes) {
globalInstall();
} else {
window.addEventListener('lazyunveilread', globalInstall, true);
}
}(window, function(window, document, lazySizes) {
/*jshint eqnull:true */
var match;
var ua = navigator.userAgent;
if ( window.HTMLPictureElement && ((/ecko/).test(ua) && (match = ua.match(/rv\:(\d+)/)) && match[1] < 41) ) {
addEventListener("resize", (function() {
var timer;
var dummySrc = document.createElement("source");
var fixRespimg = function(img) {
var source, sizes;
var picture = img.parentNode;
if (picture.nodeName.toUpperCase() === "PICTURE") {
source = dummySrc.cloneNode();
picture.insertBefore(source, picture.firstElementChild);
setTimeout(function() {
picture.removeChild(source);
});
} else if (!img._pfLastSize || img.offsetWidth > img._pfLastSize) {
img._pfLastSize = img.offsetWidth;
sizes = img.sizes;
img.sizes += ",100vw";
setTimeout(function() {
img.sizes = sizes;
});
}
};
var findPictureImgs = function() {
var i;
var imgs = document.querySelectorAll("picture > img, img[srcset][sizes]");
for (i = 0; i < imgs.length; i++) {
fixRespimg(imgs[i]);
}
};
var onResize = function() {
clearTimeout(timer);
timer = setTimeout(findPictureImgs, 99);
};
var mq = window.matchMedia && matchMedia("(orientation: landscape)");
var init = function() {
onResize();
if (mq && mq.addListener) {
mq.addListener(onResize);
}
};
dummySrc.srcset = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
if (/^[c|i]|d$/.test(document.readyState || "")) {
init();
} else {
document.addEventListener("DOMContentLoaded", init);
}
return onResize;
})());
}
}));
================================================
FILE: plugins/twitter/ls.twitter.js
================================================
(function(window, factory) {
if(!window) {return;}
var globalInstall = function(){
factory(window.lazySizes);
window.removeEventListener('lazyunveilread', globalInstall, true);
};
factory = factory.bind(null, window, window.document);
if(typeof module == 'object' && module.exports){
factory(require('lazysizes'));
} else if (typeof define == 'function' && define.amd) {
define(['lazysizes'], factory);
} else if(window.lazySizes) {
globalInstall();
} else {
window.addEventListener('lazyunveilread', globalInstall, true);
}
}(typeof window != 'undefined' ?
window : 0, function(window, document, lazySizes) {
/*
@example
<script src="../lazysizes.js"></script>
<script src="../plugins/rias/ls.rias.js"></script>
<img
src="http://placehold.it/100"
data-src="http://placehold.it/{width}"
data-sizes="auto"
class="lazyload"
alt="" />
In addition, you can set the ascpect ratio of the image from CSS. You only need to set the custom CSS variable --ls-aspectratio on the img and add a {height} placeholder
<style>
img.rectangle {
--ls-aspectratio: 2;
}
<style/>
<img
src="http://placehold.it/200x100"
data-src="http://placehold.it/{width}x{height}"
data-sizes="auto"
class="lazyload rectangle"
alt="" />
Note that you can also set the aspect ratio via a data-aspectratio value on the img tag.
picture elementA responsive image service can be also combined with the art direction approach using the HTML5 picture element:
<picture>
<!--[if IE 9]><audio><![endif]-->
<source
data-src="http://placehold.it/{width}/1111ee/fff"
media="(max-width: 500px)" />
<source
data-src="http://placehold.it/{width}/e8117f/fff"
media="(max-width: 1090px)" />
<source
data-src="http://placehold.it/{width}/7D26CD/fff"
media="(min-width: 1224px)" />
<!--[if IE 9]></audio><![endif]-->
<img
src="http://placehold.it/100"
data-src="http://placehold.it/{width}"
data-sizes="auto"
class="lazyload"
alt="" />
</picture>
optimumxAll options can be controlled globally through the lazySizesConfig.rias object or by using data-* attributes.
The rias extension can also be combined with the optimumx extension. The optimumx feature helps you to constrain the maximum pixel density for an image.
<img
data-src="image?width={width}&quality={quality}"
data-quality="75"
data-optimumx="1.5"
class="lazyload"
alt="" />
picture elementA responsive image service can be also combined with the art direction approach using the HTML5 picture element.
In this case, we simply use the cropping service