Tips for optimizing GIF animated images with PS

Final effect diagram:

Figure 01

　First, the pruning animation

First, you need to open the video file in Photoshop. Most of the time, our GIF animated images do not require a full sequence of animations, so we can trim the video in the timeline panel. Open the operator panel and trim your video.

Figure 02

　Second, reduce the size of the image

Reduce the size of the image, you can either operate in the Image menu, or in the subsequent image save the process of operation. The author likes to shrink the size of the image at first because it saves a lot of load time when you open the Format dialog box that is stored as a web. Also, be sure to turn your video layer into a smart object to avoid image quality damage. Also, you don't have to worry about redefining the size of the picture, which doesn't affect the rest of our work.

Figure 03

　　III. Storage as Web format

Once we select the GIF image format as the default option for the Save as Web Format dialog box, we don't have to spend any more time on the timeline panel. This is also the author quite like a workflow. Of course, if you need to further reduce the size of an animated GIF picture, you can make some settings in the Save for Web Format dialog box.

Figure 04

　　Four, reduce the number of frames

If you reopen the GIF output option in Photoshop, or if you reduce the second or third frame animation in the timeline panel, the size of the animated GIF image will be reduced further. Next, you can select all the remaining frames of the animation and increase their duration to compensate for the frame loss. If you don't increase the duration, your GIF animated picture will play much faster than it used to. Once you save this new version of the GIF animated picture, you'll find that it's a lot smaller than it used to be.

Figure 05

Five, the number of colors

The most directly related option for optimizing the size of a GIF dynamic picture is the number of colors it uses in the color table. The maximum number of colors is 256, which is a 8-bit limit. But in general, we all use 64 colors. Of course, you can also increase the number of colors according to your own needs.

Figure 06

　　What color algorithm should I choose?

1, perceptible-limited Consider creating a custom color table that has a higher sensitivity than the human eye to the color.

2, optional-choose to create a similar to the perceptual color table, but more conducive to color in a variety of forms to save. This color table usually produces images with the highest color integrity.

3, with the sample--through the most common image of the spectrum sampling to create a custom color table. For example, only shades of green and blue images are mainly generated in green and blue color tables. Of course, the color of most images is concentrated in a specific area of the color spectrum.

4, limited-strict use of the standard 216 colors, and Windows and Mac OS 8-bit (256-color) Panel of the page Security color table. This option ensures that GIF animated images are displayed properly in each major browser.

Figure 07

　Seven, imitate color

Because of the limited number of colors included in the animated GIF picture, we want to make it possible to see more colors than the actual image by imitating the color (dithering). Turn on The Imitation color menu, we choose the algorithm that is the way of imitation color. We can also adjust the imitation color in the "diffusion" option. Generally, patterns and noise are not adjusted. The larger the color-imitating adjustment, the larger the size of the animated GIF picture. Imitation color can increase the smooth gradient between different colors, so that the viewer seems to see more than the actual image of color. However, in order not to let the GIF animated pictures too large, we generally try to minimize the color adjustment to complete the image creation.

Figure 08

　Viii. Web page snapshots, lossy, transparency, and interlaced scanning

1, Web page snapshots are mainly used to help GIF animated images in various browsers of the imitation color. It is captured by capturing some color and then converting it to a web-safe color. In a GIF animated picture, the more web security colors are, the more browsers will be supported and will not change any color.

2, the damage is to reduce the size of GIF files, without affecting the visual experience, the image of the lossy compression.

3. If the picture contains transparency, you should choose to retain transparency pixels, or remove transparency by applying matte-color full or partially filled-transparent pixels.

4, interlaced scan GIF files, is to the operation of GIF files more fluent.

　　Nine, compare original and optimized GIF dynamic picture version

Once you've made a lot of custom changes to GIF animated images, be sure to use the Photoshop duplex view to check for differences in file size and quality.

Figure 09

Ten, preview, save presets and optimize file size

If you are satisfied with the effect of your optimized GIF animated picture, remember to preview it and save the settings as a preset. In addition, you can specify file size limits from the Menu optimization add-on option so that you can get the best image quality in Photoshop for that size.

Figure 10

Category:

• PS Image Processing