Gif Compression With Photoshop Using Import Video Frames To Layers and Save For Web to create Web Friendly GIFs

What you will need

- Adobe Photoshop (CC is prefered)
- A HQ video file

GIFs are great. When the internet was in its early days, everyone was using them on their websites. The file type worked well to create an easy way to present moving image on basic html formats. A few years later and they almost fell out of popularity for their lack of support on many rising websites and their file size and functionality vs. the ever increasing quality and compression of HQ video. They have managed to come back into the mainstream in such a huge way, and now, even our mobile devices are free to download and browse them with minimal problems. There are lots of free tools online for quickly creating a GIF, however they are somewhat harsh with the output quality and the algorithm for producing something which is both usable and attractive to look at still has a way to come. My preferred method for production is through using Photoshop's Save For Web dialogue box. It offers a few great features which will create different styles of GIFs for different audiences. I use the feature to turn many of my time-lapses into shareable, looping videos for my social media streams, and I also like to create cinemagraphs with them too. You can create some incredible high quality GIFs with low file size using some simple tools that are available in Photoshop if you take a little bit of time to understand them, and that's what I want to discuss here.

If you're like me, and sometimes, all you need is a quick idea of what to consider when getting started on something new, heres my 'TL;DR' list for you lazy lot.

    Quick tips for making high quality, low file size GIFs.

  • - Reduce frame count, double frame delay
  • - Reduce image size/resolution
  • - Remove transparency
  • - Reduce colours if the image uses a similar palette throughout
  • - Swap the Dithering Algorithm to Diffusion
  • - Reduce Dither to 95% or below
  • - Increase Lossy value to 10 or above

Selecting your footage

One of the things to keep in mind when creating a GIF is how the format is wrapped as a file. GIFs can have some very restricting attributes if they are to be usable. If you really want to manage your GIF file size, you'll want to consider the footage you'll be putting into Photoshop to begin with. Certain algorithms treat the data in the image very differently, so try to keep the source video clean and processed. Generally, I like to make GIFs which are short and manageable. Picking a sequence where the overall scene and data doesn't change too much is important. This means, picking a scene where you don't have a bright colourful image which quickly changes to a dark image is going to make the compression much more difficult. It's definitely possible to have long GIFs this way, but whether they will compress well, is up to how many frames you'll want and how much you really want to try to fit into one file.

The Process

This guide should work on most Adobe Photoshop CC versions, the menu and Save For Web options have not really changed much over the years. Once you have a specific video in mind that you want to turn into a web friendly GIF, you navigate to File > Import > Video Frames To Layers...

Importing a Video Frame Sequence and converting it to a GIF.

Once the dialogue box has opened, check that the "Make Frame Animation" option is selected. This is key since it will actually save you from having to do it manually. If you're wanting a specific range, check the "Selected Range Only" option, and use the in and out markers below the preview window to select your range for import. If you have a lot of frames, or you have a longer sequence which you need to trim to save on file size, try the "Limit To Ever X Frames" option to only import the x frame to the sequence. It's key for creating longer GIFs at lower file size which keeping image quality. It might not always be smooth, but sometimes you don't need that.

Importing a Video Frame Sequence and converting it to a GIF.
Note: Importing a selected range is not too ideal for longer video files, since you can't really be precise in any way with this menu, so I'd recommend using shorter clips. You can always clean up excess frames later, however.

You might need to enable the timeline window. You can quickly do this by going to Window > Workspace > Motion, which will give you pretty much everything you will need for a simple frame animation. You can also just add the Timeline window by clicking on Window > Timeline.

Selecting the 'Motion' Workspace to get the Layer and Timeline Windows in Photoshop.

Now the first thing I do, if I already know the image size I will be outputting to, is go to the Image menu > Image Size and adjust the Image size to something more manageable. This just speeds up the whole process if you need to move between the Save For Web and Workspace Window over and over again. If you'll be making multiple GIFs at different size, keep this at your highest resolution so you're not upscaling in the Save For Web dialogue box.

If you're going to be adjusting any of the frames, or coming back to this project multiple times, I'd recommend deleting the excess layers from both the timelines and the layer windows. It keeps the whole project tidy if you save your work and need to come back to it to find something specific later. It also means you might not end up with blank frames if you imported one too many.

If you want text to appear on every frame, you will have to create a new layer. Make sure it is at the top of the layer window, so it appears above every layer of every frame. You can add layers to frames individually here, but to keep things simple, I will just add a watermark to the whole animation, which remains consistent throughout. To make specific frame adjustments, you simply click on the frame you want, and change the layer settings in the Layer window. You will need this if you are creating a frame based animation in Photoshop from scratch, or for adding additional graphics over your imported frames.

