Resizing images

Would you consider resizing images to be a part of the design goals of this module? It would be very convenient to keep original images in the project directory and in the importing code specify require('./images/my-photo.jpg?resize=1000px')}. From my point of view, resizing images down is a similar semantically operation as minifying with mozjpeg. What do you think?

[cyrilwanner]

Version v2.2.0 has just been published which now supports image resizing. If you had responsive-loader previously installed, make sure to also update it to v1.2.0 (earlier versions won’t work correctly). Also, responsive-loader requires you to either install jimp (node implementation, slower) or sharp (binary, faster).

After adding the ?resize query param, you can pass in any other available param of the responsive-loader to resize your image. Example:

const oneSize = require('./images/my-image.jpg?resize&size=300');
const multipleSizes = require('./images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000');

export default () => (
  <div>
    {/* Single image: */}
    <img src={oneSize.src} />

    {/* Source set with multiple sizes: */}
    <img srcSet={multipleSizes.srcSet} src={multipleSizes.src} />
  </div>
);

I hope that it works as you have expected, otherwise please tell me 😃

[cyrilwanner]

So, I think that I found an improvement for both use cases.

Specifying the size with resource queries

When you want to resize single images with the query param (e.g. my-image.jpg?size=300 or my-image.jpg?sizes[]=300&sizes[]=500), you don’t need the ?resize prefix anymore (but it still works if you want it). Although if you need any other query of responsive-loader, you still need the resize prefix.

Let responsive-loader handle all JPEG and PNG images per default

If you want all images to be resized with a global config (as of your use case @denis-sokolov), you can now overwrite the default loader with the defaultImageLoader option. All JPEG and PNG images will then directly be forwarded to the responsive-loader. But as this loader is more restrictive, the query params of next-optimized-images won’t work anymore (e.g. responsive-loader can’t handle inlined images etc.). But for all other types (SVG, WEBP and GIF), img-loader will still be used and the queries are still available there.

I hope that this improves the experience for both use cases. Both changes are available in version 2.3.0 which has just been published to npm.