Menu
homeMicrosoft

How to reduce gif animation without losing quality. Free online services for image compression

At InVision, GIF animations are not used for pampering - they play an important role from a marketing and training point of view. So we even tried using them on our homepage instead of coded animations.

Eventually people started asking us, “How do you create GIF animations?” It's time to reveal the secret.

GIF image design

1. Secret ingredient

Here's my little secret: all my GIF animations started out as video files. I usually use ScreenFlow, which I also use to create videos of our products. This is a simple program that at the same time contains many useful animation tools.
After I save the animation as a video file, I import it into Photoshop via File > Import > Video Frames As Layers.

Advice: If ScreenFlow or After Effects aren't your thing, create an animation in Keynote and export it as a video. Finally some use of this feature in Keynote.

2. Less colors = more fun

If you want to make cool GIF animations, then you need to approach the choice of color with special care. This will not only affect the file size, but will also allow you to create longer animations with a smaller file size. (For me small is less than 1MB)

3. Use motion blur if possible

Programs like ScreenFlow and After Effects allow you to export video with motion blur applied. Not only will this give your animation a professional look, but it will also make it easier to reduce the file size in Photoshop.

4. Be (somewhat) lazy

Imagine what other elements I could add to the GIF animation at the beginning of this post. Small tooltips with user names, a cursor clicking on the plus button, and so on. People don't need to see it all to get a general understanding of what they're seeing, so only show what you need - you're limited by time and file size.

Export GIF animations

Before you worry about the tips below, try exporting your GIF animation. If it's a reasonable size, great job! Continue in the same spirit. Otherwise, try the following methods.

5. Remove duplicate frames

Most likely your animation stops or remains motionless for some point in time. If you look closely, you will notice that this moment consists of several identical frames. If there are 10 such frames, then delete 9 of them and set the duration of the remaining frame to, for example, 1 second.

If that doesn't help, try importing the video again, but this time select the option Limit To Every 2 Frames. This should reduce the file size significantly.

Advice: If your animation consists of more than 150 frames, you will encounter problems when trying to reduce the file size.

6. Fewer colors

When you save a GIF animation in Photoshop, you will see a drop-down menu next to the Colors option. Experiment with the values, try the smallest possible number of colors that will not turn the entire file into garbage.

7. Change the Lossy* parameter

To be honest, I don't even know what this parameter means. But I exactly I know that if you set it at a level between 1 and 10, you will get rid of extra kilobytes without losing quality.

* “Lossy” - acceptable level of loss of graphic information in a raster file, allowing you to reduce the file size of the image

Nothing changed! Help!

If you've tried everything mentioned above and still can't reduce the size of your GIF animation, then you need to take a step back. Maybe you want the impossible? Is there another way to achieve what you want? Is it possible to split a file into two GIF animations? It will be better if your GIF animation focuses on one aspect.

From the translator. With all your wishes and comments regarding the translation, please contact me in a personal message. Thank you!

Regardless of how you got your GIF animation, you can reduce its size.

If you have used our service for creating GIF animation from a video, then we recommend using the original for experiments, because how each conversion can degrade the quality of the resulting file.

All examples will be based on a short clip of FullHD video of 16 seconds and 30 frames per second.

A little theory about GIF

In short: GIF is a maximum of 256 colors (8 bits) + lossless compression (LZW).
Like any lossless compression, it doesn't compress the file too much. As a result, we will reduce the size by no more than 50% (very much depends on the image).

Test video:

We calculate the size of one frame: 1920 * 1080 * 40%-100% = 0.8-2 MB.

Now let’s calculate for 16 seconds of video: 16 sec * 30 frames per second * (0.8-2) mb = 384-960 mb!
Our original file when converted turned out to be 309 MB. Less than calculated, but still big.
Are you surprised? But the size of the original video is only a few megabytes! How can this be?
It’s simple: GIF is a mammoth, yes, it’s cool, but you need to know how to work with it.

Step 1: Make the GIF smaller. Image Size

