UNPKG

responsive-image-utils

Version:

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

github.com/kbalagtey-tacit/responsive-image-utils

kbalagtey-tacit/responsive-image-utils

46 lines (31 loc) • 2.22 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# Responsive image utilities Utility functions to make it easier to work with auto generated responsive images for better performance optimised images. [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Greenkeeper badge](https://badges.greenkeeper.io/kbalagtey-tacit/responsive-image-utils.svg)](https://greenkeeper.io/) [![Travis](https://img.shields.io/travis/kbalagtey-tacit/responsive-image-utils.svg)](https://travis-ci.org/kbalagtey-tacit/responsive-image-utils) [![Coverage Status](https://coveralls.io/repos/github/kbalagtey-tacit/responsive-image-utils/badge.svg)](https://coveralls.io/github/kbalagtey-tacit/responsive-image-utils) [![Dev Dependencies](https://david-dm.org/kbalagtey-tacit/responsive-image-utils/dev-status.svg)](https://david-dm.org/kbalagtey-tacit/responsive-image-utils?type=dev) ### 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](https://www.responsivebreakpoints.com/)**. ### 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 ```js npm install -D responsive-image-utils ``` ES6 Demo - https://codesandbox.io/s/1z15pnyk5j ### ES5 Usage Add the following script tag to your project ```js <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.](https://github.com/kbalagtey-tacit/responsive-image-utils/blob/master/USAGE.md) ### TSDocs [Please visit the gh_pages for TSDocs.](https://kbalagtey-tacit.github.io/responsive-image-utils/) ### Contributions [Start contributing](https://github.com/kbalagtey-tacit/responsive-image-utils/blob/master/CONTRIBUTING.md). Contributions are open to all.