Does the parcel-plugin-imagemin work?

[juliana-samoilenko]

Hi, I found your plugin on the Internet. And I wanted to use it in my project. I read the documentation, but the plugin doesn't work.

Here are my steps:

1. I installed the plugin for parcel (before that parsel was installed, it works).

2. I created a "imagemin.config.js" in the root of the project. This is structure of my project: StaffMonitoring/ |---> src/ |---> dist/ |---> package.json |---> package-lock.json |---> imagemin.config.js

3. I used command npm build run and I expect to see compressed images in the folder "dist", but there are images without compression.

Tell me, please, what is my mistake?

[DeMoorJasper]

@Lyashka if the original size is smaller than the compressed version it outputs the original image. That's the only time it does not change the images, besides that it should always compress images according to your settings.

[juliana-samoilenko]

@DeMoorJasper one of the two files was really compressed. I changed, now all the files are uncompressed, but the result does not change.

[DeMoorJasper]

Alright, it should work, could you create a minimal reproduction or something, so I can test this? There are integration tests in this repo so it should work otherwise they should fail

[juliana-samoilenko]

Maybe I'm doing something wrong, I don’t know... I created a public copy of my project.

[DeMoorJasper]

@Lyashka can't reproduce. It looks as minified as it can when running npm run build however maybe you ran npm run start or npm start? In that case it creates a devbuild and does not optimise. The dist is shared between dev and prod builds so you might be confusing them or something. That's the only explanation I can find for this issue.

[juliana-samoilenko]

I read the documentation to your plugin and used npm run build. I don’t understand what the problem is, because the direct use of SVGO converts files and compresses them.

[DeMoorJasper]

I can't reproduce it so I can't really help any further it should work, wouldn't know any reason why it shouldn't

[VitalyKrenel]

Hey @DeMoorJasper! I happened to review the project @Lyashka works on, and I actually experience the same issue running it on my machine.

Could you please share the compressed version that npm run build generates when you run the command? When I run it, I get the following result

worker-active.af8baf9c.svg

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#5D7EAC;" d="M503.916,320.674H8.084V29.642c0-11.906,9.651-21.558,21.558-21.558h452.716
	c11.906,0,21.558,9.651,21.558,21.558V320.674z"/>
<path style="fill:#344966;" d="M503.916,29.642v291.032h-32.337V29.642c0-11.906-9.651-21.558-21.558-21.558h32.337
	C494.264,8.084,503.916,17.736,503.916,29.642z"/>
<path style="fill:#809DED;" d="M180.547,320.674H51.2V8.084h129.347V320.674z"/>
<path style="fill:#687B40;" d="M482.358,406.905H29.642c-11.906,0-21.558-9.651-21.558-21.558v-86.232h495.832v86.232
	C503.916,397.254,494.264,406.905,482.358,406.905z"/>
<path style="fill:#465123;" d="M503.916,299.116v86.232c0,11.906-9.651,21.558-21.558,21.558h-32.337
	c11.906,0,21.558-9.651,21.558-21.558v-86.232H503.916z"/>
<path style="fill:#AACE80;" d="M158.989,353.01L158.989,353.01c0,11.906-9.651,21.558-21.558,21.558H61.979
	c-11.906,0-21.558-9.651-21.558-21.558l0,0c0-11.906,9.651-21.558,21.558-21.558h75.453
	C149.338,331.453,158.989,341.104,158.989,353.01z"/>
<path style="fill:#FF6600;" d="M234.442,353.01c0,11.906-9.651,21.558-21.558,21.558s-21.558-9.651-21.558-21.558
	c0-11.906,9.651-21.558,21.558-21.558S234.442,341.104,234.442,353.01z M153.6,51.2H78.147c-2.976,0-5.389,2.413-5.389,5.389v32.337
	c0,2.976,2.413,5.389,5.389,5.389H153.6c2.976,0,5.389-2.413,5.389-5.389V56.589C158.989,53.613,156.576,51.2,153.6,51.2z"/>
<path style="fill:#5D7EAC;" d="M153.6,256H78.147c-2.976,0-5.389-2.413-5.389-5.389v-32.337c0-2.976,2.413-5.389,5.389-5.389H153.6
	c2.976,0,5.389,2.413,5.389,5.389v32.337C158.989,253.587,156.576,256,153.6,256z"/>
