resize-loader
v0.5.1
Published
Responsive image loader for webpack
Downloads
4
Maintainers
Readme
resize-loader
Images account for 58%1 of web pages. Hyper optimize your images to have massive improvement page load times.
resize-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
user2.
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
Use the sizes param of the resize-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 img = require('./myImage.jpg')
var responsive = require('resize?200!./myImage.jpg');
...
render(){
return <img
src={img}
srcset={responsive}
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 experince to the user as quick as possible without empty boxes or jumpy reflow/layouts. See facebook's write up for futher 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 inital 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 blured 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>);
}
Place Holder
- To also compress images combine resize-loader with the image-webpack-loader
var img = require('image-webpack!./myImage.jpg')
var placeHolder = require('-!url!resize?100!./myImage.jpg');
<div style={{ background-image: `url(${placeHolder})`, filter: 'blur(20px)' }}>
<img src={{ img }}/>
</div>
Installation
- Install ImageMagick before installing the resize-loader
$ brew install ImageMagick // for mac
$ npm install resize-loader --save-dev
License
MIT (http://www.opensource.org/licenses/mit-license.php)