Be sure to reduce the size to an adequate size (no more than 640 pixels on the larger side).
In this case the size will be: 640 * 360 * 40%-100% = 90-225 kb.
And video size: 16 sec * 30 frames * 90-225 kb = 42-105 mb.
Our original file when converted turned out to be 38MB. Less than calculated, but still big.
A lot of? Yes. Go ahead...

Step 2. Number of frames

30 frames is cool, but unfortunately for a GIF it is a lot.
Reduce the number to 10 frames and you reduce the size by 3! times.
We count: 16 sec * 10 frames * 90-255kb = 14-35 mb.

Our original file when converted turned out to be 14.5 MB. Already better.

For example, if your video is 60 frames per second, you can reduce from the following range: 1, 2, 3, 4, 5, 6, 10, 15, 20, 30.
And if there are 25 frames, then the row will be: 1, 5...
Or 30: 1, 2, 3, 6, 10, 15.

Step 3: Decrease the duration of the animation

Reduce/delete scenes you don’t need, the relationship here is simple - cut it by 2 times - you get a size 2 times smaller.

Step 4. Optimize GIF. Choice of quality.

There are special utilities for compressing GIF animations, for example, GIFsicle.

We made it online especially for you. Just select your file and click optimize.

You can also control the quality of the file.

We've made three different versions of the GIF animation for you to evaluate compression using downscaling:

  • Size at 100% quality: 13.3 MB
  • Size at 50% quality: 13.3 MB
  • Size at 0% quality: 10.1 MB

    Pictures in GIF format can be easily opened in the Photoshop graphics editor; if you can use it, it will not be difficult to change the size. And for those who cannot use this editor, it will not be difficult to figure it out; in the menu there is a section Image -> Image Size.

    The easiest way to change the size is using the free InfranView program. It is simple, intuitive, and you can work not only with gif animation, but also with any pictures.

    You can try using Paint Shop Pro, it is more complicated, you will have to go through a whole manual - the user manual.

    To begin with, it would be nice to know what size you want to change in the gif animation? Image size (that is, aspect ratio, width or height of the picture, etc.), or file size (sometimes they also say the weight or volume of the file) in bytes - megabytes, such as - reduce the amount of information contained in the GIF animation graphic file , with minimal loss of image quality? In other words, optimize the gif file...

    There are no special problems to change the actual size of the picture (width and height) in an animated .gif file.

    I'll start with the simplest method, for those who do not want to install additional programs on their computer. This is a way to use the services of specialized online services, of which there are plenty on the Internet. Here are some links to similar sites:

    Creating and editing GIF animation - Toolson.net.GifResizer

    Create and retouch animated GIF images online - Reduction-image.gif-anime

    Create or edit GIF animation online - Picasion.com.resize-gif

    Similar sites where you can create and partially edit gif animation, there are many, but the range of services and functionality provided there, on all sites, is very small and almost the same. Working there is not at all difficult - upload your own GIF animation and consistently perform a series of very simple actions. How and what to do - everything is described step by step. Make no mistake.

    The second way to change the size (aspect ratio) of a GIF animation is to use the simplest programs that are created specifically for this purpose, for example:

    Free program GiF Resizer- the name speaks for itself. The only purpose of this very small utility is to resize animated pictures in .gif format. This program is in English, but understanding its capabilities is very simple.

    Another program, also free - Beneton Movie GIF. In this program, you can resize your GIF animation in a couple of simple steps. Also in this editor you can perform some additional actions to change animated GIFs.

    More complex procedures for editing GIF animations will require the use of more advanced programs that will help perform both simple resizing of the image and its cropping, as well as optimization of the GIF file, that is, reducing its volume while maintaining the high quality of the image itself when viewed.

    There are also a lot of such programs, for example:

    GIF Movie Gear- a simple but quite powerful GIF animation editor.

    Falco GIF Animator- a free GIF animation editor, but with very decent capabilities, no worse than similar licensed analogues.

    Easy GIF Animator- an easy-to-use animated GIF editor with decent features.

    EximiousSoft GIF Creator- a very good animated graphics editor, with almost professional capabilities.

    GIF Construction Set Professional- one of the best programs for creating and editing animated GIF images. Professional program. But it's not at all difficult to use. E is quite difficult to find on the Internet, especially in the latest version, especially with a localization, so in addition to the link to the official website I will give two more links - for downloading from torrent tracker NNM-CLUB(here is a version without plugins), and to download a more complete version, with many necessary additions - GIF Construction Set Pro v3.0a (Patch 40).

    The links listed above lead to the developers’ websites, where you can also purchase these programs... or you can take advantage of the capabilities of the Russian Internet, where you can still find and download any of these programs without much difficulty with the possibility of free activation :)))

    At all - gif animation optimization- this is a separate topic. Automatic optimization usually does not bring tangible results, and the image quality may be greatly reduced.

    Perform high-quality optimization of GIFs perhaps only in one program, which is definitely worth mentioning in this question - almost any manipulation with GIF images, from their creation to complete editing, can be done in the best graphics editor of all times - in Adobe Photoshop. In this program you can do anything you can think of with GIFs...

    In general, something like this, in my opinion :)))

    Good luck to you...

    The size of animation in GIF format can be changed using a special program Toolson.net.GifResizer.

    With the help of the program you can change, increase, decrease the size of GIF.

    You can view the program and download it here.

    Now gif files are quite popular and widespread, so many programs have the ability to process them, including changing the file size of this format, playback speed, and trimming. One of these programs is the well-known Photoshop; it can easily help you edit a GIF.

    The size of an image in GIF format can be changed using special online and regular programs that need to be installed, as well as using Photoshop. The image needs to be opened in Photoshop, and then reduced in size in the Image Size dialog box by opening the Image menu.