<path style="fill:#FFCB39;" d="M471.579,353.01c0,11.906-9.651,21.558-21.558,21.558c-11.906,0-21.558-9.651-21.558-21.558
	c0-11.906,9.651-21.558,21.558-21.558C461.927,331.453,471.579,341.104,471.579,353.01z M156.01,146.721l-37.726-18.863
	c-1.518-0.759-3.304-0.759-4.82,0l-37.726,18.863c-1.826,0.913-2.979,2.779-2.979,4.82v4.116c0,2.042,1.153,3.907,2.979,4.82
	l37.726,18.863c1.518,0.759,3.304,0.759,4.82,0l37.726-18.863c1.826-0.913,2.979-2.779,2.979-4.82v-4.116
	C158.989,149.5,157.836,147.634,156.01,146.721z"/>
<path style="fill:#CEDEEC;" d="M482.358,449.763v54.152H180.547v-54.152c0-19.04,12.49-35.826,30.726-41.297l77.063-23.119h86.232
	l77.063,23.119C469.868,413.937,482.358,430.723,482.358,449.763z"/>
<path style="fill:#ABC5FF;" d="M482.358,449.763v54.152H460.8v-63.822c0-12.132-4.308-23.483-11.659-32.375l2.49,0.747
	C469.868,413.937,482.358,430.723,482.358,449.763z"/>
<path style="fill:#D9B166;" d="M428.463,212.884l-13.121,85.287c-3.618,23.522-19.632,42.445-40.774,50.556v68.956h-86.232v-68.957
	c-21.142-8.111-37.155-27.035-40.774-50.557l-13.121-85.286H428.463z"/>
<path style="fill:#F5D472;" d="M329.863,353.01h-18.378c-31.921,0-59.068-23.289-63.921-54.839l-13.121-85.287h172.463
	l-13.121,85.287C388.93,329.722,361.784,353.01,329.863,353.01z"/>
<path style="fill:#BC8E50;" d="M247.563,298.17l-13.121-85.286h194.021l-13.121,85.286c-0.624,4.056-1.622,7.973-2.946,11.724
	h-22.584c-2.859,0-5.601-1.136-7.622-3.157l-9.103-9.103c-4.81-4.81-12.817-4.017-16.591,1.643l-8.285,12.428
	c-3.735,5.603-10.024,8.969-16.758,8.969l0,0c-6.735,0-13.023-3.365-16.758-8.969l-8.286-12.428
	c-3.773-5.66-11.78-6.452-16.591-1.643l-9.104,9.104c-2.021,2.021-4.763,3.157-7.622,3.157h-22.584
	C249.186,306.144,248.187,302.227,247.563,298.17z"/>
<path style="fill:#996633;" d="M428.463,212.884l-13.121,85.286c-0.624,4.056-1.622,7.973-2.946,11.724h-21.558
	c1.324-3.751,2.322-7.668,2.946-11.724l13.121-85.286H428.463z"/>
<path style="fill:#809DED;" d="M250.611,396.665l37.726-11.318h86.232l37.726,11.318v107.251H250.611V396.665z"/>
<path style="fill:#5D7EAC;" d="M412.295,396.665v107.251h-10.779h-5.389H250.611v-16.168h134.737
	c5.953,0,10.779-4.826,10.779-10.779v-85.154L412.295,396.665z"/>
<path style="fill:#FFCB39;" d="M439.242,219.199c0,8.418-6.825,15.244-15.244,15.244H238.907c-8.418,0-15.244-6.825-15.244-15.244
	c0-4.043,1.606-7.92,4.465-10.779l17.093-17.093l11.731-35.192c5.869-17.606,22.345-29.481,40.903-29.481h1.261
	c0-5.953,4.826-10.779,10.779-10.779h43.116c5.953,0,10.779,4.826,10.779,10.779h1.261c18.558,0,35.035,11.875,40.903,29.481
	l11.731,35.192l17.093,17.093C437.636,211.278,439.242,215.155,439.242,219.199z"/>
<path style="fill:#FFB933;" d="M417.684,191.326v21.558H288.337c-5.953,0-10.779-4.826-10.779-10.779s4.826-10.779,10.779-10.779
	h10.779v-64.674c0-5.953,4.826-10.779,10.779-10.779h43.116c5.953,0,10.779,4.826,10.779,10.779v64.674H417.684z"/>
