srcset attribute support

[bnthor]

Hi! First of all, thank you for this project, it's really helpful. I just noticed something that could be annoying for some (it has been for me):

When building, images copying into /dist does not take into account the srcset attribute in html files, for example:

<img src="src/images/logo.png" srcset="src/images/logo@2x.png 2x" />

You can still copy these files by hand but it's not ideal when deploying automatically.

Thanks again!

[Autapomorph]

@bnthor if html-loader fails you can try html-srcsets-loader Just npm i -D html-srcsets-loader and then replace html-loader in config/webpack.loaders.js with option attrs like this:

const html = {
  test: /\.(html)$/,
  use: [
    {
      loader: 'html-srcsets-loader',
      options: {
        attrs: ['img:src', ':srcset'],
      },
    },
  ],
};

[ericalli]

This is a tricky issue. It seems like the recommended solution is what @Autapomorph has mentioned. However, I'm not too thrilled about replacing the default html-loader with html-srcsets-loader which doesn't appear to be well maintained.

Good news however, it seems like this is a known issue/request in the html-loader project. I'm watching it and once it's resolved I'll be sure to update the package in SSB.

[Autapomorph]

@ericalli there is another temporary workaround due to html-loader issue: copy-webpack-plugin + imagemin-webpack-plugin + imagemin-mozjpeg:

npm i -D copy-webpack-plugin imagemin-webpack-plugin imagemin-mozjpeg

config/webpack.plugins.js:

const CopyPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const imageminMozjpeg = require('imagemin-mozjpeg');

...

// Images
const imagesCopy = new CopyPlugin([
  {
    from: path.join(config.root, config.paths.src, 'images'),
    to: 'images',
  },
]);

const imagesMin = new ImageminPlugin({
  test: /\.(jpe?g|png|gif|svg)$/i,
  gifsicle: {
    interlaced: false,
  },
  optipng: {
    optimizationLevel: 7,
  },
  pngquant: {
    quality: '65-90',
    speed: 4,
  },
  plugins: [
    imageminMozjpeg({
      progressive: true,
    }),
  ],
});

...

module.exports = [
  ...
  config.env === 'production' && imagesCopy,
  config.env === 'production' && imagesMin,
  ...
].filter(Boolean);

this will copy every image in src/images and optimize them in the same way as you already have with image-webpack-loader in config/webpack.loaders.js

• imagemin-webpack-plugin is needed because copy-webpack-plugin overwrites images optimized by image-webpack-loader
• imagemin-mozjpeg is need because imagemin-webpack-plugin doesn't have mozjpeg by default

but this solution seems to be slower than your existing with image-webpack-loader but I think it can be used while there's a bug in html-loader

[janklan]

Looks like html-loader is abandoned.