If you use one of these build tools, checkout the codelabs for Imagemin with webpack, gulp, or grunt. To compress the images in the "images/" directory and save them to the same directory, run the following command (overwrites the original files): $ imagemin images/* -out-dir =images Imagemin npm module # Imagemin uses the appropriate plugin based on the image format of the input. The Imagemin CLI works with 5 different plugins: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant, and imagemin-svgo. Image Format Lossy Plugin(s) Lossless Plugin(s) JPEG imagemin-mozjpeg imagemin-jpegtran PNG imagemin-pngquant imagemin-optipng GIF imagemin-giflossy imagemin-gifsicle SVG Imagemin-svgo WebP imagemin-webp Imagemin CLI # These aren't the only plugins available, but they'd all be good choices for your project. The table below lists popular Imagemin plugins. They offer significantly greater filesize savings, and you can customize the compression levels to meet your needs. If a plugin doesn't mention whether it is "lossy" or "lossless," you can tell by its API: if you can specify the image quality of the output, then it is "lossy."įor most people, lossy plugins are the best choice. Lossy compression reduces file size, but at the expense of possibly reducing image quality. The most important thing to consider when choosing a plugin is whether it is "lossy" or "lossless." In lossless compression, no data is lost. Popular image formats may have multiple plugins to pick from. Imagemin is built around "plugins." A plugin is an npm package that compresses a particular image format (e.g. Generally, the npm module is the best choice because it offers more configuration options, but the CLI can be a decent alternative if you want to try Imagemin without touching any code. Imagemin is available as both a CLI and an npm module. Imagemin is an excellent choice for image compression because it supports a wide variety of image formats and is easily integrated with build scripts and build tools. Unfortunately, there's not a lot you can do about that, except to choose a more suitable background or to re-render the animation.Lighthouse currently reports on opportunities to compress images in JPEG format only. Don't log the number of images that have been minified. This is OK as long as the background you're showing the animation on isn't too far from the original background color, but if it is, you may find that there will be some ugly color fringing around the edges of the animation. Enabling this will log info on every image passed to gulp-imagemin: gulp-imagemin: image1.png (already optimized) gulp-imagemin: image2.png (saved 91 B - 0.4) silent. You can't actually tell the difference by eye (or, at least, I can't do that on this screen), but it's enough to make GIFsicle consider the two colors different.Īlso note that GIF files only support 1-bit transparency, which means that the edges of the transparent regions will not be anti-aliased.
very slightly yellow-greenish white) rather than #ffffff (pure white). For example, for the animation shown above, the actual background color turned out to be #fdfffc (i.e. One detail worth noting is that, if the GIFsicle command doesn't seem to have any effect, you should check that the background color is really correct. Original animation by Wikimedia Commons user WillowW, used under the CC-By 3.0 license. The -O2 option is not strictly necessary, but it's likely to shrink the file size of the resulting animation by optimizing the frames to avoid needlessly re-drawing static parts of the animation.)įor a demostration, here's an animation of the human glyoxalase I (GLO1) enzyme from Wikimedia Commons (left), and the same animation with transparency added using the method shown above (right): This allows extra transparency to be added to the frames without letting the earlier frames show through the transparent parts. (The important options here are -U / -unoptimize and -disposal=previous, which together convert the animation into "flipbook mode", where each frame is fully erased before drawing the next one.
Gifsicle jpg code#
Where anim.gif and anim_trans.gif are the source and destination file names, and #ffffff is the hex code of the color you want to make transparent (here, pure white). You can do this with GIFsicle, using the following options: gifsicle -U -disposal=previous -transparent=" #ffffff" -O2 anim.gif > anim_trans.gif
0 kommentar(er)