<path style="fill:#FF9600;" d="M439.242,219.199c0,8.419-6.825,15.244-15.244,15.244h-21.558c8.418,0,15.244-6.825,15.244-15.244
	c0-4.043-1.606-7.92-4.465-10.779l-17.093-17.093l-11.731-35.192c-3.574-10.724-11.088-19.314-20.606-24.397v59.589h-21.558v-64.674
	c0-5.953-4.826-10.779-10.779-10.779h21.558c5.953,0,10.779,4.826,10.779,10.779h1.261c18.558,0,35.035,11.875,40.903,29.481
	l11.731,35.192l17.093,17.093C437.636,211.278,439.242,215.155,439.242,219.199z"/>
<path d="M169.768,414.989H29.642C13.297,414.989,0,401.691,0,385.347V29.642C0,13.298,13.297,0,29.642,0h43.116
	c4.465,0,8.084,3.618,8.084,8.084s-3.62,8.084-8.084,8.084H29.642c-7.43,0-13.474,6.044-13.474,13.474v261.389h196.716
	c4.465,0,8.084,3.618,8.084,8.084s-3.62,8.084-8.084,8.084H16.168v78.147c0,7.43,6.044,13.474,13.474,13.474h140.126
	c4.465,0,8.084,3.618,8.084,8.084S174.233,414.989,169.768,414.989z M167.074,56.589v8.084h272.168c4.465,0,8.084,3.618,8.084,8.084
	v86.232c0,4.466-3.62,8.084-8.084,8.084c-4.465,0-8.084-3.618-8.084-8.084V80.842H167.074v8.084c0,7.43-6.044,13.474-13.474,13.474
	h-29.642v19.257l35.668,17.834c4.594,2.295,7.448,6.914,7.448,12.051v4.118c0,5.137-2.854,9.756-7.45,12.052l-35.665,17.833V204.8
	H153.6c7.43,0,13.474,6.044,13.474,13.474v8.084h24.253c4.465,0,8.084,3.618,8.084,8.084s-3.62,8.084-8.084,8.084h-24.253v8.084
	c0,7.43-6.044,13.474-13.474,13.474H78.147c-7.43,0-13.474-6.044-13.474-13.474v-32.337c0-7.43,6.044-13.474,13.474-13.474h29.642
	v-19.257L72.122,167.71c-4.594-2.295-7.448-6.914-7.448-12.051v-4.118c0-5.137,2.854-9.756,7.45-12.052l35.665-17.833V102.4H78.147
	c-7.43,0-13.474-6.044-13.474-13.474V56.589c0-7.43,6.044-13.474,13.474-13.474H153.6C161.03,43.116,167.074,49.16,167.074,56.589z
	 M80.842,220.968v26.947h70.063v-26.947H80.842z M115.874,135.692l-35.032,17.516v0.786l35.032,17.516l35.032-17.516v-0.786
	L115.874,135.692z M150.905,59.284H80.842v26.947h35.032h35.032V59.284z M482.358,0H105.095c-4.465,0-8.084,3.618-8.084,8.084
	s3.62,8.084,8.084,8.084h377.263c7.43,0,13.474,6.044,13.474,13.474v261.389h-45.811c-4.465,0-8.084,3.618-8.084,8.084
	s3.62,8.084,8.084,8.084h45.811v78.147c0,4.796-2.584,9.271-6.742,11.676c-3.864,2.236-5.186,7.181-2.95,11.046
	c1.498,2.589,4.213,4.037,7.005,4.037c1.373,0,2.766-0.35,4.041-1.088c9.137-5.286,14.815-15.123,14.815-25.671V29.642
	C512,13.298,498.703,0,482.358,0z M490.442,449.764v43.372c0,10.401-8.463,18.863-18.863,18.863h-59.284
	c-4.465,0-8.084-3.618-8.084-8.084v-32.337c0-4.466,3.62-8.084,8.084-8.084c4.465,0,8.084,3.618,8.084,8.084v24.253h51.2
	c1.485,0,2.695-1.208,2.695-2.695v-43.372c0-15.59-10.033-29.075-24.965-33.555l-75.927-22.778h-83.859l-75.926,22.778
	c-14.932,4.48-24.965,17.965-24.965,33.555v43.372c0,1.486,1.209,2.695,2.695,2.695h51.2v-24.253c0-4.466,3.62-8.084,8.084-8.084
	c4.465,0,8.084,3.618,8.084,8.084v24.253h126.653c4.465,0,8.084,3.618,8.084,8.084s-3.62,8.084-8.084,8.084H191.326
	c-10.401,0-18.863-8.463-18.863-18.863v-43.372c0-22.786,14.664-42.494,36.488-49.041l71.302-21.391v-25.285
	c-5.782-2.748-11.217-6.264-16.143-10.489c-13.182-11.309-21.896-26.992-24.537-44.158l-8.985-58.407
	c-8.768-3.358-15.009-11.862-15.009-21.796c0-6.231,2.426-12.09,6.833-16.496l15.744-15.743l11.127-33.382
	c6.435-19.303,23.528-32.768,43.452-34.755c2.98-6.503,9.551-11.032,17.16-11.032h43.116c7.609,0,14.181,4.529,17.16,11.032
	c19.924,1.987,37.017,15.452,43.452,34.755l11.127,33.382l15.744,15.743c0,0.001,0,0.001,0,0.001
	c4.405,4.406,6.832,10.264,6.832,16.495c0,9.934-6.241,18.437-15.009,21.796l-8.985,58.407
	c-2.641,17.167-11.355,32.849-24.537,44.158c-4.926,4.226-10.361,7.743-16.143,10.489v25.285l71.302,21.391
	C475.778,407.271,490.442,426.979,490.442,449.764z M423.999,226.358c3.948,0,7.159-3.211,7.159-7.16
	c0-1.884-0.764-3.73-2.098-5.063l-17.092-17.091c-0.887-0.887-1.556-1.969-1.953-3.16l-11.731-35.192
	c-4.041-12.123-14.223-20.88-26.409-23.287v34.364c0,4.466-3.62,8.084-8.084,8.084c-4.465,0-8.084-3.618-8.084-8.084v-43.116
	c0-1.486-1.209-2.695-2.695-2.695h-43.116c-1.485,0-2.695,1.208-2.695,2.695v43.116c0,4.466-3.62,8.084-8.084,8.084
	s-8.084-3.618-8.084-8.084v-34.365c-12.187,2.407-22.37,11.164-26.411,23.287l-11.731,35.192c-0.397,1.19-1.066,2.272-1.953,3.16
	l-17.093,17.092c-1.352,1.352-2.097,3.15-2.097,5.062c0,3.948,3.211,7.16,7.159,7.16h185.091V226.358z M343.336,353.01
	c0-4.466,3.62-8.084,8.084-8.084c28.132,0,51.654-20.181,55.932-47.986l8.371-54.414H247.182l8.372,54.414
	c4.277,27.804,27.8,47.986,55.932,47.986h9.189c4.465,0,8.084,3.618,8.084,8.084c0,4.466-3.62,8.084-8.084,8.084h-9.189
	c-5.094,0-10.142-0.536-15.064-1.578v17.746h70.063v-17.746c-4.922,1.042-9.971,1.578-15.064,1.578
	C346.956,361.095,343.336,357.476,343.336,353.01z M450.021,323.368c16.345,0,29.642,13.298,29.642,29.642
	c0,16.344-13.297,29.642-29.642,29.642c-16.345,0-29.642-13.298-29.642-29.642C420.379,336.666,433.676,323.368,450.021,323.368z
	 M436.547,353.01c0,7.43,6.044,13.474,13.474,13.474s13.474-6.044,13.474-13.474s-6.044-13.474-13.474-13.474
	S436.547,345.581,436.547,353.01z M137.432,323.368c16.345,0,29.642,13.298,29.642,29.642c0,16.344-13.297,29.642-29.642,29.642
	H61.979c-16.345,0-29.642-13.298-29.642-29.642c0-16.344,13.297-29.642,29.642-29.642H137.432z M137.432,339.537H61.979
	c-7.43,0-13.474,6.044-13.474,13.474s6.044,13.474,13.474,13.474h75.453c7.43,0,13.474-6.044,13.474-13.474
	S144.862,339.537,137.432,339.537z M212.884,323.368c16.345,0,29.642,13.298,29.642,29.642c0,16.344-13.297,29.642-29.642,29.642
	s-29.642-13.298-29.642-29.642C183.242,336.666,196.539,323.368,212.884,323.368z M212.884,339.537
	c-7.43,0-13.474,6.044-13.474,13.474s6.044,13.474,13.474,13.474s13.474-6.044,13.474-13.474S220.314,339.537,212.884,339.537z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Which you can see has a lot of redundant group tags <g> in the end - it is not the only part which can be compressed, but this one is pretty good apparent example.

