responsive-image-utils

Responsive image utilities

Utility functions to make it easier to work with auto generated responsive images for better performance optimised images.

Overview

Use this utility lib to generate image srcsets and sizes used for responsive web design using a mobile-first approach.

This project is a lightweight utils version of Responsive Image Breakpoints Generator.

How it works?

Please spend some time to read the following links which I think explains the concept of responsive images pretty well.

• https://ericportis.com/posts/2014/srcset-sizes/#part-2
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

ES6 Usage

npm install -D responsive-image-utils

ES6 Demo - https://codesandbox.io/s/1z15pnyk5j

ES5 Usage

Add the following script tag to your project

<script src="https://unpkg.com/responsive-image-utils/dist/responsive-image-utils.umd.js"></script>

ES5 Demo - https://jsfiddle.net/ikanedo/8h7nz15g/

More information

Want more information? Read the usage and step by step guide.

TSDocs

Please visit the gh_pages for TSDocs.

Contributions

Start contributing. Contributions are open to all.