Q/A: Why does minified size increase when using this plugin?

[RamiAwar]

Hello! Thanks for all the hard work on this plugin, really liking it. I'm not a frontend expert, so I came across something I found weird.

When I use this plugin to compress my image files (PNGs, jpegs, gifs, etc) I noticed that the "minified size" spit out by Vite increases.

However when I don't use it, the minified size is much smaller.

I know for a fact that this doesn't make sense at some level because the images are included in the final output, I can see them in my landing page and they are massive.

Any idea as to what this minified size means and whether or not this is expected behavior? I would expect it to decrease when using this plugin, not increase.

This is my config for reference:

  plugins: [
    react(),
    viteImagemin({
      plugins: {
        jpg: imageminMozjpeg(),
        // png: imageminPng(),
        // gif: imageminGif(),
      },
      makeWebp: {
        plugins: {
          jpg: imageminWebp(),
        },
      },
    }),
  ],
});

[RamiAwar]

Is it that the minified size only includes assets that were part of the build process? ex. compression

I'm fairly certain this isn't a bug or anything but wanted to ask here so others who are just as confused as I am by this have an answer.

[vHeemstra]

Yes, the plugin only counts the (size of the) files it processes. The total size is the total size of all processed images. The minified size is the sum of all minified versions of those. (Small detail: If you configure the plugin to minify a JPG let it make a WebP version, the image would be counted twice for the total size and both resulting images for the minified total.)

As from what I can tell, it seems you use/include more images in the build of your first image (7+ MB), which of course would make the minified size larger than the second build as well.

Does that answer your question?

[RamiAwar]

Actually I did not include more in the first image - they both contain the same things.

But what's different between the builds is which viteImageMin plugins I use. Sorry that wasn't very clear, will update description.

So in the 'bigger' size, I used png + gif plugins, which included those in the minimization. But in the 'smaller' size, the images were all still there, just weren't included in the size I'm guessing!

[vHeemstra]

Can you create a minimal example in CodeSandbox? (You can fork this devbox to get you started.)

Then I can have a look at what's going on.