how to make compact and beautiful GIFs for bug reports

I use Gifox for bug reports while working on my KeyKey and Focusito apps. If something does not go according to plan, I fix the error in the form of an animated picture, describe the bug in text and tell how everything should actually work.

Less often – I use Gifox to create animated images for my blog.

Capturing an image

Gifox can capture a specific area of ​​the screen or a specific window. Moreover, for the window, you can turn off the capture of the shadow, which is very convenient, and for the screen area – the background image of the desktop. All this has a positive effect on the size of the final file.

Gifox supports Dropbox, Google Drive and Imgur, if suddenly it’s more convenient for you to share not a file, but a link

You can start and stop recording through the interface or using shortcuts.
CmdShift6 – capture an area of ​​the screen;
CmdShift7 – capture the window;
Space – start recording;
Esc – stop recording.

After the recording is finished, Gifox creates a GIF and saves it to the folder Documents… If you are a Dropbox user, then after recording a GIF, you can also record the cloud. But for some reason, the shortcut cannot be configured for this action.

Gifox for Mac: how to make compact and beautiful GIFs for bug reports
Gifox supports Dropbox, Google Drive and Imgur, if suddenly it’s more convenient for you to share not a file, but a link

GIF quality setting

By default, Gifox balances the size of the final file with the image quality. But GIFs are capricious and the optimal result always depends on the initial image that you want to record. Therefore, you should immediately understand the settings, especially if you are going to use GIFs in some publications.

There are four parameters that affect picture quality and size:

  1. Frames per second;
  2. The number of colors in the frame;
  3. Dithering;
  4. Palette.

To demonstrate the interface, 10-15 frames per second are enough. By default, Gifox makes videos with 17 frames, so the number of frames in the settings can be omitted. I dropped it to 15. If you do not need to demonstrate the smoothness of the interface, then the number of frames can be reduced to 10.

The maximum number of colors in a GIF is 256. The default is 192, but I often lower this value to 128. With dithering, this number of colors is often enough to make the picture look more or less sane.

Dithering is an algorithm that gives the illusion of color depth with a limited palette. For example, to get a purple color that is missing from the palette, you can checkerboard pixels of red and blue colors.

Gifox has four dithering algorithms: Bayer, Floyd-Stainberg, Sierra Lite, Two-Row Sierra. By default, Bayer is installed with the parameter “three” dither matrix size (Scale 3). I ran small tests on my pictures and did not notice much difference in quality between Scale 3-4-5, because for myself I stopped at Scale 4… With this parameter, oddly enough, the final file weighs about 10% less. The rest of the algorithms produced artifacts in the image, so I don’t use them to demonstrate interfaces.

Gifox for Mac: how to make compact and beautiful GIFs for bug reports
Example GIF’ki. 192 colors, 17 fps, Bayer 4 dithering. Before compression, the file was 580 KB, after compression with Optimage – 429 KB

The palette of colors for GIFs can be global for all frames or unique for each time. In Gifox this parameter can be Global or Per-frame… With the latter, the picture will be of the best quality, but the file size is immediately increased by five or more times. Therefore, I always use Global

As a result, my initial parameters look like this:

Gifox for Mac: how to make compact and beautiful GIFs for bug reports
My default GIF quality settings. If the file is too large, then I reduce the number of colors and frames

If you need to make the picture as small as possible, reduce the number of frames and the number of colors. If even less, disable dithering. Without it, the picture will seem rough, but it may become smaller in size.

Built-in editor

When capturing an image, Gifox always keeps the original. This means that at any time you can correct the video: trim the awkward beginning and end, and then save it as a GIF with unique parameters.

The built-in editor makes life a lot easier.

Gifox for Mac: how to make compact and beautiful GIFs for bug reports
Using the built-in editor, you can shorten the clip and change the export parameters

If you need more freedom in post-processing the final file, then look towards an alternative – GIF Brewery. This program is geared towards converting videos to GIF. The program can crop and resize the video in pixels, adjust the delays between frames.

GIF Brewery – make animated gifs on Mac

He told me how I make animated gifs to illustrate articles.

🍀 Remember

  1. My favorite settings for demo interfaces: 15 frames per second, 192 colors, dither Bayer scale 4;
  2. If you need to make the GIF smaller, reduce the number of colors and frames. As a last resort, disable dithering;
  3. Use the built-in reactor to cut off extra seconds at the very beginning and end of the recording. This will make the picture even lighter;
  4. Any record can always be re-saved with new parameters.

👉 Gifox: buy for $ 14.99 / 7 days free on Setapp


GIFs in small quantities are good for posts and different publications. But they can also dramatically increase the megabyte size of your article, which search engines won’t like. Personally, I ditched GIFs in favor of video screenshots. They are smaller in size, and the picture quality is much higher.

The key element in my video screenshots system is the Optimage converter. For the very same video recording, a standard QuickTime player with its capture function is suitable. If on the video you need to beautifully demonstrate the cursor, then for this I use Cursor Pro.

Optimage. How I compress PNG, JPEG, and MP4 files for a blog

Google and Yandex love web pages that load quickly and move them up in the SERPs. Therefore, I additionally process and compress all illustrations and videos for the blog. Now the Optimage utility is responsible for all this optimization.

Leave a Reply

Your email address will not be published.


*