![](\"responsive-image1.jpg)
\n```\n#### ![](\"lqip-src.jpg\")
\n\t![](\"image.jpg\")
\n\n```\n\nThe LQIP technique can be enhanced by combining it with CSS transitions/animation to sharpen/unblur or overfade the LQIP image.\n\nPlease also have a look at our [lazysizes Blur Up plugin](https://jsfiddle.net/trixta/v0oq0412/embedded/result/) (recommended).\n\n```html\n\n\n\n\n\n\n\n\n\n\t\n\n```\n\nNote: As an alternative to the noscript pattern also checkout the [noscript extension](plugins/noscript).\n\n### [data-expand] attribute\nNormally 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.\n\nAdditionally, 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!).\n\nThis becomes especially handy to add unveiling effects for teasers or other elements:\n\n\n```html\n\n\n\n```\n\n### CSS API\nlazysizes 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:\n\n```css\n/* fade image in after load */\n.lazyload,\n.lazyloading {\n\topacity: 0;\n}\n.lazyloaded {\n\topacity: 1;\n\ttransition: opacity 300ms;\n}\n```\n\n```css\n/* fade image in while loading and show a spinner as background image (good for progressive images) */\n\n.lazyload {\n\topacity: 0;\n}\n\n.lazyloading {\n\topacity: 1;\n\ttransition: opacity 300ms;\n\tbackground: #f7f7f7 url(loader.gif) no-repeat center;\n}\n```\n\n### Broken image symbol\n\nIn case you are using an `alt` attribute but do not declare a `src`/`srcset` attribute you will end up with a broken image symbol.\n\nThere are two easy ways to deal with it.\n\nEither define a `src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"` or add the following CSS.\n\n```css\nimg.lazyload:not([src]) {\n\tvisibility: hidden;\n}\n```\n\n\n### JS API\n**lazysizes** automatically detects new elements with the class ``lazyload`` so you won't need to call or configure anything in most situations.\n\n#### JS API - options\n\nOptions can be set by declaring a global configuration option object named ``lazySizesConfig``. This object must be defined before the lazysizes script. A basic example:\n\n```js\nwindow.lazySizesConfig = window.lazySizesConfig || {};\n\n// use .lazy instead of .lazyload\nwindow.lazySizesConfig.lazyClass = 'lazy';\n\n// use data-original instead of data-src\nlazySizesConfig.srcAttr = 'data-original';\n\n//page is optimized for fast onload event\nlazySizesConfig.loadMode = 1;\n```\n\nIn case you are using a module bundler it is recommended to change the options directly after importing the `lazysizes` module:\n\n```js\nimport lazySizes from 'lazysizes';\n// other imports ...\n\nlazySizes.cfg.lazyClass = 'lazy';\n```\n\nHere the list of options:\n\n* ``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');``)\n* ``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.)\n* ``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');``).\n* ``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.\n* ``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.\n* ``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.\n* ``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``.\n* ``lazySizesConfig.srcAttr`` (default: ``\"data-src\"``): The attribute, which should be transformed to ``src``.\n* ``lazySizesConfig.srcsetAttr`` (default: ``\"data-srcset\"``): The attribute, which should be transformed to ``srcset``.\n* ``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.\n* ``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)).\n* ``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`.\n* ``lazySizesConfig.ricTimeout`` (default: ``0``): The timeout option used for the `requestIdleCallback`. Reasonable values between: 0, 100 - 1000. (Values below 50 disable the `requestIdleCallback` feature.)\n* ``lazySizesConfig.throttleDelay`` (default: ``125``): The timeout option used to throttle all listeners. Reasonable values between: 66 - 200.\n```html\n\n\n\nlazySizes 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.
\n\t\tSimply 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.
\n<img\n\talt=\"100%x200\"\n\tsrc=\"low-quality.jpg\"\n\tdata-src=\"normal-quality.jpg\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
The normal image pattern is can be used for non-critical images or in case there is no low quality image available:
\n<img class=\"lazyload\" data-src=\"image.jpg\" alt=\"Desert Road\" />\n\n\t\t\t\t\t
Simply use data-srcset and data-sizes and you can support responsive images.
<img\n\talt=\"\"\n\tsrc=\"small.jpg\"\n\tsizes=\"(min-width: 1000px) 930px, 90vw\"\n\tdata-srcset=\"small.jpg 500w,\n\t\tmedium.jpg 640w,\n\t\tbig.jpg 1024w\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
![\"Boat\"\n\t\t\t\t\t\t\t](\"https://farm5.staticflickr.com/4094/4859138371_9713d4396e_b.jpg\"\n\t\t\t\t\t\t\t)
\n\n\t\t\t\t\t![\"Desert](\"https://farm6.staticflickr.com/5531/9638435181_7e3e44c2b8_b.jpg\")
\n\t\t\t\t\tpicture 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>\n\t<!--[if IE 9]><video style=\"display: none\"><![endif]-->\n\t<source\n\t\tdata-srcset=\"500.jpg\"\n\t\tmedia=\"(max-width: 500px)\" />\n\t<source\n\t\t\tdata-srcset=\"1024.jpg\"\n\t\t\tmedia=\"(max-width: 1024px)\" />\n\t<source\n\t\t\tdata-srcset=\"1200.jpg\" />\n<!--[if IE 9]></video><![endif]-->\n<img\n\t\tsrc=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"\n\t\tclass=\"lazyload\"\n\t\talt=\"image with artdirection\" />\n</picture>\n\n\t\t\t\t\t
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\n\talt=\"\"\n\tdata-sizes=\"auto\"\n\tsrc=\"small.jpg\"\n\tdata-srcset=\"small.jpg 500w,\n\t\tmedium.jpg 640w,\n\t\tbig.jpg 1024w\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
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.
\n\t\t\tIframes can be loaded too:
\n<iframe data-src=\"//www.youtube.com/embed/ZfV-aYdU4uE\" class=\"lazyload\" frameborder=\"0\" allowfullscreen></iframe>\n\n\t\t\t\t\t
Nulla vitae elit libero, a pharetra augue mollis interdum.
\n\t\t\t\t\t\t\t\tPraesent commodo cursus magna, vel scelerisque nisl consectetur.
\n\t\t\t\t\t\t\t\tLazySizes 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\">\n\t<!-- widget content -->\n<div>\n\n\t\t\t\t\t
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.
\n\t\t\t\tLazySizes 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.
\n\t\tSimply 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.
\n<img\n\talt=\"bird\"\n\tsrc=\"low-quality.jpg\"\n\tdata-src=\"normal-quality.jpg\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
Of course the low quality image can be simply omitted to save more image data.
\n<img class=\"lazyload\" data-src=\"image.jpg\" alt=\"Mountain\" />\n\n\t\t\t\t\t
Simply use data-srcset and you can support responsive images.
<img\n\talt=\"Jellyfish\"\n\tsizes=\"(min-width: 1000px) 930px, 90vw\"\n\tdata-srcset=\"small.jpg 500w,\n\t\tmedium.jpg 640w,\n\t\tbig.jpg 1024w\"\n\tdata-src=\"medium.jpg\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
![\"100%x200\"\n\t\t\t\t\t\t\t\t\t\t](\"https://farm1.staticflickr.com/113/284651694_69e63b374d_m.jpg)
\n\t\t\t\t\t\t\t\t![\"100%x200\"\n\t\t\t\t\t\t\t\t\t\t](\"https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg)
\n\t\t\t\t\t\t\t\t![\"Mountain\"](\"https://images.unsplash.com/photo-1544198365-f5d60b6d8190?ixlib=rb-1.2.1&auto=format&fit=crop&w=1130&q=80\")
\n\t\t\t\t\tpicture 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>\n\t<!--[if IE 9]><video style=\"display: none\"><![endif]-->\n\t<source\n\t\tdata-srcset=\"240.jpg 240w,\n\t\t\t320.jpg 320w,\n\t\t\t500.jpg 500w\"\n\t\tmedia=\"(max-width: 550px)\" />\n\t<source\n\t\t\tdata-srcset=\"640.jpg 640w,\n\t\t\t\t990.jpg 990w,\n\t\t\t\t1024.jpg 1024w\"\n\t\t\tmedia=\"(max-width: 1024px)\" />\n\t<source\n\t\t\tdata-srcset=\"1200.jpg 1200w\" />\n<!--[if IE 9]></video><![endif]-->\n<img\n\t\tsrc=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"\n\t\tdata-src=\"1024.jpg\"\n\t\tclass=\"lazyload\"\n\t\talt=\"image with artdirection\" />\n</picture>\n\n\t\t\t\t\t
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\n\talt=\"house by the lake\"\n\tdata-sizes=\"auto\"\n\tdata-srcset=\"small.jpg 500w,\n\t\tmedium.jpg 640w,\n\t\tbig.jpg 1024w\"\n\tdata-src=\"medium\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
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.
\n\t\t\tIframes can be loaded too:
\n<iframe data-src=\"//www.youtube.com/embed/ZfV-aYdU4uE\" class=\"lazyload\" frameborder=\"0\" allowfullscreen></iframe>\n\n\t\t\t\t\t
[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.
\n\n<style>\n.teaser.lazyload {\n\topacity: 0;\n\ttransform: scale(0.8);\n}\n\n.teaser.lazyloaded {\n\topacity: 1;\n\ttransform: scale(1);\n\ttransition: all 700ms;\n}\n</style>\n\n<script>\n\nwindow.lazySizesConfig = {\n\taddClasses: true\n};\n</script>\n\n<div class=\"teaser lazyload\" data-expand=\"-110\">\n\t<img data-src=\"image.jpg\" class=\"lazyload\" />\n\t<h1>Teaser Title</h1>\n\t<p>...</p>\n</div>\n\n\t\t\t\t![\"100%x200\"](\"https://i.picsum.photos/id/1031/300/225.jpg\"\n\t\t\t\t\t\t\t\t\t\t)
\n\t\t\t\t\t\t\t\tNulla vitae elit libero, a pharetra augue mollis interdum.
\n\t\t\t\t\t\t\t\t![\"100%x200\"\n\t\t\t\t\t\t\t\t\t\t](\"https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg\"\n\t\t\t\t\t\t\t\t\t\t)
\n\t\t\t\t\t\t\t\tPraesent commodo cursus magna, vel scelerisque nisl consectetur.
\n\t\t\t\t\t\t\t\tLazySizes 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\">\n\t<!-- widget content -->\n<div>\n\n\t\t\t\t\t
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.
\n\t\t\t\tLazySizes 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.
\n\t\tSimply 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.
\n<img\n\talt=\"100%x200\"\n\tsrc=\"low-quality.jpg\"\n\tdata-src=\"normal-quality.jpg\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
The normal image pattern can be used for non-critical/below the fold images or in case there is no low quality image available:
\n<img class=\"lazyload\" data-src=\"image.jpg\" alt=\"Desert Road\" />\n\n\t\t\t\t\t
Simply use data-srcset and data-sizes and you can support responsive images.
<img\n\talt=\"\"\n\tsrc=\"small.jpg\"\n\tsizes=\"(min-width: 1000px) 930px, 90vw\"\n\tdata-srcset=\"small.jpg 500w,\n\t\tmedium.jpg 640w,\n\t\tbig.jpg 1024w\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
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>\n\t<!--[if IE 9]><video style=\"display: none\"><![endif]-->\n\t<source\n\t\tdata-srcset=\"500.jpg\"\n\t\tmedia=\"(max-width: 500px)\" />\n\t<source\n\t\t\tdata-srcset=\"1024.jpg\"\n\t\t\tmedia=\"(max-width: 1024px)\" />\n\t<source\n\t\t\tdata-srcset=\"1200.jpg\" />\n<!--[if IE 9]></video><![endif]-->\n<img\n\t\tsrc=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"\n\t\tclass=\"lazyload\"\n\t\tdata-src=\"1024.jpg\"\n\t\talt=\"image with artdirection\" />\n</picture>\n\n\t\t\t\t\t
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\n\talt=\"\"\n\tdata-sizes=\"auto\"\n\tdata-src=\"medium.jpg\"\n\tdata-srcset=\"small.jpg 500w,\n\t\tmedium.jpg 640w,\n\t\tbig.jpg 1024w\"\n\tclass=\"lazyload\" />\n\n\t\t\t\t\t
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.
\n\t\t\tIframes can be loaded too:
\n<iframe data-src=\"//www.youtube.com/embed/ZfV-aYdU4uE\" class=\"lazyload\" frameborder=\"0\" allowfullscreen></iframe>\n\n\t\t\t\t\t
[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.
\n\n<style>\n.teaser.lazyload {\n\topacity: 0;\n\ttransform: scale(0.8);\n}\n\n.teaser.lazyloaded {\n\topacity: 1;\n\ttransform: scale(1);\n\ttransition: all 700ms;\n}\n</style>\n\n<script>\n\nwindow.lazySizesConfig = {\n\taddClasses: true\n};\n</script>\n\n<div class=\"teaser lazyload\" data-expand=\"-80\">\n\t<img data-src=\"image.jpg\" class=\"lazyload\" />\n\t<h1>Teaser Title</h1>\n\t<p>...</p>\n</div>\n\n\t\t\t\tNulla vitae elit libero, a pharetra augue mollis interdum.
\n\t\t\t\t\t\t\t\tPraesent commodo cursus magna, vel scelerisque nisl consectetur.
\n\t\t\t\t\t\t\t\tLazySizes 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\">\n\t<!-- widget content -->\n<div>\n\n\t\t\t\t\t
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.
\n\t\t\t\tLazySizes 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:
\n\tnumber in green is the image selected. While number in gray is the next lower and number in red is the next higher candidate.
\n\tThe 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.
\nwith data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
|---|---|
| \n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\n\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
with data-optimumx | \n\t\t\twithout data-optimumx | \n\t\t
| \n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t\t\n\t\t\t\t \n\t\t\t\t\t \n\t\t\t | \n\t\t
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.
\n\t\tDue to the fact, that a 2x retina means 4x data and 3x retina means 9x data, performance can suffer even on good connections badly.
\n\t\tlazySizes 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!
\n\t![\"100%x200\"\n\t\t\t\t\t\t\t\t\t\t](\"https://farm1.staticflickr.com/113/284651694_69e63b374d.jpg\"\n\t\t\t\t\t\t\t\t\t\t)
\n\t\t\t\t\t\t\t\t![\"100%x200\"\n\t\t\t\t\t\t\t\t\t\t](\"https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg\"\n\t\t\t\t\t\t\t\t\t\t)
\n\t\t\t\t\t\t\t\tdata-optimumx attributeany kind of content you want to be unveiled
\n \n\n\n\t \n\t Tweets by @TwitterDev\n\t \n\t */\n\t'use strict';\n\tvar scriptadded;\n\n\tfunction loadExecuteTwitter(){\n\t\tif(window.twttr && twttr.widgets){\n\t\t\ttwttr.widgets.load();\n\t\t\treturn;\n\t\t}\n\n\t\tif(scriptadded){\n\t\t\treturn;\n\t\t}\n\n\t\tvar elem = document.createElement('script');\n\t\tvar insertElem = document.getElementsByTagName('script')[0];\n\n\t\telem.src = '//platform.twitter.com/widgets.js';\n\n\t\tscriptadded = true;\n\t\tinsertElem.parentNode.insertBefore(elem, insertElem);\n\t}\n\n\tdocument.addEventListener('lazybeforeunveil', function(e){\n\t\tif(e.detail.instance != lazySizes){return;}\n\n\t\tvar twttrWidget = e.target.getAttribute('data-twitter');\n\n\t\tif(twttrWidget){\n\t\t\tlazySizes.aC(e.target, twttrWidget);\n\t\t\tloadExecuteTwitter();\n\t\t}\n\t});\n\n}));\n" }, { "path": "plugins/unload/README.md", "content": "# lazysizes unload\n\nUnloads ``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.\n\n## Usage\n\nSimply add the lazysizes unload extension to your site.\n\n## Options\n\n* ``lazySizesConfig.unloadClass`` (default: ``\"lazyunload\"``): Elements with this class will be unloaded even if they only consume less memory/pixels than defined in ``unloadPixelThreshold``.\n* ``lazySizesConfig.unloadedClass`` (default: ``\"lazyunloaded\"``): If an element was unloaded it becomes the class ``lazyunloaded``.\n* ``lazySizesConfig.unloadPixelThreshold`` (default: Number is dynamically calculated): If the amount of image pixels exceeds this threshold this image will be unloaded.\n* ``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.\n* ``lazySizesConfig.emptySrc`` (default: transparent data uri): The src to be used as unload image.\n* ``lazySizesConfig.unloadHidden`` (default: ``true``): Whether hidden images (``display: none;``) also should be unloaded.\n\n**Note**: In case you dynamically change the ``data-src``/``data-srcset`` of an already unloaded element, you have to remove the ``lazyunloaded`` class.\n\n## Events\n\n* ``lazyafterunload``: This event will be fired on the unloaded lazyload elements. This event can be used to extend the unload functionality.\n```js\n//div ajax example which returns DOM string:\ndocument.addEventListener('lazybeforeunveil', function (e) {\n var containerId = e.target.getAttribute('data-id');\n \n //load ajax content with containerId\n //append content to e.target.innerHTML\n});\n\n//clean DOM nodes inside container that where previously loaded by ajax:\n//lazyafterunload gives possibility to take care of the cleanup in this case\ndocument.addEventListener('lazyafterunload', function (e) {\n var container = e.target;\n \n while (container.firstElementChild) {\n container.removeChild(container.firstElementChild);\n }\n});\n```\n" }, { "path": "plugins/unload/ls.unload.js", "content": "(function(window, factory) {\n\tvar globalInstall = function(){\n\t\tfactory(window.lazySizes);\n\t\twindow.removeEventListener('lazyunveilread', globalInstall, true);\n\t};\n\n\tfactory = factory.bind(null, window, window.document);\n\n\tif(typeof module == 'object' && module.exports){\n\t\tfactory(require('lazysizes'));\n\t} else if (typeof define == 'function' && define.amd) {\n\t\tdefine(['lazysizes'], factory);\n\t} else if(window.lazySizes) {\n\t\tglobalInstall();\n\t} else {\n\t\twindow.addEventListener('lazyunveilread', globalInstall, true);\n\t}\n}(window, function(window, document, lazySizes) {\n\t'use strict';\n\tif(!document.addEventListener){return;}\n\tvar config, checkElements;\n\n\tvar lazySizesCfg = lazySizes.cfg;\n\tvar unloadElements = [];\n\tvar requestAnimationFrame = window.requestAnimationFrame || setTimeout;\n\tvar unloader = {\n\t\tcheckElements: function(){\n\t\t\tvar i, len, box;\n\n\t\t\tvar expand = (lazySizes._defEx + 99) * 1.1;\n\t\t\tvar vTop = expand * -1;\n\t\t\tvar vLeft = vTop;\n\t\t\tvar vBottom = innerHeight + expand;\n\t\t\tvar vRight = innerWidth + expand;\n\n\t\t\tfor(i = 0, len = checkElements.length; i < len; i++){\n\t\t\t\tbox = checkElements[i].getBoundingClientRect();\n\n\t\t\t\tif((box.top > vBottom || box.bottom < vTop || box.left > vRight || box.right < vLeft) ||\n\t\t\t\t\t(config.unloadHidden && !box.top && !box.bottom && !box.left && !box.right)){\n\t\t\t\t\tunloadElements.push(checkElements[i]);\n\t\t\t\t}\n\t\t\t}\n\t\t\trequestAnimationFrame(unloader.unloadElements);\n\t\t},\n\t\tunload: function(element){\n\t\t\tvar sources, isResponsive, i, len;\n\t\t\tvar picture = element.parentNode;\n\t\t\tlazySizes.rC(element, config.loadedClass);\n\n\t\t\tif(element.getAttribute(config.srcsetAttr)){\n\t\t\t\telement.setAttribute('srcset', config.emptySrc);\n\t\t\t\tisResponsive = true;\n\t\t\t}\n\n\t\t\tif(picture && picture.nodeName.toUpperCase() == 'PICTURE'){\n\t\t\t\tsources = picture.getElementsByTagName('source');\n\n\t\t\t\tfor(i = 0, len = sources.length; i < len; i++){\n\t\t\t\t\tsources[i].setAttribute('srcset', config.emptySrc);\n\t\t\t\t}\n\n\t\t\t\tisResponsive = true;\n\t\t\t}\n\n\t\t\tif(lazySizes.hC(element, config.autosizesClass)){\n\t\t\t\tlazySizes.rC(element, config.autosizesClass);\n\t\t\t\telement.setAttribute(config.sizesAttr, 'auto');\n\t\t\t}\n\n\t\t\tif(isResponsive || element.getAttribute(config.srcAttr)){\n\t\t\t\telement.src = config.emptySrc;\n\t\t\t}\n\n\t\t\tlazySizes.aC(element, config.unloadedClass);\n\t\t\tlazySizes.aC(element, config.lazyClass);\n\t\t\tlazySizes.fire(element, 'lazyafterunload');\n\t\t},\n\t\tunloadElements: function(elements){\n\t\t\telements = Array.isArray(elements) ? elements : unloadElements;\n\n\t\t\twhile(elements.length){\n\t\t\t\tunloader.unload(elements.shift());\n\t\t\t}\n\t\t},\n\t\t_reload: function(e) {\n\t\t\tif(lazySizes.hC(e.target, config.unloadedClass) && e.detail){\n\t\t\t\te.detail.reloaded = true;\n\t\t\t\tlazySizes.rC(e.target, config.unloadedClass);\n\t\t\t}\n\t\t}\n\t};\n\n\tfunction init(){\n\t\tif(!window.lazySizes || checkElements){return;}\n\t\tvar docElem = document.documentElement;\n\t\tvar throttleRun = (function(){\n\t\t\tvar running;\n\t\t\tvar run = function(){\n\t\t\t\tunloader.checkElements();\n\t\t\t\trunning = false;\n\t\t\t};\n\t\t\treturn function(){\n\t\t\t\tif(!running){\n\t\t\t\t\trunning = true;\n\t\t\t\t\tsetTimeout(run, 999);\n\t\t\t\t}\n\t\t\t};\n\t\t})();\n\n\t\tconfig = lazySizes.cfg;\n\t\tremoveEventListener('lazybeforeunveil', init);\n\n\t\tif(!('unloadClass' in config)){\n\t\t\tconfig.unloadClass = 'lazyunload';\n\t\t}\n\n\t\tif(!('unloadedClass' in config)){\n\t\t\tconfig.unloadedClass = 'lazyunloaded';\n\t\t}\n\n\t\tif(!('unloadHidden' in config)){\n\t\t\tconfig.unloadHidden = true;\n\t\t}\n\n\t\tif(!('emptySrc' in config)){\n\t\t\tconfig.emptySrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n\t\t}\n\n\t\tif(!('autoUnload' in config)){\n\t\t\tconfig.autoUnload = true;\n\t\t}\n\n\t\tif(!('unloadPixelThreshold' in config)){\n\t\t\tconfig.unloadPixelThreshold = 60000;\n\t\t}\n\n\t\tif(config.autoUnload){\n\t\t\tdocElem.addEventListener('load', function(e){\n\t\t\t\tif(e.target.naturalWidth * e.target.naturalHeight > config.unloadPixelThreshold && e.target.className &&\n\t\t\t\t\te.target.className.indexOf && e.target.className.indexOf(lazySizesCfg.loadingClass) != -1 &&\n\t\t\t\t\te.target.className.indexOf(lazySizesCfg.preloadClass) == -1){\n\t\t\t\t\tlazySizes.aC(e.target, lazySizesCfg.unloadClass);\n\t\t\t\t}\n\t\t\t}, true);\n\t\t}\n\n\t\tlazySizes.unloader = unloader;\n\n\t\tcheckElements = document.getElementsByClassName([config.unloadClass, config.loadedClass].join(' '));\n\n\t\tsetInterval(throttleRun, 9999);\n\t\taddEventListener('lazybeforeunveil', throttleRun);\n\t\taddEventListener('lazybeforeunveil', unloader._reload, true);\n\t}\n\n\taddEventListener('lazybeforeunveil', init);\n}));\n" }, { "path": "plugins/unveilhooks/README.md", "content": "# lazysizes unveilhooks extension\n\nThe unveilhooks plugin extends lazySizes to also unveil / lazyload scripts/widgets, background images, styles and video/audio elements:\n\n```html\n\nNothing 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.
\n\t\tFor a short but full API description go to the readme.md.
\n\tInclude 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
\n<script src=\"../lazysizes.js\"></script>\n<script src=\"../plugins/rias/ls.rias.js\"></script>\n\n<img\n\tsrc=\"http://placehold.it/100\"\n\tdata-src=\"http://placehold.it/{width}\"\n\tdata-sizes=\"auto\"\n\tclass=\"lazyload\"\n\talt=\"\" />\n\n\t\t\tIn 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
\n<style>\n\t\timg.rectangle {\n\t\t\t--ls-aspectratio: 2;\n\t\t}\n<style/>\n\n<img\n\tsrc=\"http://placehold.it/200x100\"\n\tdata-src=\"http://placehold.it/{width}x{height}\"\n\tdata-sizes=\"auto\"\n\tclass=\"lazyload rectangle\"\n\talt=\"\" />\n\n\t\t\t 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>\n<!--[if IE 9]><audio><![endif]-->\n<source\n\t\tdata-src=\"http://placehold.it/{width}/1111ee/fff\"\n\t\tmedia=\"(max-width: 500px)\" />\n\t<source\n\t\t\tdata-src=\"http://placehold.it/{width}/e8117f/fff\"\n\t\t\tmedia=\"(max-width: 1090px)\" />\n\t<source\n\t\t\tdata-src=\"http://placehold.it/{width}/7D26CD/fff\"\n\t\t\tmedia=\"(min-width: 1224px)\" />\n\n<!--[if IE 9]></audio><![endif]-->\n<img\n\t\tsrc=\"http://placehold.it/100\"\n\t\tdata-src=\"http://placehold.it/{width}\"\n\t\tdata-sizes=\"auto\"\n\t\tclass=\"lazyload\"\n\t\talt=\"\" />\n</picture>\n\n\t\t\toptimumxAll 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\n\tdata-src=\"image?width={width}&quality={quality}\"\n\tdata-quality=\"75\"\n\tdata-optimumx=\"1.5\"\n\tclass=\"lazyload\"\n\talt=\"\" />\n\n\t\t\tpicture 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
\n\t\t\t\t\t