Webpack image loader with additional size information

This loader uses probe-image-size. While there are already a few other webpack loaders out there that will additionally fetch images sizes - some did not seem very active to me. some had problems loading guetzli-fied JPEGs, etc.

So with all the best intentions - here is yet another loader.

Why?

There are certain use cases where it is beneficial to know the dimensions of the image you (or your page) is about to show.

• an image album (e.g. a bit like masonry)
• using images without a page re-render when loading is done (usually a page 'jumps' when the actua image is shown - moving content further down the page as more images load. If you know their sizes you are able to reserve space in the layout and offer a slightly better UX)
• .. even more

Similar Projects

• https://www.npmjs.com/package/probe-image-size-loader
• https://github.com/boopathi/image-size-loader
• https://github.com/tremby/image-dimensions-loader
• https://github.com/dashed/sizeof-loader

Usage

Documentation: Using loaders

Installation

1npm  install --save-dev loader-probe-image-size

Configuration

Add the loader to your webpack configuration (or replace your existing image loader)

1// webpack.config.[ts|js]
2// ...
3  module: {
4    loaders: [
5      {
6        test: /\.(gif|jpe?g|png|svg|webp|ico)$/,
7		use: [{
8		  loader: 'loader-probe-image-size',
9		    options: {
10			  context: path.resolve(__dirname, 'src')
11		    }
12		  }
13		]
14      }
15    ]
16  }
17// ...

Advanced usage The loader uses the interpolatename function from loader-utils - meaning you can modify the filename of the emitted file via options: {name: ...} .

The following tokens are replaced in the name parameter:

• [ext] the extension of the resource
• [name] the basename of the resource
• [path] the path of the resource relative to the context query parameter or option.
• [folder] the folder the resource is in.
• [emoji] a random emoji representation of options.content
• [emoji:<length>] same as above, but with a customizable number of emojis
• [contenthash] the hash of options.content (Buffer) (by default it's the hex digest of the md5 hash)
• [<hashType>:contenthash:<digestType>:<length>] optionally one can configure
  • other hashTypes, i. e. sha1, md5, sha256, sha512
  • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
  • and length the length in chars
• [hash] the hash of options.content (Buffer) (by default it's the hex digest of the md5 hash)
• [<hashType>:hash:<digestType>:<length>] optionally one can configure
  • other hashTypes, i. e. sha1, md5, sha256, sha512
  • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
  • and length the length in chars
• [N] the N-th match obtained from matching the current file name against options.regExp

Shamelessly stolen from / source: https://github.com/webpack/loader-utils#interpolatename

Usage

Import images from within your code

1import image from './myimagefile.jpeg';
2
3// => emits myimagefile.jpeg
4// => image is an object {
5//	src: string,
6//	height: number
7//	width: number
8// 	type: [svg|webp|jpeg|png|...]
9//  toString: () => string ...
10// }

Usage with TypeScript

And for those fancy typescript users - you might want to add additional info to your image modules, e.g. /src/@types/images.d.ts, so your IDE of choice will assist you a bit more.

1declare module '*.jpg' {
2	export const src: string;
3	export const type: string;
4	export const width: number;
5	export const height: number;
6}