How to reduce GIF filesize without losing quality - Adobe Photoshop CC Tutorial

hello everybody i work with gifts a lot as an animator and two big gripes i have with using gifs are bad image quality and massive file sizes now in this video we're going to go over how i get high quality animated gifs with small file sizes and i'm not going to tell you to scale down your image before going through my workflow take a look at the basic elements that make up a gif an animated gif is a single file that stores multiple images or frames of animation knowing this it's pretty obvious why animated gifs are so much larger than other image formats that only need to store a single image and we can also start to get an idea of how we're going to reduce the file size by reducing the number of images stored in the gif you may be wondering how we're going to do that without affecting the timing or quality of the animation and that's where control data comes in each frame or image stored in a gif is paired with a set of control data and this control data allows each frame to be given a time delay so let's see that in action with this gif which is currently 22.8 megabytes i'm going to open the gif in photoshop go into file open and selecting the gif and the first thing we're going to do is open the frame animation timeline via window timeline you can't see it now because it's a bit small so i'll make it bigger going to panel options selecting this big frame and now you can see that beneath each frame there's a number showing the time delay for each frame it has a frame rate of 25 frames per second which means that by default each frame's control data is telling it to hold for 0.04 seconds i'm clicking through the animation and you can see that there are quite a lot of duplicate frames so a lot of frames that like this one this one's the same all of these are the same actually starting from here frame nine all the way to frame 32 it's the exact same thing exact same image so that's 23 copies of the same image being stored in the gif and i'm gonna get rid of all of them except one leaving frame nine and i'll quickly pull out my calculator to figure out how long we should hold it for so that was 0.04 times 23 frames so it should be holding for 0.92 seconds and i'll change that right here underneath going to other and you can type that in 0.90 you can type anything and i'm putting 0.92 because that was how long the frames lasted combined this one image now with its control data is doing the same thing as those 23 images we had before i'm gonna do this on a bit of a smaller scale with these other frames as well which are mainly on twos and threes i might speed this up so you don't have to watch me do all of it all right i'm back and i have done the same thing throughout the timeline so now we've got the exact same animation as the initial gif but made up of only nine frames instead of 30 or 40 plus frames before now that we've reduced the number of frames it's time to talk about export settings so under file export i'll select save for web and we'll just use one of the default gif presets as a starting point it doesn't really matter which one because i'm going to explain each setting independently so you can see down here in the bottom left corner of the preview area the file size is shown and as we dive deeper into these settings remember that our goal is not just the smallest possible file size but also to retain the highest image quality the first option that photoshop gives us is the color reduction algorithm which generates the colors in this color table so i'll go over just the four main ones perceptual selective adaptive and restrictive so what perceptual does is it prioritizes colors that the human eye is sensitive to selective is somewhat similar but tries to preserve web safe colors and create broad areas of color adaptive leans towards the dominant colors in the image so on an image like this with lots of brown and red it will result in a color table that has more browns and reds and lastly restrictive limits your colors to the web save color palette and from my experience it always looks disgusting it's absolutely disgusting you always have to experiment on a case by case basis to see which works best for your image and keeping an eye on the file size as well i think that selective does the best job of capturing a lot of the details in the image with perceptualities whatever this object is in the background is being blown out slightly which is not happening with selective and a similar thing is happening with adaptive so i think i'm gonna stick with selective even though it's increasing the file size marginally now moving on we have colors and colors controls the number of colors that appear in this color table less colors mean smaller file sizes more colors bigger file sizes now we can generally get away with less colors for animated content and i found that 64 colors is the sweet spot for most things but in this case we're losing a lot of the detail and skin tone at 64. so i'll go with colors to retain as much quality as i possibly can next it's dittering what dittering does is it simulates colors that are not in the color table to make it look like there are more colors and details and it also increases the file size dittering really shines when your image has lots of gradients or colors because it prevents banding but i'm not seeing a great improvement here despite the big increase in file size so i'll keep it turned off i'm going to gloss over transparency and all its secondary settings because it's a pretty big topic in itself and it doesn't affect the file size that much we also don't need it for this image so i'm just going to deselect transparency and if you look at the color table transparency is taking up a spot here in our palette of 128 colors so removing it actually gives us access to one more color which is sweet and interlaced interlace creates a low resolution version of the image that will display in the browser while the full image file is being downloaded and you probably guess that it also increases the file size now i personally do not like having interlace selected because i don't want someone's first impression of my animation to be blurry and pixelated especially if i'm using it for something important like my online portfolio where first impressions are really important the last two settings we have in this section are web snap and lossy which are pretty simple web snap is really similar to the restrictive color reduction algorithm in that it tries to replace your colors with web safe alternatives so it'll do the same disgusting thing that we saw before gross i don't even really bother having it at a low level because it doesn't even decrease file size so i keep web snap turned off lossy directly reduces file size by selectively discarding some bits of data here and there i know that sounds kind of bad but i found it applying a really small lossy value of around 5 to 10 does a pretty good job of reducing file size without any noticeable loss of quality i actually feel like i'm losing a bit of detail on walls here so i might pull back to five yep and i still get to keep all those image details okay so finally let's talk about resampling which you see down here resampling refers to how photoshop handles the image shader when it resizes an image you can scale down your image to reduce file size even more but as i mentioned at the beginning of this video i'm not going to scale my image down because i won the full size 1080p gif now back to resampling methods by cubic and bilinear they use various calculations to apply entire lacing to an image to preserve details and smooth out the image when resizing it can be useful when you're making an image smaller or larger i like using the nearest neighbor option especially when i'm not resizing an image because it doesn't apply any entire layers thing which results in an image that is as close to the original as possible i'll hit save and we'll go on to compare the image quality and file sizes i'll save this in the same spot as the original file so you can see the initial gif was 22.8 megabytes and the new file is 3.8 this is a great decrease in file size but to me it's pretty much useless if the quality isn't good so i'm going to open both files side by side and make sure that we're not losing any quality so this is the before file you can see it's playing here i'm just putting it safari and would pop the after file right next to it side by side they both look exactly the same to me i can't spot any loss in quality so this has been a big success if i do say so myself in summary reduce the number of frames in the gif set the time delay for each frame pick the lowest number of colors needed tweak your other settings and save i hope this helps you make smaller gifs that are still fantastic looking and if you have any questions leave it in the comment section below and i'll do my best to answer it thanks for watching i hope you have a nice week and i'll see you next time

Channel: Devon Kong

Views: 157,909

Keywords: devon kong, gif, export settings, gifs, adobe photoshop cc, tutorial, how to, small filesize, animated gif, how to reduce gif file size without losing quality, how to reduce gif file size, how to reduce gif file size without losing quality in photoshop, how to compress gif file size, how to compress gif size, how to compress gif for discord, how to shrink gif size, how to shrink gif file size photoshop, how to make gif smaller file size, how to make gif smaller for discord

Id: EX0I6t0t4H8

Length: 11min 2sec (662 seconds)

Published: Thu Sep 17 2020