3 ms·

A bit of "self promotion" here, but I was annoyed with optimizing images manually, so I wrote a plugin for webpack that does it for me. It allows you to use an

A bit of "self promotion" here, but I was annoyed with optimizing images manually, so I wrote a plugin for webpack that does it for me. It allows you to use any imagemin plugins you want, which have wrappers for most image compressors out there. And since it runs every "production build" you can commit your unoptimized images to your repo. https://github.com/Klathmon/imagemin-webpack-plugin https://github.com/Klathmon/imagemin-webpack-plugin

nabeards 9y ago
Couldn't tell from the readme, apologies if I missed it, but: does the optimization happen if the optimized files are already present?
- Klathmon 9y ago
  Kind of... In the beta there is a "cache" option, and if an image exists in the cache it will just use that. However since I use the webpack asset system I can't easily (or safely) check the output to see if it exists (because using the asset system, other plugins could completely change, rename, combine, or delete files after my plugin runs, so trying to detect those files could break things for a lot of users). 1.6 should be promoted to "stable" soon. I only put it in beta since I won't be able to completely test it till Monday. (I also screwed up and merged it into master before I realized I wouldn't be able to do the release untill Monday, so the master Readme has options that won't work in version 1.5)
  - nabeards 9y ago
    Ok good to know. Will give it a try in a project I'm working on. Thanks!
spookyuser 9y ago
Hey thanks, I used this recently with responsive-loader and it worked great, although responsive-loader was a little finicky to get working!
- Klathmon 9y ago
  That's actually why I created it in the first place! I no longer use responsive loader any more (fully offline web application, so the responsive images just weren't worth the extra complexity at that point), but it does work wonderfully once you wrangle it under control.
  - spookyuser 9y ago
    Yeah it does. But you're totally right about the complexity. Figuring out the right values to generate the srcset at felt insanely complicated for what you get out of it in data saving, but images were so blurry on chrome when downscaling them even a little bit that srcset almost seemed mandatory :(

nabeards 9y ago

Couldn't tell from the readme, apologies if I missed it, but: does the optimization happen if the optimized files are already present?

Klathmon 9y ago
Kind of... In the beta there is a "cache" option, and if an image exists in the cache it will just use that. However since I use the webpack asset system I can't easily (or safely) check the output to see if it exists (because using the asset system, other plugins could completely change, rename, combine, or delete files after my plugin runs, so trying to detect those files could break things for a lot of users). 1.6 should be promoted to "stable" soon. I only put it in beta since I won't be able to completely test it till Monday. (I also screwed up and merged it into master before I realized I wouldn't be able to do the release untill Monday, so the master Readme has options that won't work in version 1.5)
- nabeards 9y ago
  Ok good to know. Will give it a try in a project I'm working on. Thanks!

spookyuser 9y ago

Hey thanks, I used this recently with responsive-loader and it worked great, although responsive-loader was a little finicky to get working!

Klathmon 9y ago
That's actually why I created it in the first place! I no longer use responsive loader any more (fully offline web application, so the responsive images just weren't worth the extra complexity at that point), but it does work wonderfully once you wrangle it under control.
- spookyuser 9y ago
  Yeah it does. But you're totally right about the complexity. Figuring out the right values to generate the srcset at felt insanely complicated for what you get out of it in data saving, but images were so blurry on chrome when downscaling them even a little bit that srcset almost seemed mandatory :(