Next, you'll need to determine the frame rate of your GIF. This is entirely down to what sort of GIF you are after, whether it will be a very smooth high quality animation with lots of frames at short delays, or something which needs to rest on the frames for a little longer. It's also possible here to adjust the length of frames independently. Since I am wanting to remain at my native videos rate, which is 30 fps, the Frame Delay I will need for this would be closer to 0.033 seconds, but we are limited at 2 decimal spaces here, so we round it to 0.03. It's not ideal, but it's pretty close. If you do not like the results, you can always come back in and change the values after you have previewed the final result in the Save For Web menu.

Deleting Excess Frames in the Timeline and Layer Window.
Note: You can see the frame number and count at the top left of the thumbnail. The Frame Delay is below the thumbnail. Drag a frame to the Bin at the bottom of the timeline window to delete it, or click the bin when you have a frame selected. When you click on a frame, the layer panel is unique to that individual frame, so you can see only the visible frames that were created when you checked the "Make Frame Animation" button in the Import Video Frames To Layers menu.

You can also remove frames individually to save on space, or trim the beginning and end sections to manually adjust the sequence. The Frame Delay has no impact on the file size, it is all down to the resolution and the information in the picture. This is a great way to create long GIFs using keyframes which have a lot frame rate, good image quality but small file size.

You can preview the animation here and you'll want to change the looping to Forever. Note: The playback speed here isn't in real time, it's just for preview purposes, so don't use this as any indication of what the final output will be like.

You can also use the new frame button to add another frame if you want a title at the beginning, and increase the frame delay to something a little longer. Great for 'callouts' and putting a specific action in your GIF and using Photoshop to create graphics.

Changing the Frame Delay for a GIF.

Save For Web

When you are happy with the Frame Delay and animation preview, you will need to set the output options. I use the Save For Web dialogue box, which is now a Legacy option.

Save For Web in Photoshop.
Note: For Windows, the shortcut keys are Alt, Shift, CTRL + s, and for mac, it's cmd, option, shift + s. Always learn shortcuts! 5 seconds of forced learning will save you even more down the line!

The dialogue box might take some time to load, depending upon your animation. If it takes a while, you're probably using a huge source file and a heavy frame load. If it doesn't load, try making the resolution smaller and the frame count to below 100.

The first thing I do, is adjust the Image Size. You can change the image by a percent based amount or determine the pixel count here. There are a lot of different websites which now support GIFs, so check their support pages out. Here are a few popular ones: Twitter and Tumblr

The Dashboard is limited to 540 pixels wide, so that would be your width, however I'd recommend going slightly smaller to accommodate their 3MB file size cap if your animation is frame and image quality heavy (anything above 80 frames might be difficult to compress while maintaining image quality). Gifs can scale up quite nicely, since we will easily forgive them whereas video we and static images we tend to be harsh on quality.

Save For Web in Photoshop.

From here, it's all about compressing the file size while maintaining the quality you want. It's a bit of an art, since you can really find different options work much better than others depending upon what sort of image and animation you have.

You can see the file size down at the bottom left. This is important if you want to maintain a usable file, since many people do use their mobile phone to view images these days. The file size can also actually be comparable to a well compressed video, which is a bit of a shame, considering you'll generally get a better picture from a video.

Generally, in my experience, the Colour Reduction Algorithm settings don't change the file size by much between the 3 main ones you will want to use, but they do drastically change the output colour table depending upon the sort of image you have. For instance: If you have an image that changes drastically over time, such as a sunset gradient which goes from bright blues to dark reds, with a light to dark foreground, you'll want to consider the 'Adaptive' option, since it will look up colours across the entire animation, and pick out key ones which will give you a good picture across the whole sequence. If you're creating an animation which uses a similar pallet throughout, and the image doesn't change too much, such as a cinemagraph where the between frames don't change much, you can consider using 'Perceptual' or 'Selective'. The algorithm for these options will look up colours which the human eye might have trouble distinguishing between, and will determine which of these similar colours to keep as key ones and it will get rid of the rest to create a lower file size with a barely distinguishable loss of quality.

Banding in an image gradient due to a bad algorithm choice.
Here's an example of a bad algorithm for the image. Since the colours in the sky change so drastically over time, the Selective and Perceptual algorithms poorly managed the image quality in the color table, resulting in a muddy image. In this case, I would use the "adaptive" option, which would look much better even with a small file size.

The 'Colors' setting will simply be how many different colours the file will support. More is almost always going to be a bigger file size with better quality.

