Displaying 1 to 16 from 16 results

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

  •    Javascript

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.

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.

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.

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.

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?).

borealis - Element query based responsive image solution

  •    Javascript

By the end of 2013, the average web page served 1,030Kb of images, much to the chagrin of low bandwidth and pay-per-kilobyte users. The need to serve smaller images where appropriate, and to be able to control the scale and crop of images at all sizes, is imperative to creating a light weight and editorially rich web experiences. This is where responsive images come in. Unfortunately, we don't have a standard solution yet, and of those proposed, images will be swapped based on viewport information, not element information. Until we have a standard solution, you've got to pick your favorite hack. In order to use borealis, you need to both include borealis.js on your site and set up the data-borealis-srcs attribute on your desired image. data-borealis-srcs needs to be written in key: value pairs separated by a comma ,, with the key being the min-width pixel width when you would like to swap out an image and the value being the URL to the image. The first item in data-borealis-srcs should not have a key and will be the default. In order to prevent extra image requests, do not include the src attribute in the image definition.

appropriate-images - Generate appropriately resized and optimized images into your website, using a configuration that can be shared with client-side libraries

  •    Javascript

Generate appropriately resized and optimized images for your website, using a configuration object that can be shared with client-side libraries.Images are resized with sharp, then each size variant is optimized (including the creation of a webp version) with imagemin plugins.

enfasten - ⚡️ Automatically make your site faster with optimized responsive images

  •    Go

Enfasten is a tool written in Go which takes in a static site, scales the images down to a number of different sizes, then rewrites all of your HTML to use responsive image tags with srcset attributes. It can also run all of your images through an optimizer like ImageOptim. This makes your static site faster for people to load because their browser can load the best image for their screen size and resolution, and it's backwards compatible with older browsers.I wrote this because on my site I frequently include images which are absurd sizes, such as a 2146x1258 screenshot from a high-DPI display. The user's browser downloads this huge image and promptly resizes it down to fit in my 660px wide blog. This is especially bad when people without high-DPI displays visit my site, but I still want things to look nice on high-DPI displays. The fact that I don't always remember to optimize my images makes this waste even worse.

guide-to-async-components - 📖 Guide To JavaScript Async Components


Also known as code splitting, dynamic import (TC39 proposal), "chunks" (which are loaded on demand), "layers", "rollups", or "fragments". Async component (in React) is a technique (typically implemented as a Higher Order Component) for loading components with dynamic import.

ribs - :meat_on_bone: Responsive Images Baked Server-side.

  •    Javascript

Photo borrowed from talented Kevin Racape. ***RIBS is still at an early development stage and is not ready for production yet!***.

jekyll-responsive-image - An unopinionated Jekyll plugin for generating and using responsive images

  •    Gherkin

A Jekyll plugin and utility for automatically resizing images. Its intended use is for sites which want to display responsive images using something like srcset or Imager.js. Or you can copy the contents of responsive_image.rb into your _plugins directory.

Respify - Respify responsive image library

  •    Javascript

A simple responsive images library, which parses a image from a set of child span nodes with data-media and data-src attributes. It uses media queries to select images. Respify can either be used on an image tag, or any other tag but then the background option should be set to true. Respify wil pop from the array of span child nodes, this means that the last node in the list will be parsed first. If Respify finds one matching media query it will use the corresponding image and stop the search.

vue-responsive-image - A Vue component that lets you quickly create responsive image tags with an optimal number of image sources for all devices

  •    Javascript

Vue Responsive Image is a Vue component that allows you to quickly insert responsive image tags in your Vue project, provided you have some automated system that produces the various sizes of images required. The component calculates all source sizes and, depending on the parameters passed, generates the appropriate <img> tag and its srcset attribute and, if needed, separate <source> tags for tablet portrait and smartphone views. You can also include the script you find in the dist/ folder called vue-responsive-image-web.min.js. This way you can use it directly in simple Vue-based pages. To find out how to include it, check the HTML file in web-test/web-test.html. Keep in mind that in this case your component won't be automatically upgraded unless you manually update the script.

responsive-images - Generate responsive images to work with the srcset and sizes spec

  •    PHP

You can override these parameters by providing and array to the DefaultConfigurator, or create a whole new configurator which implements ResponsiveFactoryConfigurator. The sourcePath parameter is used to define where image source files are located. In case of the first example and above configuration, the image file should be saved in ./src/img/image.jpeg.