* * * * * * * * * * * * * * * * * * * *

DEFECTIVE ANIMATIONS REPAIRED

* * * * * * * * * * * * * * * * * * * *

Animated images with transparent backgrounds often appear differently on different browsers due to many factors involved in their creation. Many images that appear OK on MSIE 9 and 11, Firefox and Chrome will show multiple frames or parts of multiple frames at once when viewed on Edge browsers.

< as appearing on Edge as on other browsers >

I first noticed this shortly after upgrading to Windows 10 with the Edge browser. I had previously been using Windows 8 with MSIE 11. Images that showed the problem had appeared fine on all versions of MSIE since I started collecting smileys in 2006.

After deleting dozens of images that I thought were corrupted, I discovered others with the problem appeared fine on my MSIE 9 browser at work. So! how to fix?

The Solution

  • On my Bodacious links, use the Image Creators/Editors drop down and select EZGif.
  • Select "Split" on the menu bar and load your image into the tool.
  • Click on "Upload" button
  • After image loads, click on "Split to frames!" button.
  • At the bottom of the display of the individual frames, select "Edit animation"
  • Scroll down to the "Effects" section and check the box next to "don't stack frames"
  • Then click on "Make a GIF!"
  • The animation will appear instantly and you can then save it with the icon.

Comments

The example above is rather extreme. Many images will display the problem much more subtly. Often there will only be the appearance of varying outline. With several frames, a small object will appear out of place for a fraction of a second.

I have not been able to create the effect at will when there is more than 2 frames in the animation. I often see the problem when using the "Online Image Editor" (link located on same drop down as EZGIF) to transparentize the BG of a gif.

I have corrected several hundred images from dozens of sources. With practice, it is possible to take an image from your web page, correct it, save and upload back to your site in less than 1 minute.

Note that on the examples below, the third one actually had a repetition of a frame with the "chair" showing in 2 positions at once. EZGIF was used to edit out the bad frames, add copies of correct frames and change the timing a bit. The 4th one had an "empty" frame.

Additional Examples
As found: After repair: As found: After repair: As found: After repair:

As found: After repair:


To view more complicated edits and some of my own creations click HERE.][ Bodacious Smiley Source