Laravel-mix: No image-min for mix?

[mforcer]

not really an issue, but moving to Laravel 5.4/Mix from 5.3/Elixir seems to have killed my image min functionality as it relies on Gulp.

trying to stick with a web pack/mix work flow what are options for automatic image min?

previously I would copy images to resources/images and they would be optimised and copied to public/images.

Thanks

[JeffreyWay]

I haven't decided yet if we should include image optimization with the default Mix install.

But of course, you can always manually add it in with mix.webpackConfig().

https://github.com/Klathmon/imagemin-webpack-plugin

[alenabdula]

I understand this issue has been closed for some time but wanted to leave this here in case anyone is trying to configure image optimization with Laravel Mix.

npm install --save-dev imagemin-webpack-plugin copy-webpack-plugin imagemin-mozjpeg

const { mix } = require('laravel-mix');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const imageminMozjpeg = require('imagemin-mozjpeg');

mix.webpackConfig({
    plugins: [
        new CopyWebpackPlugin([{
            from: 'resources/assets/images',
            to: 'img', // Laravel mix will place this in 'public/img'
        }]),
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            plugins: [
                imageminMozjpeg({
                    quality: 80,
                })
            ]
        })
    ]
});

Hope that helps.
Best,
Alen

[mforcer]

@alenabdula perfect thanks :)

[JeffreyWay]

@alenabdula Image optimization is included in the next tagged release of Mix.

[valh1996]

@JeffreyWay

Hello, how do we put the images in version please? I would like to enjoy the cache busting also with pictures :)

My code:

mix.styles([
    'resources/assets/css/custom.css'
  ], 'public/css/all.css');

mix.copy('resources/assets/img/*.*', 'public/img');

if (mix.config.inProduction) {
    mix.version();
}

[ralphschindler]

@JeffreyWay the above example is what I am attempting to solve as well, essentially a way to

• mix.copy() images as a glob path
• make them version capable
• manifestable (so that the mix() function will write the proper file name during production & non-hashed in local env).

Can you give me some hints as to which direction you plan on going with this? I see that currently, images cannot be handled properly by File.js since the read function encodes as utf-8 and the write function will JSON.stringify() anything that appears as an object body (even if the body is, for example, binary PNG data.)

[decadence]

@JeffreyWay
Is image optimization working already?
I use version 0.10.0 and this code:

mix.copy("img/*.*", "public/opt");

but Mix only copies images without any optimization (folder sizes are equal).
What should I do to make it work?

[decadence]

@valh1996 does image optimization work for you?

[mforcer]

I got the impression it does it automatically when copied but doesn't appear to be the case.

The code here that added support doesn't indicate that it is actually doing any minification. https://github.com/JeffreyWay/laravel-mix/commit/115e8f15790aea1029288e1d56956cc2d48ac79b

This is the package used: https://www.npmjs.com/package/img-loader

[decadence]

I found this commit too. But yeah it does not any minification on copy. Images sizes are equal before and after.

[manniL]

@JeffreyWay Could you provide an example on how to setup the img-properly (maybe write a dedicated doc page)?

[mijgame]

I also would like to know how this works, can't seem to get it working.

[leo108]

Is it possible to disable imagemin? it takes more time to do pack action.

[decadence]

@leo108 How does it take time if it doesn't do anything but copy?

[leo108]

@Decadence mix use the img-loader to load image files referred by css files, it will call the imagemin to process those image files.

[decadence]

@leo108 Thanks. Therefore we can't imagemin arbitrary images? Strange behaviour.

[arthurkirkosa]

How do you stop image optimization?

[leo108]

@arthurkirkosa I have submitted a PR and already been merged, it should be shipped in next release.

[arthurkirkosa]

mix.options({
      processCssUrls: false
   });

did the job for me... I was most concerned about background url images in css being moved in images and being compressed

[huglester]

@leo108 how is imagemin activated? (I do not use sass or something). for Now I am just copying files

[Levdbas]

Would be interested in this as well. I would like to know the way to go with this when not all images are included in the scss but I still want to optimize them. Most obvious way would be to give extra options in the copyDirectory function?

[hraboviyvadim]

@JeffreyWay if there any way to optimize images which should be copied by mix.copy() with using mix.version() ?

[goowikns]

@JeffreyWay I'm also wondering, how about what @hraboviyvadim said?

[Meera9]

I understand this issue has been closed for some time but wanted to leave this here in case anyone is trying to configure image optimization with Laravel Mix.

npm install --save-dev imagemin-webpack-plugin copy-webpack-plugin imagemin-mozjpeg

const { mix } = require('laravel-mix');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const imageminMozjpeg = require('imagemin-mozjpeg');

mix.webpackConfig({
    plugins: [
        new CopyWebpackPlugin([{
            from: 'resources/assets/images',
            to: 'img', // Laravel mix will place this in 'public/img'
        }]),
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            plugins: [
                imageminMozjpeg({
                    quality: 80,
                })
            ]
        })
    ]
});

Hope that helps.
Best,
Alen

i can not reduce my image file using your code not single file

[dreammonkey]

As this seems to be a never ending thread, I though I might as well add to the discussion.

If anyone is running into the following error:

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

Try this, it worked for me:

npm install --save-dev imagemin-webpack-plugin copy-webpack-plugin imagemin-mozjpeg

const { mix } = require('laravel-mix');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const imageminMozjpeg = require('imagemin-mozjpeg');

mix.webpackConfig({
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'images', // -> the source location (relative to where your webpack.mix.js is located)
          to: 'assets/images', // Laravel mix will place this in 'public/assets/images'
        },
      ],
    }),
    new ImageminPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i,
      plugins: [
        imageminMozjpeg({
          quality: 80,
        }),
      ],
    }),
  ],
});

[NaveenKharwar]

@dreammonkey You're a rock star.