lazysizes - High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration

  •        64

lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster. It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.

https://github.com/aFarkas/lazysizes

Tags
Implementation
License
Platform

   




Related Projects

respimage - respimage is a responsive images polyfill, that loads your images fast and responsibly

  •    Javascript

#respimage respimage is a fast, lightweight and robust responsive images polyfill, that saves the users bandwidth by utilizing smart resource selection algorithm. It implements the srcset/sizes attributes as also the picture element. Unlike other responsive images polyfills respimage plays nicely with your graceful degradation / progressive enhancement and image SEO strategy. ##Download and Embed Simply download the respimage.min.js script and add it to your website or bundle it in your normal JS.

yall.js - A fast, flexible, and small image lazy loader!

  •    Javascript

yall.js is a featured-packed lazy loading script for <img>, <picture>, <video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scroll, touchmove, resize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also (optionally) optimize use of browser idle time using requestIdleCallback. To optimize decoding of <img> lazy loading for simple src and srcset use cases, yall.js uses Image.decode where available to decode images asynchronously before adding them to the DOM.

Imager.js - Responsive images while we wait for srcset to finish cooking

  •    Javascript

Imager.js is an alternative solution to the issue of how to handle responsive image loading, created by developers at BBC News. There are many responsive image solutions in the wild: srcset, src-n, PictureFill and so on. They are either verbose or hard to debug (and to maintain/integrate). Some of them don't deal well with pixel density and suffer from double asset payload (meaning you end up downloading assets unnecessarily).

blazy - Hey, be lazy! bLazy

  •    Javascript

bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped). It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if he/she doesn't browse the whole page. If you don't want to host the script yourself you can link to the latest minified file: //cdn.jsdelivr.net/blazy/latest/blazy.min.js on jsDelivr. Exchange latest with the specific version number if you want to lock it in.


react-simple-img - 🌅 React lazy load images with IntersectionObserver API and Priority Hints

  •    Javascript

Image component working similar with standard img tag and with the following props. This function is only required, when you want to customise intersection observer configuration.

imaging-heap - A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios

  •    Javascript

There’s beauty in the breakdown of bitmap image data. A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios. Works out-of-the-box with img (of course), img[srcset], img[srcset][sizes], picture, picture [srcset], picture [srcset][sizes]. Ignores .svg files. No support for background images (yet?).

lozad

  •    Javascript

It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits. Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

grunt-responsive-images-extender - A Grunt plugin that extends HTML image tags with srcset and sizes attributes

  •    Javascript

Extend HTML image tags with srcset and sizes attributes to leverage native responsive images. The responsive_images_extender task will scan your source files for HTML <img> tags and extend them with srcset and optional sizes attributes to leverage native responsive images as described in Yoav Weiss' article.

gulp-responsive - gulp-responsive generates images at different sizes

  •    Javascript

gulp-responsive depends on sharp. Sharp is one of the fastest Node.js modules for resizing JPEG, PNG, WebP and TIFF images. If you are using Mac OS then before installing gulp-responsive you should install the libvips library. Further information and instructions can be found in the sharp installation guide.

jekyll-picture-tag - Easy responsive images for Jekyll.

  •    Ruby

Easy responsive images for Jekyll. Jekyll Picture Tag is a liquid tag that adds responsive images to your Jekyll static site. It follows the picture element pattern, and polyfills older browsers with Picturefill. Jekyll Picture Tag automatically creates resized source images, is fully configurable, and covers all use cases — including art direction and resolution switching — with a little YAML configuration and a simple template tag.

BttrLazyLoading - [Unmaintained] Responsive Lazy Loading plugin for JQuery

  •    Javascript

BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not only! BttrLazyLoading also allows you to have different version of an image for 4 differents screen sizes: phones (<768px), tablets (≥768px), desktops (≥992px) and large Desktops (≥1200px). BttrLazyLoading depends on jQuery (meaning jQuery must be included before the plugin files) and Animate.css (optional) for animations.

Responsive-Images - NOTE: use Picturefill instead

  •    Javascript

The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this could enable developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions -- without requesting both image sizes, and without UA sniffing. As soon as rwd-images.js loads, it tests the screen width, and if it's large, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory called "/rwd-router/". As these requests reach the server, the .htaccess file determines whether the request is a responsive image or not (does it have a ?full query parameter?). It redirects responsive image requests immediately to their full size, while all non-responsive-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-router/" segment.

ng-lazyload-image - Lazy image loader for Angular ≥ v2

  •    TypeScript

The browser you targeting need to have support of WeakMap and String.prototype.includes. If you need to support an older browser (like IE) you will need to include polyfill for WeakMap and String.prototype.includes (see https://github.com/zloirock/core-js for example).

img-2 - Replace <img /> elements with <img-2> to automatically pre-cache images and improve page performance

  •    HTML

Replace <img /> elements with <img-2></img-2> to automatically pre-cache images and improve page performance. Displaying even a small number of high-quality images on a web page can be difficult to do without causing jank or slowing down the initial load of the page. This is why clever developers employ techniques with JavaScript to pre-cache images and lazy load them as they become visible on the user's screen. Img2 makes this super easy, just swap out your <img /> elements with <img-2></img-2> and let it do the work for you.

jquery_lazyload - Vanilla JavaScript plugin for lazyloading images

  •    Javascript

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.

echo - Lazy-loading images with data-* attributes

  •    Javascript

Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple. Check out a demo. Echo works in IE8+.Using Echo.js is simple, to add an image directly into the page simply add a data-echo attribute to the img tag. Alternatively if you want to use Echo to lazy load background images simply add a `data-echo-background' attribute to the element with the image URL.

lqip-loader - Low Quality Image Placeholders (LQIP) for Webpack

  •    Javascript

PS: The large image file will be emitted & only 400byte of Base64 (if set to true in the loader options) will be bundled. To save memory and improve GPU performance, browsers (including Chrome started from 61.0.3163.38) will now render a slightly more crisp or pixelated Base64 encoded images.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.