resize-image-loader

Images account for 58%¹ of web pages. Hyper optimize your images to have massive improvement page load times.

Resize-image-loader will create responsive images using webpack and gm so only the most effecient image is downloaded for the user's device. Modern browser have an additional attibute on the img tag called srcset. If srcset is supported the browser will use the device's screensize and pixel density to determine the best image to download. Older browsers will default back to the normal src image. This will greatly improve page load times and time to first render while reducing the cost for the user².

Sample Metrics

Check out the test folder for a sample use case. Below is the render times with the full image vs a responsive one and a placeholder image.

image size	time to render on 3G connection
placeholder image (inlined & blurred)	300 ms
900 px width image (resized & optimized srcset)	5,000 ms
regular image	24,000 ms

Basic Usage

Documentation: Using loaders

Use the sizes param of the resize-image-loader to set all the desired widths. The loader creates the various sized images and return the proper formated result for the <img srcset> property (including any file name changes for long term caching). This loader need to be set in the javascript source, not the webpack config file.

var responsive = require('resize-image?sizes[]=200w,sizes[]=900w!./myImage.jpg');
var img = require('./myImage.jpg')
...
render(){
  return <img
    srcset={responsive.srcset}
    src={img}
    sizes="200w,900w" /> {/* Make sure to add the sizes manually as well. */}
}
 

Advanced Usage

Optionally you make also create a placeholder image. Placeholder images are tiny images that are inlined and blurred until the hi-res image is loaded. This delivers a fully rendered experience to the user as quick as possible without empty boxes or jumpy reflow/layouts. See facebook's write up for further details.

The code below has one img using the placeholder image, which is inlined as a datauri. This will load right away and take up minimal space on the initial download (the sample project placeholder is 1.5K gzipped). The second image is the normal image. The user's browser will then choose the optimal image and download that one instead of the src. Once the full image loads, the onLoad handler will trigger a state change and have an animated cross fade between the blurred placeholder image and the real hi-res image.

var responsive = require('resize-image?sizes[]=200w,sizes[]=900w&placeholder=20&blur=40!./myImage.jpg');
var img = require('./myImage.jpg')
...
render(){
  return (<div style={{position:'relative'}}>
    <img
      src={responsive.placeholder}
      style={{
        opacity:(this.state.imgLoaded ? 0 : 1),
        transition: 'opacity 300ms ease-out',
        position:'absolute'}} />
    <img
      src={img}
      srcset={responsive.srcset}
      sizes="200w,900w"
      style={{
        opacity:(this.state.imgLoaded ? 1 : 0),
        transition: 'opacity 300ms ease-in',
        position:'absolute'}}
      onLoad={function(){ this.setState({imgLoaded:true}); }} />
  </div>);
}

placeholder options.

placeholder=<image-width> default 20
blur=<gaussian-blur-amount> default 40

• To also compress images combine resize-image-loader with the image-webpack-loader

var responsive = require('image-webpack!resize-image?sizes[]=200w,sizes[]=900w!./myImage.jpg');
var img = require('image-webpack!./myImage.jpg')

Installation

Added @thibthib request to use LWIP. LWIP is a Node module for image processing. LWIP does not support WebP and the compression is slightly larger than with ImageMagick.

For WebP support and smaller output images, install ImageMagick.

// Optional install for Mac, otherwise defaults to the less powerful LWIP Node module
$ brew install graphicsmagick imagemagick --with-webp
 
// add resize-image-loader as a dependency
$ npm install resize-image-loader --save-dev

License

MIT (http://www.opensource.org/licenses/mit-license.php)