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

  •        60

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

https://github.com/filamentgroup/imaging-heap

Dependencies:

chalk : ^2.3.2
debug : ^3.1.0
puppeteer : ^1.2.0
table : ^4.0.3
yargs : ^11.0.0

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

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.

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.

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


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.

thumbor - Smart imaging service.

  •    Python

thumbor is a smart imaging service. It enables on-demand crop, resizing and flipping of images. It also features a VERY smart detection of important points in the image for better cropping and resizing, using state-of-the-art face and feature detection algorithms (more on that in Detection Algorithms).

cornerstone - JavaScript library to display interactive medical images including but not limited to DICOM

  •    Javascript

Cornerstone is an open source project with a goal to deliver a complete web based medical imaging platform. This repository contains the Cornerstone Core component which is a lightweight JavaScript library for displaying medical images in modern web browsers that support the HTML5 canvas element. Cornerstone Core is not meant to be a complete application itself, but instead a component that can be used as part of larger more complex applications. See the OHIF Viewer for an example of using the various Cornerstone libraries to build a simple study viewer. Cornerstone Core is agnostic to the actual container used to store image pixels as well as the transport mechanism used to get the image data. In fact, Cornerstone Core itself has no ability to read/parse or load images and instead depends on one or more ImageLoaders to function.

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.

cornerstoneTools - A framework for tools built on top of Cornerstone.

  •    Javascript

cornerstoneTools is a library built on top of cornerstone that provides a set of common tools needed in medical imaging to work with images and stacks of images.

v-img

  •    Vue

v-img is a plugin for Vue.js that allows you to show images in full-screen gallery by adding only one directive to the <img> tag. *in this snippet all settings has its default value. No need to specify them unless you want to change default behavior. Unfortunately if you used CDN way to include plugin you can't set up these options, but still can set them up inline.

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.

responsive-email - A table-based (but responsive) email template. Has MailChimp merge tags in place.

  •    HTML

Some of the images used within this template are created at double-resolution to give a crisp display on HiDPI screens - please bear in mind this will require extra bandwidth. If you are optimising for lower bandwidths you may want to use standard resolution images instead. Also, images hidden using display: none; do still load, even though they are not displayed. Make sure you link all your images using full URL paths, and upload them to a suitable webspace, or upload/link via your email transmission service.

breakpoint - Breakpoint is a column based media query generator and responsive image framework.

  •    Javascript

Breakpoint is a grid system and responsive image solution. It's based on the concept that columns shouldn't stretch but get added or taken away as the screen changes size. This concept was taken from the Frameless Grid system developed by Joni Korpi. The Breakpoint grid is also floatless by using inline-block cells and border box sizing. This layout technique is taken from Griddle by Nicolas Gallagher. Breakpoint generates media queries at column break points that you determine. You can also label your media queries which allows JavaScript to pair them with responsive image sources. If you want to use Breakpoint for responsive images you need jQuery and EventEmitter. While not a requirement, you can get enhanced deferreds/callbacks when working with responsive images by installing imagesLoaded.

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.

NiftyNet - An open-source convolutional neural networks platform for research in medical image analysis and image-guided therapy

  •    Python

NiftyNet is a consortium of research organisations (BMEIS -- School of Biomedical Engineering and Imaging Sciences, King's College London; WEISS -- Wellcome EPSRC Centre for Interventional and Surgical Sciences, UCL; CMIC -- Centre for Medical Image Computing, UCL; HIG -- High-dimensional Imaging Group, UCL), where BMEIS acts as the consortium lead. NiftyNet is not intended for clinical use.

GammaGallery - Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account

  •    Javascript

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.

ResponsiveSlides.js - Simple & lightweight responsive slider plugin (in 1kb)

  •    Javascript

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSlides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds CSS max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.6 and up supported, tested up to 1.8.3) and that all the images are the same size. Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.