Optimization of your images helps to ensure a better user experience and that meets users' expectations. But my curiosity has been satisfied, so I’ll leave it here.Images are crucial to ensuring that your content is more accessible, attractive, and engaging to users, but they're equally important in terms of SEO. There are still some noise in the final GIF image. The optimization script is not optimized at all and runs very slowly (about 10x slower, compared to FFmpeg), due to its inefficiency (both time and space). There are many places that can be improved further. I also got to publish a web-based GIF file inspector. This has been a fun project and I got to learn about how screen recordings are captured in Kap, how GIF files work and how they are compressed, and how to use the Jimp library to work with pixel data inside image files. It is written in JavaScript and uses the Jimp library to process the animation data.įinally, I performed a lossy optimization (using Gifsicle) and reduced the palette to 48 colors, resulting in the final 986 KB image. You can find the code that does this segmentation on GitHub. This is done for each pixel in the animation.Īs a result, there is substantially less noise. A new segment will be created when the new frame’s color exceeds the threshold (RGB-Euclidean distance ≥ 18, arbitrarily chosen) compared to the color of the frame at the beginning of the segment. The basic idea is that we identify the segments inside the animation, and for each segment, we assign a single color to be used for the duration of that segment. Kap uses FFmpeg’s default dithering algorithm, which is sierra2_4a. Dithering can also cause the pixel colors to change periodically. When a video file is converted to GIF, the color palette is reduced to 256 colors.The noise you see may therefore be the H264 compression artifact. The result is an H264 video, which is lossy. Kap uses aperture-node which in turn uses the AVFoundation framework to record the screen.I can think of two possible reasons this may happen: I picked a pixel (443, 234) and graphed its RGB values over time as it goes through the animation. While this helps make the GIF file look more pleasing, it causes the GIF file to include a lot of noise, resulting in large file size. Unchanged parts of the screen keeps getting repainted. There are usually only just a few changes from one frame to the next.Īs the GIF file inspector shows, the GIF file contains a lot of noise and dithering.Most of the time, the background is stationary.However, screen recordings have some important characteristics different from full-motion videos: What's so special about screen recordings?Ī lot of GIFs are created from full-motion videos, and that is what most articles about GIF file optimizations are about. Decoding of GIF image on the web is possible thanks to the gifuct-js library. It is a web application that displays the raw data of each GIF frame. This has inspired me to create a rudimentary GIF file inspector. ImageMagick's documentation has a chapter about studying GIF files and optimizing them. To fully exploit the characteristics of the input file, we must study the input itself, so that we know where to optimize. While this approach works most of the time, there is a ceiling to it. When it comes to optimizing GIF files, what most people do is trying out a bunch of parameters until a satisfactory result is obtained. This post outlines how I achieved this level of compression. …and here is the resulting file, 5 times smaller: No proprietary tools, but custom scripts are fine.Compression artifacts are okay as long as the result is readable.The image must look sharp on retina displays. Optimization is performed under these conditions: So I dived a bit into the world of GIF files and was able to reduce the file size down to 986 KB. Reduced the palette to 48 colors ( -colors 48), but it still results in a 2.2 MB file. I tried to optimize the GIF file using Gifsicle with heavy lossy compression ( gifsicle -lossy=200 -optimize=3), the file size is still 3.1 MB large. I know the GIF is long (40 seconds), but I’ve already reduced the frame rate to mere 8fps. For example, here is a GIF file recorded with Kap. When I record my screen and save it as GIF file, sometimes the file size is unsatisfyingly large.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |