-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Plugin to optimize embedded images ? #971
Comments
Just a user here. Images without transparency should be converted to JPGs, but the ones with transparency have to be converted by pngquant to PNG8. This may not be trivial as you would need to be able to tell one from the other and maybe provide options to control both compression levels. Would be very useful, though! |
Yeah, it would be nice, but it's a complex topic. There a lot of optimizers with different optimizations degree and execution time, also they're a hardly depend on image type (low-color graphics compress differently from photo-like, dealing with semitransparency has its own tricks, etc). Also, it would add extra dependencies, optimizers are binary, so you have to deal with different platforms, bloating dependencies even more, which I'd prefer to avoid, since far not everyone needs it. It more like a constructor for image optimization than a single format optimization like SVGO, so I believe it's out of SVGO's scope. |
jimp is a pure-javascript library that can do JPG. My intention is to just try some simple PNG -> JPG optimizer for my own SVG needs. Is it possible to make "external" plugins for SVGO or do plugins have to be hosted in this repository ? |
There is no special interface for external plugins, except you can pass functions within config object like {
"plugins": [
/* ... list of SVGO plugin options ... */
{
"mySpecialPlugin": {
"fn": function(data) { /* ... plugin body ... */ }
}
}
]
} |
Related to know where to NOT convert (if there is transparency): jimp-dev/jimp#271. By having a very cursory look at jimp, I can’t tell if it supports pngquant-like PNG8 with 8-bit transparency (PNG32 is too weighty, PNG8 with 1-bit transparency is useless). |
Hi, I created a new plugin to optimise png and jpeg embedded in the svg as base64. |
I went with my own solution (upstream of SVGO) and it works well for me too, but I'd still be interested in seing your solution (and even better if it comes included in SVGO), as a SVGO plugin would be cleaner. |
You can try it by using |
It seems that your solution relies on external non-JS software though, which I really want to avoid in my project. The ideal solution would be pure-js, but also synchronous so that it can be a SVGO plugin. So far I couldn't find any library that does that. |
There is no JS-based bitmap image optimizers I'm aware of. It's even doesn't make sense. It'd same as binary optimizers but with drawbacks. |
@Zulko : why do you want to avoid non-JS solution ? |
There is jimp, which is the solution I use in my project (see two messages above). It makes plenty of sense to have a pure-JS image library, it is more accessible (it doesn't complicate the installation of your JS project) and it can run in a web application. It's fast enough. |
There is no complication for installing imagemin, pngquant and jpegtran. |
@julienboulay I am making this project which, even though it is written in javascript and distributed via npm, is aimed at the general public (not just front-end specialists). I am trying to avoid any binary because these can cause platform-related problems (see for instance the imagemin issues page, but pngquant and jpegtran also have open installation issues) |
@Zulko, I understand, now, why you don't want external libraries. I had a look to jimp and it looks powerful. I can see that you use node-sass in your project, which depends on native libraries. |
I wonder if we could re-envision this as a command-line argument (or JS option) that will pipe embedded images to an external program (making the management of binary dependencies "somebody else's problem"). |
Also mozjpeg for JPEG files. Isn't there a framework for CLI/tools like SVGO that offers configurable piping or callbacks to Edit: After some thought it comes to mind that webpack actually solved this already: |
Apologies all, I know this isn't the best place for it -- but @julienboulay -- I tried to use your version today, but it fails on the I did install imagemin, pngquant, pngquant-bin, and jpegtran globally, and it looks like it's getting back the buffer of bytes from
It prints out a bunch of garbage characters to the console and fails with this message (garbage omitted):
|
Hi @BrainSlugs83 , Thank you for your post. I enabled issues on my repo, so you might be able to create new issues now. I think your issue comes from the installation process. The version of imagemin, pngquant, pngquant-bin jpegtran might not be the right versions required for this plugin. If you want to try with the right dependencies version :
|
@julienboulay wow, that worked great! So hard to find an SVG minimizer that also handles embedded images. It cut my SVG size in half with no visible loss in quality. |
It might even be worth converting, e.g., an embedded PNG → lossless WebP Btw, #1246 duplicates this? |
Thinking it over, SVGO could use some already known optimizers like pngout and mozjpeg. It could search them in standard places (platform-specific) and some side plugins could add formats and binaries. However, I don't think it's a good idea to add binaries to SVGO core or add extra dependencies to compile them on installation. |
A good case for external plugin actually. No support for async plugins though I remember somebody used atomics to make async code synchronous. |
Hi and thanks for a super-useful project. I have SVGs embedding PNG images (they are represented inline as base64 in the XML) and I want to convert them to JPG to reduce the size of my SVGs. It doesn't seem that thereis a plugin for this. Would you be interested by one ? has this been tried already ?
The text was updated successfully, but these errors were encountered: