Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including image-size-loader with all npm packages installed. Try it out:

var imageSizeLoader = require("image-size-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

image-size-loader v0.7.0

image size loader module for webpack

image size loader for webpack

A webpack image loader with extra size info for image.


Documentation: Using loaders

npm install image-size-loader --save

var image = require("image-size!./file.png");
// => emits file.png to the output directory
// => returns an object
// => { width: 150, height: 50, type: "png", src: __webpack_public_path__ + "file.png", bytes: 1234 }


query params


var image = require('image-size?name=[hash].[ext]!./file.png');

Filename placeholders

  • [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.
  • [hash] the hash of the content
  • [<hashType>:hash:<digestType>:<length>] optionally you 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 the query param regExp




// webpack.config.js
module.exports = {
  output: {
    publicPath: '/public/'
  module: {
    loaders: [
        test: /\.(gif|jpeg|jpg|png|svg)$/,
        loader: 'image-size'


var result = require("./image.png");
// => {width: 500, height: 700, type: "png", src: __webpack_public_path__ + "image.png", bytes: 1234}


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free