I tried different things:

• Tried to remove .cache folder and rerun
• Updated the imagemin.config.js to include almost all the rules present in the SVGO docs

...
svgo: {
    plugins: [
      { cleanupAttrs: true, },
      { inlineStyles: true, },
      { removeDoctype: true, },
      { removeXMLProcInst: true, },
      ...
   ]
}

• Tried to include the SVG through image tag, instead of using url() in SCSS files
• Tried specifying different paths for url() (either absolute or relative)

One thing I spotted, is that even though the .cache folder is removed manually (by me) before running the npm run build each time, the hash piece in the generated SVG name is the same af8baf9c - it should be stable like that between re-builds when the file is not changed?

[VitalyKrenel]

I'm running Windows 10 machine, but can try the plugin through Linux, if needed

[DeMoorJasper]

@VitalyKrenel Yes cache hashes should be stable. Ow you’re running windows it might be a windows only thing as tests are also failing on windows

[gouz]

Hi, I have the same problem on Win10, image (jpg, ...) are not minified :/ with gulp / gulp-imagemin : 256ko => 95 ko, but with your plugin, same size

I use yarn@berry version and the yarn run parcel build ... command

[Frnalex]

Hi ! I've got the same problem, did you fix it ? Doesn't work when I run the build command, and I had the config file in the root folder

