picturefill - A responsive image polyfill for <picture>, srcset, sizes, and more

•    Javascript

---

A responsive image polyfill.To find out how to use Picturefill, visit the project site.

picturefill srcset picture responsive responsive-images polyfill image

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

responsive srcset images resize polyfill shim img picturefill

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.

lazyload lazy-evaluation lazysizes responsive-images performance lazy loader lazyloader responsive image images picture srcset respimg respimage include ajax img imager imager.js picturefill component

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.

responsive image responsive-images picture srcset polyfill respimg respimage picturefill performance bandwidth

react-pwa - An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience

•    Javascript

---

A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience.

pwa react ssr hot-reload code-splitting seo babel srcset expressjs es7 hsts hstspreload pwa-apps webpack4

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.

polyfill css js edge ie images object-fit covers contains styles internet explorer ies shim shiv fills srcset backgrounds

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.

polyfill css js edge ie images backgrounds contains covers explorer fills ies internet object-fit shim shiv srcset styles

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.

blazy blazyjs blazy.js lazy lazyload lazyloading image images picture srcset iframe video unity retina responsive performance

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

responsive srcset images resize polyfill shim img picturefill

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.

gruntplugin grunt responsive responsivedesign rwd img image images extend convert converter srcset sizes

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.

react srcset responsive image-processing webpack react-component image mobile

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.

html attribute image img src parse stringify srcset responsive picture element

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.

responsive-images static-site srcset image-optimization

grunt-respimg - A responsive image workflow for optimizing and resizing your images

•    Javascript

---

A responsive image workflow for optimizing and resizing your images. The output images should be visually indistinguishable from those output by Photoshop’s Save for Web…, but with (much) smaller average file sizes.

advpng build compress compression gifsicle graphic graphicsmagick grunt gruntjs gruntplugin image imagemagick imageoptim images img jpegmini jpegoptim jpegtran minify optimization optimize optipng phantom phantomjs picturefill png pngcrush pngout rasterise rasterize respimg responsive responsivedesign rwd srcset svg vector

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.

srcset mobilefirst

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.

webpack-loader webpack responsive loader srcset

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.

adobe-brackets brackets-extension template picture srcset autocomplete html5 html cellpadding autocorrect hints elements attributes schema

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.

webpack responsive image srcset placeholder

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.

vue-components vue vuejs responsive-images responsive-web-design responsive-design front-end srcset vue.js responsive images frontend

imgix-go - A Go client library for generating image URLs with imgix

•    Go

---

imgix-go is a client library for generating image URLs with imgix. To begin creating imgix URLs, import the imgix library and create a URL builder. The URL builder can be reused to create URLs for any images on the domain it is provided.

images src url-builder srcset imgix signing-imgix-urls