When the material is supplemented with different pictures, the web page gains weight, and this affects the load speed. So, it’s necessary to optimize images to reduce the size of the page as much as possible.
In addition to static pictures, GIF animation is often used. Unlike the JPEG or PNG formats, GIF not easily compressed. The GIF format is an image-saving format that supports up to 256 colors and is currently used mainly to display images on Internet sites. This is a fairly old format, almost superseded by more modern ones, for example, PNG. But it’s still used because it supports animation.
Moving pictures in GIF format is a great way to attract attention to an article or post on a social network. However, GIF images suitable for publication are not always available. What if the image is too large or overweight?
If the size of the picture is large and there are lots of frames the file size is significantly increased. Which is inadmissible for displaying on the web pages because a large file size slows them down and with a bad connection it makes them impossible to load. So, when saving GIF animation, the user of Photoshop should optimize the animation so that the volume of the finished file is minimal but with the maximum quality.
In this article, I will give you some tips on reducing the weight of the output GIF file with minimal loss of quality.
- Cropping the original movie. If you create an animation from a video clip, you must first open it in Photoshop and see its length by clicking “Window TimeLine”. As a rule, most of the frames of the clip are not needed for animation. So, you need to select only the necessary area and cut the rest.
- Reduce the linear size of the image. Reducing the width and height of the animation frame significantly reduces the output file size. This can be done by using the “Image Image Size” menu command. If you are working with the version above CS6, this tool has several additional options, including preview window.
- Disabling the interlacing. The included option “Interlaced” instructs the browser to load the image in several passes. And it increases the file size by about 10 percent. What does it mean? If the connection is slow and the file is large, the full load of the image will be slow. If the image is loaded in several passes, first a “light” low-quality version of the image is loaded. So, at first, the picture consists of large squares (has a low resolution) and as the image is loaded the picture acquires its usual form. For normal pictures, this is not bad, but for animation, it’s entirely useless. Therefore, you can remove it from the options and reduce the file size by about 10 percent.
- Dithering. Because GIF files contain a limited number of colors, you may need to create transitions between individual colors to improve the appearance of the picture. And for this, you need to simulate the missing colors. To create these colors, there is an option called “Dithering”. In total, there are three algorithms for simulating such smoothing in PS: “Diffusion”, “Pattern”, and “Noise”. By using the algorithm “Diffusion”, we can adjust the amount of smoothing. In the algorithms, “Pattern” and “Noise” settings are missing, and Photoshop does everything automatically. For some images, dithering is necessary. But remember, the larger its value, the larger the file size. This is because Dithering adds multi-colored pixels near each other to simulate secondary colors or smooth color gradations.
- Lossy. This option controls the level of loss of visual information which can reduce the file size but also worsen the picture quality. Lossy is available when the “Interlaced” option is disabled.
- Adjusting transparency. It makes sense to turn it on if the image contains transparent areas.
- Adjust animation to the specified file size. This option is also available when saving the animation in Photoshop. You can specify the size of the output file. And based on this Photoshop itself will make the optimizations, adjusting the file size to the specified by you.
But what if there’s no practice of working with graphics editors at all? In this case, there are some options for solving this problem. The most obvious are the online tools for compressing the GIF animation. They will be useful since GIF files can weigh up to 20MB or more.
- Compressor.io: The first online tool for optimizing images in JPEG, PNG, GIF, and SVG. Drag the picture to the download area, and the processing will begin immediately. When finished, you can see how compressed the file became. It remains only to download the optimized version by clicking on the button “DOWNLOAD YOUR FILE”. The upload file size limit is 10MB.
- Online service Ezgif provides answers to many questions. This is a universal editor, designed to perform a variety of manipulations with files in GIF format. With it, you may not only edit your existing animations but also create new ones. The service start screen is divided into several tabs. The Ezgif service performs almost all the operations that you may need when working with animated images. And it does it qualitatively.
Please, comment and share your thoughts on the topic. And be sure to check out our collection of a new website and PSD templates if you’re planning to open your own website. All the images we provide are already optimized for the most responsive web pages.
Read Also
Top 30 Best Animated GIF Artists On The Web
Animated GIFs – The Reason Why Images and Videos will Stop Trending
15 Jaw-Dropping GIF Artists That Will Leave You Breathless
Digging into Duotone: How to Create & Use Colorized Images in Web Design