Displaying 1 to 17 from 17 results

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

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.




object-fit-images - 🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari,

  •    Javascript

🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ... To generate the font-family automatically, you can use the PostCSS plugin or the SCSS/SASS/Less mixins.

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.

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.


react-srcset-image - React component to optimize your images based on srcset and add an automatic medium-like blur animation

  •    Javascript

React component to optimize your images based on srcset and add an automatic medium-like blur animation.⚠️ This component needs webpack to produce multiple images sizes for you.

srcset - Parse and stringify the HTML <img> srcset attribute

  •    Javascript

Parse and stringify the HTML <img> srcset attribute.Useful if you're creating a polyfill, build-tool, etc.

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.

yass.js - Yet Another SrcSet implementation.

  •    Javascript

Yet Another SrcSet implementation. Add yass.js just after the last img tag on your page. Yass works from a mobile-first perspective, so the properties are seen as a minimal value. So 500w should be visible on a 500px or wider screen.

responsive-loader - A webpack loader for responsive images

  •    Javascript

A webpack loader for responsive images. Creates multiple images from one source image, and returns a srcset. For more information on how to use srcset, read Responsive Images: If you’re just changing resolutions, use srcset.. Browser support is pretty good. Per default, responsive-loader uses jimp to transform images. which needs to be installed alongside responsive-loader. Because jimp is written entirely in JavaScript and doesn't have any native dependencies it will work anywhere. The main drawback is that it's pretty slow.

Brackets-HTML5CodeHints - Extend Brackets own code hints with more HTML5 elements and attributes such as Picture, Srcset, Template +more

  •    Javascript

Extend Brackets HTML code hints with more HTML5 elements and attributes such as Picture, Srcset, Template, inputmode as well as some HTML4 elements such as cellpadding, cellspacing and iframe. Also includes hints for Web Components and Schema.org.

srcset-loader - Flexible srcset-loader for webpack

  •    Javascript

A super flexible and easily chainable (with other loaders like file-loader or image-webpack-loader) srcset loader for webpack 2. Its purpose is to automatically resize your images to the requested dimensions and return those as an srcSet.

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.