![]() Gifsicle is good at creating and manipulating GIF animations. The -i option, for example, tells gifsicle to interlace its inputs: gifsicle -i interlaced-pic.gif Gifsicle normally processes input GIF files according to its command line options and writes the result to the standard output. Gifsicle is a powerful command-line program for creating, editing, manipulating, and getting information about GIF images and animations. Modify all frames of a GIF using specific transformation options: gifsicle -b -crop 50, 50+ -50x -50 -scale 0.25 -flip-horizontal -rotate-90 path/to/input.gif.Delete the first 10 frames and all frames after frame 20 from a GIF: gifsicle -b path/to/input.gif -delete '# 0-9' '# 20-'.Reduce file size using lossy compression: gifsicle -b path/to/input.gif -optimize=3 -lossy= 100 -colors= 16 -dither.Make a GIF animation from selected GIFs: gifsicle *.gif -delay= 10 -loop > path/to/output.gif.Extract a frame from a GIF: gifsicle path/to/input.gif '# 0' > path/to/firstframe.gif.Unoptimize a GIF in place: gifsicle -b path/to/input.gif -unoptimize.Optimize a GIF as a new file: gifsicle path/to/input.gif -optimize=3 -o path/to/output.gif.With these two methods combined, we can make use of GIFs in a way that doesn't degrade performance so drastically.Manipulates GIF images and animations Examples (TL DR) Using this on the GIF example from before, we go from a 11.4MB GIF to a 6MB GIF, a 47% reduction in the size! Finally, we define the path to the original GIF. The -o compressed.gif option specifies what the output GIF should be called. Depending on your needs, you can adjust this number. The -lossy=80 option specifies how much to apply lossy compression. The -03 option tells gifsicle to attempt several methods for optimisation to find the most suitable. To use giflossy to apply a lossy compression to a GIF image, we can use the following command - gifsicle -O3 -lossy=80 -o compressed.gif original.gif Gifsicle is a CLI for manipulating GIF image files, and giflossy is a fork of gifsicle which offers a lossy compression option ( -lossy). One popular tool for optimising GIFs is gifsicle and giflossy. There are a number of tools we can use for lossy GIF compression. Although this may sound like we will get visibly lower quality GIFs, lossy compression done well should not noticeably degrade the quality of the image. However, there are options for lossy compressions as well. So, there are some optimisations we can make to the GIF itself to make it more performant.Īs I mentioned, GIF compression algorithm is lossless. For example, when this blog post is delivered as an HTML email, an actual GIF has to be used. In some cases, because HTML5 Video doesn't work everywhere, we can't get around having to use an actual GIF. Or, if you use Cloudinary, you can just change the file extension from. To convert a GIF to WebM, we can use CloudConvert. This will give us a video that's much smaller in size, at only 1MB □□! To replace the GIF from the introduction to this article, we can use the following video element. poster: Specifies an image to be displayed while the video is downloading.playsinline : For iOS Safari, to make sure that the video is not moved to fullscreen mode.muted: Although there is no audio track on the GIF, stating this attribute is needed for iOS Safari to autoplay the video.autoplay: Immediately start playing the video without the user needing to press "play".Because of this, one solution to the GIF performance problem is to not use GIFs at all, and to replace them with autoplaying, looping, HTML5 Video.īy applying certain attributes to the element, we can simulate the behaviour of a GIF, but with a much smaller file size. Surprisingly, the lossless compression algorithm used on GIFs is so unoptimised that video formats such as MP4 or WebM will provide a smaller file size than GIF images. To solve the performance problem of GIFs on the web, there are a couple of things we can do. ![]() This means that, during compression, no information is lost in the image at all, which of course results in a larger file size. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. However, a problem with this is that GIFs are heavy, the one above is a whopping 11.4 MB □ (NB: not exactly the image above, I couldn't actually load that on a page). For example, this GIF from my article on "Recreating the iTunes Library". I like to use them in my articles to illustrate functionality.
0 Comments
Leave a Reply. |