Giter VIP home page Giter VIP logo

responsive-loader's Introduction

responsive-loader

Build Status

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.

Install

npm install responsive-loader jimp --save-dev

responsive-loader uses jimp, a pure JS image manipulation library (so no other dependencies, yay ✌️), to transform images which needs to be installed alongside responsive-loader.

Usage

// Outputs three images with 100, 200, and 300px widths
const responsiveImage = require('responsive?sizes[]=100,sizes[]=200,sizes[]=300!myImage.jpg');

// responsiveImage.srcSet => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg 100w,2fefae46cb857bc750fa5e5eed4a0cde-200.jpg 200w,2fefae46cb857bc750fa5e5eed4a0cde-300.jpg 300w'
// responsiveImage.images => [{height: 50, path: '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg', width: 100}, {height: 100, path: '2fefae46cb857bc750fa5e5eed4a0cde-200.jpg', width: 200}, {height: 150, path: '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg', width: 300}]
// responsiveImage.src => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
// responsiveImage.toString() => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
ReactDOM.render(<img srcSet={responsiveImage.srcSet} src={responsiveImage.src} />, el);

// Or you can just use it as props, `srcSet` and `src` will be set properly
ReactDOM.render(<img {...responsiveImage} />, el);

Or use it in CSS (only the first resized image will be used, if you use multiple sizes):

.myImage { background: url('responsive?size=1140!myImage.jpg'); }

@media (max-width: 480px) {
  .myImage { background: url('responsive?size=480!myImage.jpg'); }
}
// Outputs placeholder image as a data URI, and three images with 100, 200, and 300px widths
const responsiveImage = require('responsive?placeholder=true&sizes[]=100,sizes[]=200,sizes[]=300!myImage.jpg');

// responsiveImage.placeholder => 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAIBAQE…'
ReactDOM.render(
  <div style={{
    height: responsiveImage.height,
    width: responsiveImage.width,
    backgroundSize: 'cover',
    backgroundImage: 'url("' + responsiveImage.placeholder + '")'
  }}>
    <img src={responsiveImage.src} srcSet={responsiveImage.srcSet} />
  </div>, el);

Options

  • sizes: array — specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). You may also declare a default sizes array in responsiveLoader in your webpack.config.js.
  • size: integer — specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)
  • quality: integer — JPEG compression quality; defaults to 95
  • ext: string — either png, jpg, or gif; use to convert to another format; defaults to original file's extension
  • background: hex — Background fill when converting transparent to opaque images; defaults to 0xFFFFFFFF (note: make sure this is a valid hex number)
  • placeholder: bool — A true or false value to specify wether to output a placeholder image as a data URI. (Defaults to false)
  • placeholderSize: integer — A number value specifying the width of the placeholder image, if enabled with the option above. (Defaults to 40)

Examples

Set a default sizes array, so you don't have to declare them with each require.

module.exports = {
  entry: {...},
  output: {...},
  module: {
    loaders: [{
      test: /\.(jpe?g|png)$/i,
      loader: 'responsive'
    ]}
  },
  responsiveLoader: {
    sizes: [300, 600, 1200, 2000],
    placeholder: true,
    placeholderSize: 50
  }
}

Notes

  • Doesn't support 1x, 2x sizes.

See also

responsive-loader's People

Contributors

jstcki avatar alex-ketch avatar mcfunley avatar greenkeeperio-bot avatar klathmon avatar lnhrdt avatar

Watchers

Lacorne avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.