For dithering, again it's down to the particular image and the colours used in your animation. It is used to simulate colours in a sort of grain like style, which can be great for reducing banding in gradients. It can however, greatly increase file size. It's worth keeping an eye on, since with some images, your file size might actually have a minimum and maximum amount of dither that can be applied before it actually stops helping and makes the file size bigger or smaller than it could be. All three options you have will drastically change the file size and quality, however some can be better than others depending upon the image. I find Noise and Pattern will sometimes work very well on already noisy images, and you can reduce the colors to even half or a quarter with a pretty well retained image quality, whereas Diffusion does a great job on flatter and cleaner images. Diffusion comes with adjustable sliders which when combined, can reduce banding and create a good quality GIF at a lower file size.

The Lossy option which becomes available in the "Dithering" option will discard data to create a smaller file size. It's often worth adjusting to see how it effects your image quality while lowering file size. Sometimes increasing it actually makes for a higher quality GIF since it scatters pixels cross the banding and blocks of colour.

Banding in an image gradient
A small note: transparency is worth turning off if your GIf doesn't need it, since it can also effect file size.

Finally, you'll want to set the 'Looping Options' to 'Forever'. This way, your animation will continually play over and over again. Something which is often why people choose to use a GIF over a video when choosing a file type.

Just before I output the file, I like to look at the Original and the Optimized tabs to see just how much of the original image is preserved. There is a way to set the maximum file size, which will automatically adjust all of the different parameters to fit the threshold that you have set, but I prefer not to use it, since it's entirely random and you'll loose quality 99% of the time.

Before and After GIF compression.

That's about it. There are a lot more features to go into, such as the "Optimize To File Size" option, but it's not worth discussing since 9 times out of 10, it will make a gross image. It's worth a last ditch effort though if you're wanting to see how the algorithms choose to pick out colors to use.

I have put a bunch of different examples at the end for you to see how drastic the different options change depending upon the image. It's absolutely worth trying them out yourself though. Do not think that one option and preset will work for everything.

Here's a link to the Adobe help, which discusses the different options here in much more detail.

GIF with Adaptive Diffusion at 19 Lossy settings.

GIF with Adaptive Diffusion at 19 Lossy

GIF with Adaptive Diffusion at 5 Lossy settings.

GIF with Adaptive Diffusion at 5 Lossy. Note: The banding is more evident in this image, even with a larger file size.

GIF with Adaptive noise settings.

GIF with Adaptive Noise settings.

GIF with no dither applied

GIF with no dither applied. an interesting painterly style, but totaly unusable image quality for this particular scene.

GIF with Adaptive Pattern settings

GIF with Adaptive Pattern settings.

GIF with Adaptive Pattern at 64 colors settings.

GIF with Adaptive Pattern at 64 Colors settings. Note: The colours are vastly reduced, but the quality is still pretty high, and we have a smaller file size.

GIF with Perceptual Pattern settings.

GIF with perceptual Pattern settings.

GIF with Selective Pattern settings.

GIF with Selective Pattern settings. Note Selective and Perceptual are often very similar. Some source images really do not like this algorithm, but it's worth trying.

Advanced Tips

A little tip I have for managing image quality and file size while 'cheating' the algorithm is to manually add noise to the animation. Much like adding a watermark, Make a new layer at the top of the layer window on frame one, and make sure it applies to every frame. Fill it with 50% Grey by going to Edit > Fill and under "Contents" select "50% Gray". Go to Filter > Noise > Add Noise and choose a value around 4-10% depending upon your original quality and resolution. Finally, change the layer Blending mode to "Overlay". What this does is add a noise layer to every frame which will cheat the algorithm into thinking the image has different pixel values. Sometimes it makes the file size bigger and the quality lower, but on certain images, such as gradients, it will break up the colour banding and allow you to achieve a smaller file size at a higher quality image! Note: This only works for animations which change every frame

When you're creating more advanced GIFs, you can even save more on file size by having only certain parts of the GIF move if you mask out static parts of your frame and keep only the moving part visible. A great way for creating high quality cinemagraphs where only a small section of the frame moves. It's a lot of work, and you'll need to make sure every frame is selected while you work on them, but it's absolutely worth it if you want a super large resolution image with a low file size and some minor animation. They compress really well too, since the algorithms can look at how little the sequence changed between frames.

If you would like to work with me on a similar project or have any questions please email me at info@hiadammarshall.com


All images on this site are Copyright © 2016 Adam Marshall, or their respective copyright holders. Do not use without permission.

Site developed by Adam Marshall. Cookies