With that observation, I'll end this blog post. Others have tested this too, finding pretty similar results to those that I've found here - though it does of course depend on your specific scenario. I suspect that this effect will stack the more frames you have. It's ~9.7% bigger in fact! Though not a crazy amount, smaller resulting files are always good. (Generated (and then extracted & edited with the Firefox developer tools) from Meta-Chart) Lastly, we probably want to delete the intermediate frames: rm -r. This is only a quick shell script after all :P This won't run in parallel unfortunately, but since it's only a few frames it shouldn't take too long to render. With the parameters set up (and a temporary directory created - note that you should use mktemp -d instead of the approach I've taken here!), we can then use a for loop to repeatedly call ImageMagick to crop the input image to generate our frames. Perhaps in the future I'll come back and improve it if I find myself needing it again for some other purpose. It's worth noting here that it's probably a good idea to implement a proper CLI to this script at this point, but since it's currently only a one-off script I didn't bother. The ending position to pan to on the y axis The ending position to pan to on the x axis The starting position to pan from on the y axis The starting position to pan from on the x axis The number of frames (plus 1) to generate Firstly, I defined a bunch of variables: #!/usr/bin/env bash I wrote a quick shell script for this purpose. The first task is to generate the frames from the original image. It isn't available on the original source website anymore (and I've lost the link), but can still be found on various wallpaper websites.)
Gifsicle with png download#
(Credit: The background on the download page for Mozilla's Firefox Nightly builds. For my test, I took an image and created a 'panning' animation from one side of it to the other. Traditional animated GIFs (Graphics Interchange Format for the curious) are limited to 256 colours, have limited transparency support (a pixel is either transparent, or it isn't - there's no translucency support), and don't compress terribly well.Īnimated PNGs (Portable Network Graphics), on the other hand, let you enjoy all the features of a regular PNG (as many colours as you want, translucent pixels, etc.) while also supporting animation, and compressing better as well! Best of all, if a browser doesn't support the animated PNG standard, they will just see and render the first frame as a regular PNG and silently ignore the rest. I ended up re-discovering it a few weeks ago (also through !), and since browser support is so much better now I decided that I just had to play around with it. I stumbled across the concept of an animated PNG a number of years ago (on actually if I remember right!), but at the time browser support was very bad (read: non-existent :P) - so I moved on to other things. This reduced my animation down to 27kB! Job done.I recently discovered that Animated PNGs are now supported by most major browsers: It works in a pipeline so you have to call it like this: gifsicle -O3 compressed.gif On my system it took 0.04s, time well spent! It has 3 levels: the man page warns you that the third, most aggressive option might take more time.
One of the things it can do is optimise animations. A tiny program which does things flexibly.
Reducing filesize with gifsicleĪvailable from Debian/Ubuntu standard repositories, gifsicle is a brilliant example of what makes GNU/Linux so great. I removed the GIF comment (every byte counts!) and set the default frame delay.
The next dialog box offers various other options. gif A pop-up includes the option " Save as Animation", tick this. To do this I changed the layer name to include (1400ms) so the layer was now called background (1400ms) - you can do this for any of the layers, but all the others I wanted to share the default.Ĭreating the animated GIF is the easiest bit. I wanted the first frame to linger longer than the others. The first frame becomes the 'background' layer, with the other frames on top. from the File menu, and selected all the frames (in order). To do this I started Gimp, then chose Open As Layers. Next I imported the frames into Gimp (Gimp is available for Windows, too). So then I Exported the page, frame by frame to frame-1.png, frame-2.png. Obviously this is only useful for very simple animations, but I needed to keep changes between frames to a minimum to keep the file size down anyway. Each frame was a different layer I could turn off and on layers one at a time to edit the separate frames. I designed the animation in my favourite vector drawing package, Inkscape.
Animated GIFs are a 90s hangover that will not go away! I was asked to make an animated banner 728×90 at under 50kB.
0 kommentar(er)
