Resizing optimized animated GIFs in Photoshop

In a previous post I had some trouble getting Photoshop to save animated GIFs using “combined” frames. This stemmed from wanting to resize some existing GIFs I had made using gifcam. Gifcam can optimize the GIF by making the parts of the images that don’t change transparent and then relying on the combine method for the animation. For whatever reason Photoshop wasn’t automatically using the do not dispose setting for the animation. This means that the partially transparent frames would be shown by themselves and any transparent area would show through to the background. It has sort of a ghosting affect, it looks like this:
gif_non_dispose

Even after figuring out the dispose feature, I ran into another issue. The resampling that Photoshop does during resizing breaks the existing optimization done by Gifcam. Just a tiny change in the edge of the transparent areas used for compression can do this:
resize_no_dispose

Normally you want that kind of resampling as it leads to a nicer looking image. To preserve the optimization we want to use a “rougher” resampling algorithm. If you switch the resampling algorithm to Nearest Neighbor you’ll get a much nicer looking animation:
animation_nearest_neighbor

In the Save For Web dialog the resampling algorithm is labeled as “Quality”.
resampling_quality

You can see the difference if you stack two transparent frames on top of each other. Notice the weird square edge lines that aren’t in the upper (nearest neighbor) image.
resize_compression_compare

You can mess around with this to get some cool glitch effects though.
damaged-cyborg-head_glitch

Leave a Reply

Your email address will not be published. Required fields are marked *