High Performance And SEO Friendly Lazy Loader For Images | lazysizes

lazysizes is a fast (spam-free), SEO-friendly, self-configuring lazy download tool for images (including responsive image / srcset), iframes, scripts / UI elements, and much more. It also prioritizes resources by differentiating between critical and close elements to make the perceived performance faster.

It might also become your first tool for merging responsive images. It can automatically calculate attribute sizes for your responsive images, and allow you to share media queries for your media themes with your CSS, which helps separate formatting (CSS) from content/structure (HTML) and makes incorporating responsive images into any environment really simple. It also includes a set of optional plug-ins to extend its functionality even further.

How to make use of it:

1. Load the lazysizes.min.js script in your doc.

<script src="lazysizes.min.js" async></script>

2. Load the lazysizes’ plugins if wanted.

// Allows you to fully control art direction through your CSS.
// This is accomplished by two techniques which you can be used separately or combined.
// The extension hooks into the data-sizes="auto" feature.
<script src="plugins/ls.artdirect.min.js"></script>

// Helps pre-occupy the space needed for an image by calculating the height from the image width or the width from the height.
// This means the width or height has to be calculable before the image is loaded
// This can serve as an alternative to the different CSS intrinsic ratio patterns.
<script src="plugins/ls.aspectratio.min.js"></script>

// Allows you to change the default data attributes.
// It automatically detects changes to your data-* attributes and adds the class for you.
<script src="plugins/ls.attrchange.min.js"></script>

// Allows you to define multiple background images with a width descriptor
// Similar to how img[srcset] works as also art directed images using media queries, similar to how picture works.
// The extension will then load the best image size for the current viewport and device.
// In case the browser does not support responsive images natively either picturefill or the respimg polyfill plugin has to be used.
<script src="plugins/ls.bgset.min.js"></script>

// Lazyload the low quality placeholder and enables you to create a blur up/fade over effect
<script src="plugins/ls.blur-up.min.js"></script>

// Allows you to automatically sync and manage your breakpoints between your CSS
// and the media attributes of your "picture > source" elements using the customMedia option of lazySizes.
<script src="plugins/ls.custommedia.min.js.js"></script>

// Fixes the missing h descriptor parsing in MS Edge by removing
// the h from all candidates of source and img elements and storing
// the physical aspect ratio of the candidates into a data-aspectratio attribute.
<script src="plugins/ls.fix-edge-h-descriptor.min.js"></script>

// Includes HTML content
<script src="plugins/ls.include.min.js"></script>

// Automatically transforms img.lazyload/iframe.lazyload elements in browsers that support native lazy loading
<script src="plugins/ls.native-loading.min.js"></script>

// Allows you to transform any HTML inside a noscript element as soon as it becomes visible.
<script src="plugins/ls.noscript.min.js"></script>

// Polyfills object-fit: cover and contain properties as also the object-position in non supporting browser.
<script src="plugins/ls.object-fit.min.js"></script>

// Helps you to limit/constrain the maximum resolution in case the w descriptor is used.
// Simply add the attribute data-optimumx="1.6" to constrain the max resolution to 1.6
<script src="plugins/ls.optimumx.min.js"></script>

// Extends the data-sizes="auto" feature to also calculate the right sizes for
// object-fit: contain|cover image elements as also height ( and width) constrained image elements in general.
<script src="plugins/ls.parent-fit.min.js"></script>

// Automatically unveils all element as soon as a print is detected even if the given lazyload image isn't in the viewport.
<script src="plugins/ls.print.min.js"></script>

// Optimizes perceived performance by adding better support for
// rendering progressive JPGs/PNGs in conjunction with the LQIP pattern.
<script src="plugins/ls.progressive.min.js"></script>

// Polyfill for responsive image
<script src="plugins/ls.respimg.min.js"></script>

// 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
// (ReSrc, Pixtulate, mobify, WURFL's Image Tailor ...)
// or self hosted restful responsive image services (responsive image on demand).
<script src="plugins/ls.rias.min.js"></script>

// Fixes Firefox issue
<script src="plugins/ls.static-gecko-picture.min.js"></script>

// 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.
<script src="plugins/ls.unload.min.js"></script>

// Extends lazySizes to also unveil / lazyload scripts/widgets, background images, styles and video/audio elements
<script src="plugins/ls.unveilhooks.min.js"></script>

3. Insert a low high-quality picture with the important CSS class ‘lazyload’ into your doc.

<img src="low-quality-src.jpg" data-src="normal-quality-src.jpg" class="lazyload">

4. Integration with the respimage.js plugin.

    data-srcset="image1.jpg 100w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload">

5. All attainable choices.


  // default classes and attributes
  lazyClass: 'lazyload',
  loadedClass: 'lazyloaded',
  loadingClass: 'lazyloading',
  preloadClass: 'lazypreload',
  errorClass: 'lazyerror',
  autosizesClass: 'lazyautosizes',
  fastLoadedClass: 'ls-is-cached',
  srcAttr: 'data-src',
  srcsetAttr: 'data-srcset',
  sizesAttr: 'data-sizes',

  // The iframeLoadMode can be used to determine how iframes are lazyloaded. 
  // Possible values are 0 = Use location.replace()
  // 1 = Change src attribute. 
  // 0 is recommended for most users unless external dependencies require the presence of a src attribute (e.g. native video tracking in Google Tag Manager/Analytics).
  iframeLoadMode: 0,
  // if the image size is below 40
  // lazysizes traverses up the DOM tree until it finds a parent which is over 40 and uses this number
  minSize: 40,

  // an alias map for different media queries
  customMedia: {},

  // auto init on page load
  init: true,

  // calculates the "preload expand", by multiplying the normal expand with the expFactor 
  // which is used to preload assets while the browser is idling (no important network traffic and no scrolling)
  // Reasonable values are between 1.5 and 4 depending on the expand option
  expFactor: 1.5,

  // modifies the horizontal expand by multiplying the expand value with the hFac value. 
  // Use case: In case of carousels there is often the wish to make the horizontal expand 
  // narrower than the normal vertical expand option. 
  // Reasonable values are between 0.4 - 1. 
  // In the unlikely case of a horizontal scrolling website also 1 - 1.5.
  hFac: 0.8,

  // 0 = don't load anything
  // 1 = only load visible elements
  // 2 = load also very near view elements
  // 3 = load also not so near view elements
  loadMode: 2,

  // whether to load visibility: hidden elements.
  loadHidden: true,

  // the timeout option used for the requestIdleCallback
  ricTimeout: 0,

  // the timeout option used to throttle all listeners
  throttleDelay: 125

Responsive Image Lazy Load JS Library, lazysizes Plugin/Github

See Demo And Download

Official Website(aFarkas): Click Here

This superior jQuery/javascript plugin is developed by aFarkas. For extra Advanced usage, please go to the official website.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *