![]() ![]() Argument bi can be omitted and will default to +b (BLEND). webp image /*FRAME_OPTIONS -file_i +di]] e.g -frame one.webp +100 -frame two.webp +100+50+50 -frame three.webp +100+50+50+1+b Where: file_i is the i'th frame (WebP format), xi,yi specify the image offset for this frame, di is the pause duration before next frame, mi is the dispose method for this frame (0 for NONE or 1 for BACKGROUND) and bi is the blending method for this frame (+b for BLEND or -b for NO_BLEND). .//pass input images(.webp image) path with FRAME_OPTIONS, as array,ouput image will be animated. Loop, // animations loop forever, default mixed: true, // allow mixture of lossy and lossless animation frames (slow), little effect on size minSize: true, // prevent use of animation key frames to minimise file size (slow), little effect on size Loop: 0, // animations loop forever, default gif file extenstionĬonst converted = await pMap(files, async fileName => = imageMetaĮffort: 4, // 0-6, effort 6 takes a very long time just to save a little bit of space includes(file.split('.').pop().toLowerCase()) // only pass through files with. Path.extname(file) != '' & // files with no extension import Path from 'node:path'Ĭonst sourceDir = Path.resolve('./source')Ĭonst destiantionDir = Path.resolve('./destination')Ĭonst files = (await Fs.readdir(sourceDir))įile => !file.startsWith('.') & // filter out hidden files (beginning with. How to resize an animated GIF or WebPĬreate an index.js file in the project folder in your favorite code editor (VSCode, Vim, etc) or IDE (WebStorm, PHPStorm, etc). mnkdir optmizing-animated-gifsĭownload some example animated GIFs from the Internet to the source folder inside the project. Initiate a new Node.js project, add and install sharp as a dependency and create a source folder inside the project folder. In this post we’ll be using Node.js with the excellent and very performant Sharp module to resize animated GIFs and also convert them to WebP. There’s lots of ways to resize and convert images, online-converters, dedicated software, 3rd-party services etc. How to optimize animated GIFs using Node.js Resizing the images to an optimal size can reduce the file size somewhat, as each frame, tens of them, becomes smaller.Ī couple of percent reduction for each frame quickly adds up to some nice file size savings.Ĭonverting them to more modern file formats, better suited for complex images, like WebP, can reduce the file size by as much as 70-90%, for example a GIF at around 2 MB can be reduced to a 200 KB WebP file.īrowser support for WebP is at over 95%, all modern browsers have supported it for several years. ![]() ![]() Small file size reductions multiplied millions or billions of times quickly adds up and makes a real difference. They’re used very frivolously in Slack, Facebook, Instagram and webpages, causing tens of megabytes to be downloaded millions of times.Ī lot of bandwidth, storage and the electricity to transfer all those images across the world can be reduced,m by making the size of animated GIFs smaller. In this day and age, animated GIFs are often used for memes and animated reactions in messaging platforms and software, often for complex images like photos.Īn animated GIF can contain tens of frames, each is an image taking up several hundred kilobytes, which makes the total size up to several megabytes. Patents have long since expired making it free to use. GIFs are suitable for simple sharp lined logos with few colors (up to 256), that’s where they shine with small file size and simplicity. It supports up to 256 colors and multiple images with delays between them, e.g. The Graphics Interchange Format, or GIF for short, was created in 1987 which is 35 years ago (2022). Resize and convert animated GIF and WebP images using Sharp in Node.js | Robert Michalskis Blog Robert Michalskis Blog/ Resize and convert animated GIF and WebP images using Sharp in Node.js What is an animated GIF? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |