![]() ![]() I ended up rewriting this gist's functionality into screengif, a ruby script with significant quality improvements and a few gratuitous features. Open /usr/local/Cellar/x-quartz/2.7.4/XQuartz.pkg # runs the XQuartz installer (YOU NEED TO UPDATE THE PATH) If you use homebrew and homebrew-cask software packages, just type this in: brew install ffmpegīrew cask install xquartz #dependency for gifsicle, only required for mountain-lion and above gifsicle to create and optimize the an animated gif.The conversion process requires the following command-line tools: To share the new GIF using Dropbox and Copy Public URL, run the following: cp out.gif ~/Dropbox/Public/screenshots/Screencast-`date +"%Y.%m.%d-%H.%M"`.gif -optimize=3 requests that gifsicle use the slowest/most file-size optimization.-delay=3 tells gifsicle to delay 30ms between each gif.-s 600x400 tells ffmpeg the max-width and max-height. ![]() ![]() -r 10 tells ffmpeg to reduce the frame rate from 25 fps to 10.To convert in.mov into out.gif (filesize: 48KB), open Terminal to the folder with in.mov and run the following command: ffmpeg -i in.mov -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle -optimize=3 -delay=3 > out.gif Saved the video in full quality with the filename in.mov.Selected screen portion by dragging a rectangle, recorded 13 second video.To capture the video (filesize: 19MB), using the free "QuickTime Player" application: This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle. url ) // It works with the `preset` query parameter const myImage4 = new URL ( "image.png?as=webp&w=150&h=120", import. url ) // You can omit one of the parameters to auto-scale const myImage3 = new URL ( "image.png?w=150", import. url ) const myImage2 = new URL ( "image.png?w=150&h=120", import. height/ h - allows you to set the image heightĮxamples: const myImage1 = new URL ( "image.png?width=150&height=120", import.width/ w - allows you to set the image width.The plugin supports the following query parameters: Query Parameters (only squoosh and sharp currently) data:) will be optimized or generated too, not inlined images will be optimized too. Loader optimizes or generates images using options, so inlined images via data URI (i.e. If you want to use loader or plugin standalone see sections below, but this is not recommended.īy default, plugin configures loader (please use the loader option if you want to disable this behaviour), therefore you should not setup standalone loader when you use a plugin setup. Minimizer : [ ".", new ImageMinimizerPlugin ( Advanced setup const ImageMinimizerPlugin = require ( "image-minimizer-webpack-plugin" ) Recommended imagemin plugins for lossy optimization npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -save-devįor imagemin-svgo v9.0.0+ need use svgo configuration Recommended imagemin plugins for lossless optimization npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -save-dev imagemin-svgo can be configured in lossless and lossy mode.Įxplore the options to get the best result for you.imagemin-mozjpeg can be configured in lossless and lossy mode.Npm install image-minimizer-webpack-plugin svgo -save-dev Npm install image-minimizer-webpack-plugin sharp -save-dev Npm install image-minimizer-webpack-plugin -save-dev Imagemin uses plugin to optimize/generate images, so you need to install them too Npm install image-minimizer-webpack-plugin imagemin -save-dev To begin, you'll need to install image-minimizer-webpack-plugin and image minimizer/generator: Supports only SVG files minification.īy default we don't install anything Install optimize/generate tool svgo - tool for optimizing SVG vector graphics files.sharp - High performance Node.js image processing, the fastest module to resize and compress JPEG, PNG, WebP, AVIF and TIFF images.squoosh - while working in experimental mode with.imagemin - optimize your images by default, since it is stable and works with all types of images.This plugin can use 4 tools to optimize/generate images: Generate webp images from copied assets.Generator example for user defined implementation.Single minimizer example for user defined implementation.Query Parameters (only squoosh and sharp currently).Plugin and Loader for webpack to optimize (compress) all images using imagemin.ĭo not worry about size of images, now they are always optimized/compressed. ![]()
0 Comments
Leave a Reply. |