In the official Russian-language versions of Photoshop since time immemorial, the “Dithering” option has been translated as “Dithering,” which is, to put it mildly, an inaccuracy. In this context, "Dithering" means "smoothing", smoothing the transitions from one color to another.
Because GIFs contain a limited number of colors, to enhance the appearance of your drawing, you may need to create transitions between individual colors, which involves simulating missing colors. To create these colors, there is the "Dither" option. There are four algorithms in total for such anti-aliasing simulation - “No Dither”, “Random”, “Regular” and “Noise”:

Let's look at the algorithms in more detail (I hope everything is clear with the "No dithering" mode).

Using the algorithm "Random"(Diffusion), we can adjust the amount of smoothing.
In algorithms "Regular"(Pattern) and "Noise"(Noise) there are no settings, Photoshop does everything automatically.

For some images, "Dither" is simply necessary, but remember that the higher its value, the larger the file size, because it adds colorful pixels in close proximity to each other to simulate secondary colors or smooth color gradations.

4. Other settings

"Losses"(Lossy) - controls the level of loss of visual information during anti-aliasing, which can reduce the file size, but also degrade the image quality. Available when the Interlaced option is disabled.

"Transparency"(Transparency) - it makes sense to enable it if the image contains transparent areas. Anti-aliasing algorithms work on the principle of the “Dithering” option and are called the same.

5. Comparison of the original and optimized versions

Once you've added your settings to the Save for Web dialog, the optimized version will experience changes, almost always to the detriment of quality. Carefully check the result obtained, compare it with the source:

You can view the animation and also set repeat options - once, constantly, or set your own number of repeats:

If you are satisfied with the result, proceed to the next step - saving the animation.

6. Adjust animation optimization to the specified file size

This option is also available when saving animation in Photoshop. You can set the size of the output file, and based on this, Photoshop itself will perform optimization, adjusting the file size to the one you specify.

Click on the button in the upper right corner and select the line “Optimize to File Size”

7. Preview animation in the browser, saving optimization parameters

Once you have selected the desired settings, save them in a set. Click on the icon in the upper right corner of the save window for Web and click on the line "Save settings":

We can preview the animation with our settings in the browser by clicking on the button in the lower left corner of the window:

Not only the animation will be shown, but also all the data on the GIF file - volume, linear dimensions, etc., as well as the HTML code. For example, I took the animation from this lesson:

