Advertisement


How to optimize duplicated frames in an animated GIF using Photoshop?


Question

I've been experimenting with a technique called cinemagraphs. This technique makes animated GIFs where only a small portion of the scene is animated. Here's a quick one that I just made:

enter image description here

So far, Photoshop does a good job with compressing the static parts of the scene. By masking only the moving part, you can save several megabytes.

enter image description here

What Photoshop is not optimizing well is the duplicated frames. To get a seamless loop, I duplicate all frames and reverse them. In the example above, the newscaster turns to the left and needs to turn back to her original position. This always doubles the size of the GIF. How do I tell Photoshop to optimize the duplicated frames just like it optimizes the static areas? In Timeline panel's menu, I've already used the "Optimize Animations" option but that didn't do anything...

2013/10/06
1
10
10/6/2013 10:17:00 PM

Accepted Answer

If I understand your question, you've got an animation with (lets say) 5 frames. Frames 1 & 5, 2 & 4 are identical. So you'd like Photoshop to play the gif like so: 1,2,3,2,1.

Unfortunately that's impossible with an animated gif. Gifs are built to allow the data to stream, displaying the next frame in sequence as the data is loaded. The first frame is considered global and its data can be used in every subsequent frame. So the first frame sets the base, then "Optimize Animation" turns identical pixels transparent in frames beyond the first. So there's no way to replay a previous frame, they must run through even if a frame is identical to the current. Wikipedia explains it in more detail than I do.

Long ago, I did something similar (take a look at the menu) to what you're looking for via javascript and numbered sequences of jpgs. The script plays images 1-10 on mouseover, then 10-1 on mouseout.

2013/10/23
3
10/23/2013 6:08:00 PM