image-resolution-loader
v1.1.3
Published
A loader that takes your image and returns @1x, @2x and @3x resolution versions of it
Downloads
1
Readme
image-resolution-loader
The image-resolution-loader
takes your image and returns @1x, @2x and @3x resolution versions of it.
Install
To begin, you'll need to install image-resolution-loader
:
$ npm install image-resolution-loader --save-dev
or
$ yarn add image-resolution-loader -D
Usage
Add loader to your webpack
config:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|webp)$/i,
use: [
{
loader: 'image-resolution-loader',
options: {
// loader options, see below
},
},
],
},
],
},
}
Then import
(or require
) the target file(s) in one of the bundle's files:
file.js
import images from ('./file.png')
or
const images = require('./file.png')
And run webpack
via your preferred method.
The Loader will accept your image as the initial with 3x resolution and will generate from it 2x and 1x versions. Next, it will emit these images on the specified path and return the object, which will contain the path to the all versions of the image and srcSet.
ℹ️ It is recommended to set the height and width of the initial image multiple of 3
Options
name
Type: String|Function
Default: '[name][resolution].[ext]'
Specifies a custom filename template for the target file(s) using the query
parameter name
. For example, to emit a file from your context
directory into
the output directory retaining the full directory structure, you might use:
ℹ️ By default the path and name you specify will output the file in that same directory, and will also use the same URI path to access the file.
outputPath
Type: String|Function
Default: undefined
Specify a filesystem path where the target file(s) will be placed.
publicPath
Type: String|Function
Default: __webpack_public_path__
Specifies a custom public path for the target file(s).
webp
Type: object Default: {}
sharp is used for optimizing webp images.The default options of sharp.webp()
are used if you omit this option.
jpg
Type: object Default: {}
sharp is used for optimizing jpg images.The default options of sharp.jpg()
are used if you omit this option.
png
Type: object Default: {}
imagemin-pngquant is used for optimizing png images.The default options of pngquant are used if you omit this option.
zopfli
Type: object Default: {}
imagemin-zopfli is used for compressing png images.The default options of imagemin-zopfli are used if you omit this option.
disable
Type: Boolean
Default: false
Disable processing of images by this loader (useful in development). Images data will still be generated but only for the original resolution.
Placeholders
Full information about placeholders you can find here.
[resolution]
Type: String
Default: @1x
| @2x
| @3x
Image resolution.
Examples
file.js
import images from './file.png'
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|webp)$/i,
use: [
{
loader: 'image-resolution-loader',
},
],
},
],
},
}
The result will be a variable images
, containing the following information:
{
'1x': '/[email protected]',
'2x': '/[email protected]',
'3x': '/[email protected]',
images: [{
path: '/[email protected]',
width: /* width of 1x image */,
height: /* height of 1x image */,
resolution: '1x',
}, {
path: '/[email protected]',
width: /* width of 2x image */,
height: /* height of 2x image */,
resolution: '2x',
}, {
path: '/[email protected]',
width: /* width of 3x image */,
height: /* height of 3x image */,
resolution: '3x',
}],
imagesByResolution: {
'1x': {
path: '/[email protected]',
width: /* width of 1x image */,
height: /* height of 1x image */,
},
'2x': {
path: '/[email protected]',
width: /* width of 2x image */,
height: /* height of 2x image */,
},
'3x': {
path: '/[email protected]',
width: /* width of 3x image */,
height: /* height of 3x image */,
},
srcSet: '/[email protected] 1x,/[email protected] 2x,/[email protected] 3x',
},