[DeMoorJasper]

@Frnalex as stated I cannot reproduce it so I can't fix it. It's probably a windows issue and I don't have windows, so I can't fix it even if I wanted to.

I could setup an entire dev environment on a windows vm but that's quite a lot of work for something someone who actually uses windows can debug rather easily

[VitalyKrenel]

Hey @DeMoorJasper!

I may be able to help at these weekends. Kept this in mind when I reached you out but has been dealing with a lot of work recently, had a chance to get back to the issue.

[DeMoorJasper]

@VitalyKrenel awesome, let me know if you need any help

[krnlde]

Same issue here on Windows 10. If I can I'd like to help but I'm not really sure how. Is there console output to be expected from this plugin? I don't see anything. Is there a verbose mode? Also the imagemin.config.js seems to be ignored completely. I intentionally added a syntax error into it and there was no difference during the build.

I'm using these 3 plugins in conjunction with the build:

    "parcel-bundler": "1.12.4",
    "parcel-plugin-bundle-visualiser": "1.2.0",
    "parcel-plugin-compress": "2.0.2",
    "parcel-plugin-imagemin": "4.0.1",

[VitalyKrenel]

Hey!

Small update on the investigation, seems the issue is related to https://github.com/imagemin/imagemin/issues/352 (not very informative though).

While I was figuring out what's the problem with failing tests on Windows, I've spotted that in the imagemin within lib/assets/SvgAsset.js does not return an array of files back, but rather an empty array.

[VitalyKrenel]

@DeMoorJasper

After diving dipper I've found out the issue and it is related to the imagemin not handling Windows paths properly - it relies on the globby package, which expects forward slashes /, instead of the backward \ used by Windows.

I tried running the tests after replacing that package with the fixed version - tests are all green and the svgs are compressed correctly. 👍

I'll suggest the PR for imagemin repo and hopefully the author will consider it or provide another solution to the problem.

After that this issue may be closed.

[krnlde]

Thank you for your work and effort!

[DeMoorJasper]

@VitalyKrenel awesome work, thanks for looking into it :)

Flagged this issue as a non-parcel-imagemin-bug. Keep us posted once it's merged so I can update the dependency and so everyone receives the update automatically

[krnlde]

X-Ref: https://github.com/imagemin/imagemin/pull/358

[Sergio0831]

Same for me, images not compressed. In one project parcel-plugin-imagemin work fine, But another project wont work.

[Baregamyan]

I have the same problem on Ubuntu 20.04