If you like everything, then save the file. To do this, click the "Save" button in the lower right corner of the dialog box. A new window opens, where we select the path, set the settings as shown in the figure (these are the default settings), and click the “Save” button:

The animation will be saved. If you still don’t like something, you can optimize again using the saved set of settings.

Hello everyone who is reading now. Today I’ll tell you about my several ways to reduce the size (weight) of a picture, screenshot, photograph, GIF animation without losing quality for inserting into a website.

Reducing the size of an image in different ways

Each picture or image, call it what you like ;), has its own size, which consists of several points, these are vertical height, horizontal width (px) and weight - kilobytes (KB), megabytes (MB).

Reducing the size (weight) of the image will have a positive effect on the site loading speed - web performance, and will also help save space on your hosting, computer, or flash drive.

Agree, images taken on professional cameras (DSLRs) can sometimes weigh more than 2 megabytes and be 2500 px in width. If such an image is inserted onto the site without compression, it will significantly increase the loading time, for which today PS apply a filter, especially for Google PS.

The first method is to optimize the image before uploading it to the website in Photoshop.

I must say that this is the most popular method of photo resizing and compression among website owners. It is also suitable for ordinary Internet users. At the same time, the actions performed by this program are minimal, which is also important for novice bloggers.

  • 1. Open a new file using Photoshop and then click “Save for Web.”
  • 2. A new window opens, where we set the necessary parameters: quality, format and size of the image.

So, it is enough to change the quality from high numbers from 60 to average numbers from 30-50 to significantly reduce weight. The desired quality can serve as a guide. In the preview window, control how much the image changes.

As for the image format, I choose to save it as Jpeg if it is a color photo, and if I need to save the transparency of a layer or a black and white screenshot, then, as a rule, it is in Png format so that the text and numbers on it are read more clearly. On the topic of Photoshop, read: using this program.

I change the image size (in pixels) in the same window, which is convenient. I click “Save” and then write the file name in Latin.

The second way to compress images using online services

To be honest, I resort to this method extremely rarely. However, these services help compress several (batch) images at once without losing quality, which affects productivity. These are the well-known services krakin.io, TinyPNG; Compresspng and others.

I’ll tell you about one more - this is Optimizilla, which I tested and I really liked the results. Try it too.

The screenshot shows that a JPEG photo weighing 60 KB was loaded into the system. The service automatically compressed it by 39% to 37 KB, but visually the quality was practically not affected.

Using the convenient slider or [+ -] signs, you can play with the image quality; zoom in on the photo and take a closer look at all the details after compression before saving. This is a very relevant photo preview function for sites with a photographer’s portfolio, tourism, women’s resources, online stores where high-quality product images are important.

Resizing the height and width of an image

The process of resizing the width and height of an image, I think today, no longer causes difficulties for anyone. This can be done both online and in the standard graphic editor Paint or the more convenient Paint.NET.

Open a new file in the program, click “Resize”, note that it is in pixels, while maintaining the proportions. OK.


Changing the weight of an image in Gif format online

In this part of the article I will tell you how to quickly compress not only images in JPEG, PNG, SVG, but also Gif formats. Gifs weigh quite a lot, so there are a large number of requests on how to reduce the weight of a GIF image without losing animation and additional effort).

  • Let's use the first online service Compressor.io .

Compressor.io is a powerful online tool for dramatically reducing the size of your digital photos and GIF animations. It allows you to maintain high quality images, uses two types of compression, where there is a difference and there is no difference before and after compression. This is how they characterize their service, and you can see this on the main page.

For an example of Gif animation compression, see the screenshot. You can download the optimized image in a way convenient for you: to your computer, save to Dropbox, Google Drive (drive.google.com).

  • Second service Online Image Optimizer.

The name of the service speaks for itself. Online Image Optimizer easily optimizes different image formats, including Gif animation. Just upload the image and click “Optimize”. Additionally, the Online Image Optimizer service helps you quickly create not only a favicon for a website, but also has many useful online tools in its arsenal.


  • The third method is an application program SuperGIF for MacOS and Windows.


You can purchase a paid version of SuperGIF or download a demo for free, which has slight limitations in functionality.