• How to make gif animation easier. Resizing animation in GIF format

    On the Internet, the GIF format is considered one of the most common. Its high popularity is explained by the fact that the GIF file has an impressive compression algorithm and supports the transparency function. Therefore, create animation with advertising banners as simple as kicking the ball into an empty goal.

    True, there is a small nuance. From time to time, designers are faced with the need to resize GIFs. Some people need to reduce it, others need to increase it. How to edit such content? For example, should I trim it or shrink it? Would you have a regular one? jpeg file, such questions would not arise. Compress it in a graphic editor, even without special knowledge. Just a couple of clicks and the job is done perfectly.

    How to edit a GIF

    As you know, most graphic editors work exclusively with still images. Especially for you, we have created a selection of the most effective programs for compressing such files, trimming them and subsequent animation processing. Now you will no longer have questions about how to compress GIFs online. Choose a program from the list - we wish you pleasant use!

    GIF Resizer

    A unique editor in every sense that allows you to change the size of GIFs in just a few clicks. To do this you need to follow these basic steps:

    • Launch the program.
    • Find the “Resize” button in the menu and click it.
    • By clicking the "Browse" button, select the file you are interested in.
    • Enter the required parameters (length and width).
    • Click “Apply” and wait a few seconds.
    • Done - the animated content is now sized as expected.
    GIF Resizer interface

    In addition, using GIF Resizer you can solve the following problems:

    • Change format.
    • Remove the logo from the animation.
    • Reduce/increase the size of the animated image.
    • Convert GIF to JPG, split into separate frames.
    • Convert to PNG.

    We will not dwell on this functionality, because we are only interested in compressing animations in GIF format. Just know that when faced with a variety of animation editing tasks, it makes sense to use Resizer.

    Ezgif

    A premium service that allows you to compress GIF and PNG files. In addition, it has many different tools that allow you to apply the effect.

    How to use Ezgif? Open the main page of the service, click “Browse”. When the file is selected, all that remains is to click Upload. Various compression options will be available after downloading. Most best option in size/quality ratio – Medium.

    GIF Compressor

    Interesting in its own way GIF program Compressor. It can compress animation in just 2 simple compressions. You can do this with several files at once. Maximum size GIF file – 50 MB.

    Which application did you like best?

    Animated graphic files With GIF extension very popular on the Internet. However, many sites still have restrictions on the size of GIFs that can be loaded. That's why today we want to present ways in which you can change the height and width of such images.

    Since GIF is a sequence of frames and not a single image, resizing files in this format is not easy: you will need an advanced graphics editor. The most popular today are Adobe Photoshop and its free analogue GIMP - using their example we will show you this procedure.

    Method 1: GIMP

    The free graphics editor has extensive functionality that is not much inferior to its paid competitor. Among the program options there is also the ability to change the size of GIFs. This is done like this:

    1. Launch the program and select a tab "File", then use the option "Open".

    2. Using GIMP's built-in file manager get to the directory with the desired image, select it with the mouse and use the button "Open".

    3. When the file is loaded into the program, select the tab "Image", then - point "Mode", in which check the option "RGB".

    4. Next, go to the tab "Filters", click on the option "Animation" and select an option "Unoptimize".

    5. Please note that there is a new open tab in the GIMP working window. All subsequent manipulations should be carried out only in it!

    6. Use the item again "Image", but this time select the option "Image Size".

      A pop-up window will appear with settings for the height and width of the animation frames. Enter the required values ​​(manually or using the switches) and press the button "Change".

    7. To save the results, go through the items "File" – "Export as...".


      A window will appear to select the storage location, file name and extension. Navigate to the directory where you want to save the modified file and rename it if necessary. Then click "Select file type" and mark the option in the list that appears "GIF image". Check the settings, then click the button "Export".

    8. The export settings window will appear. Be sure to check the box "Save as animation", you can leave the remaining parameters unchanged. Use the button "Export" to save the image.

    9. Check the result of your work - the image has been reduced to the selected size.

    As you can see, GIMP copes perfectly with the task of resizing GIF animations. The only drawback is the complexity of the process for inexperienced users and slowdowns in working with three-dimensional images.

    Method 2: Adobe Photoshop

    Is the most functional graphic editor among those on the market. Naturally, it has the ability to resize GIF animations.

    1. Open the program. First of all, select the item "Window". Go to the menu there "Work Environment" and activate the item "Movement".

    2. Next, open the file whose size you want to resize. To do this, select the items "File" — "Open".


      Will start "Conductor". Proceed to the folder in which the target image is stored, select it with the mouse and click on the button "Open".

    3. The animation will be loaded into the program. Pay attention to the panel "Timeline"— it displays all the frames of the edited file.

    4. To change the size, use the item "Image", in which select the option "Image Size".


      A window for adjusting the width and height of the image will open. Make sure the units are set to "Pixels", then enter in the fields "Width" And "Height" the values ​​you need. The rest of the settings can be left untouched. Check the parameters and click "OK".

    5. To save the result, use the item "File", in which select the option "Export", and then - "Export for Web (old version)...".


      It’s also better not to change the settings in this window, so just click on the button "Save" at the bottom of the export utility work area.

    6. Select in "Explorer" location of the modified GIF, rename if necessary and click "Save".


      After this, you can close Photoshop.

    7. Check the result in the specified folder when saving the folder.

    Photoshop is a faster and convenient way changes the size of GIF animation, but there are also disadvantages: the program is paid, and the validity period trial version too short.

    At InVision, we use GIF animations not for pampering - they play important role from a marketing and training perspective. 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 simple program, which 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. This will not only give your animation professional look, but will also simplify the process of reducing 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 the right size, great job! Keep up the good work. 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 graphic information V raster file, allowing to reduce file size images

    Nothing has changed! Help!

    If you have tried everything mentioned above, but still cannot reduce GIF size 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!

    I suggest you use an online editor called “ Ezgif.com", where you can not only change the size of animated images, but also optimize them, i.e., reduce their weight.

    With the help of this online editor, you can remake many banners from the Internet at your discretion, and you don’t need to work on the design. You just write your text and the banner is ready.

    Let's come here

    Online editor tools "Ezgif.com"

    To quickly edit GIF images, it is better to use an online editor than Photoshop. After all, many people have no idea how to work with Photoshop, but here you can edit any GIF image in a matter of minutes

    The online editor looks like this:



    Editor "Ezgif.com" for editing animated GIF pictures

    Of course, it does not reach the functionality of Photoshop, but it has all the necessary tools for editing GIF images.

    Online editor features:

    1. Cropping an image

    2. Resizing

    3. Image optimization

    4. Adding Effects

    5. Changing animation speed

    6. Parsing animation into frames (fragments)

    7. Adding text

    8. Overlay another image

    It would seem like a simple editor, but what a powerful one.

    Let's now look at all the listed tools separately.

    Crop: a simple online tool for cutting animated images.

    Upload the image, and then use your mouse to select the desired part of the image that you want to crop. Click then " Crop it" and everything is ready.

    After you upload an image, information about it appears under the picture: size in KB, dimensions of the picture, and how many frames it contains.


    When cropping a picture, you can set the size manually. To do this, under the image you need to enter the fields “ Left», « Top», « Width" And " Height» Enter the required values.

    Resize: Using this tool, you can resize the picture or crop it. After reduction, the picture remains the same quality and the animation speed does not change.

    In the fields " New width" And " New height" you need to set a new image size, or you can simply specify the percentage (Percentage), and then click " Resize it!" The image will be reduced by the percentage you specified.

    With this tool, you can quickly and easily resize GIF images. As the image size increases, the quality will be lost.

    If the picture after the change somehow begins to display the animation poorly, then you can try setting a different size

    Optimize: and with this tool, you can change the size (weight) of the GIF file. The weight of the picture becomes smaller by reducing the number of colors in each frame. Each GIF frame contains up to 256 unique colors, but by reducing the amount of color you can achieve a smaller file size.

    Optimization has many methods, but you can choose the best option so that the picture quality remains good. Read more about optimization on the website.

    Effects (effects, changing image color): Using this tool, you can flip an image horizontally and vertically.

    You can also rotate the image at a certain angle if you set the degree in the “ Rotate" You can assign a different color to the image, make it black and white, or give it some other shade.

    Speed ​​(change the speed of GIF animation): This tool is designed to change the speed of animation.

    If you want to change the animation speed proportionally to the current one, then use a percentage " % of current speed", and to set the delay between frames, you need to use the method " " Parameter " hundreds of seconds between frames» sets the delay time between frames in hundredths of seconds (1/100)

    Split (parse a GIF image into frames): uh This tool is designed to convert animated GIF images into individual frames, after which each frame can be edited separately.

    All frames of the animated picture can be downloaded to your computer. To do this, right-click on the frame, and then select “ save image as..." You can also download all frames in one zip archive by clicking on “ Download frames as ZIP»

    Write (add text): uh This tool allows you to add text to GIF animations. You can add text to the entire GIF image, or to individual frames. The text on the picture can be moved with the mouse.

    Overlay (overlay of another image): This tool allows you to overlay another image onto a GIF image, preferably in PNG or GIF format.

    In 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 size file, 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. Smoothing 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 on the right top corner and select the line “Optimize to File Size”

    7. Preview animation in the browser, saving optimization parameters

    After you have picked required 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 GIF file- volume, linear dimensions, etc., as well as 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.

    Read more: