APNG cache issue - Fixed, but tips on how to use an APNG over a Gif within

Design help General
1

Hi all,

I have successfully got an APNG file working on my site. however it suffers from the issue that once its played out once, if i reload the site it doesn’t play again, it just loads final frame…

I know this issue can happen with gifs too.

Since its the same idea as a gif, what would a solution be to prevent one image being cached by webflow/the browser?

THanks
Josh

2

OK i found a fix to stop caching by using the embed widget and the following code

<script type="text/javascript">
document.write('<img src="https://uploads-ssl.webflow.com/5b86a13268a1c51a0724badf/5b895206e60d4f76caebec17_ezgif.com-apng-maker%20(3).png?'+Math.random()+'" alt="The Hinterlander logo" border="0" height="auto" width="220">');
</script>

For those interested in creating some APNGs

I exported my video from after effects with background transparency enabled as a PNG sequence.
also set the RGB to RGB+Alpha in the render queue

then go to Animated PNG (APNG) Maker and tinker around to your hearts content. try to keep file size under 4mb

once you’ve saved that out then use https://tinypng.com/ who also support APNG compression to reduce the file size further with no loss of quality.

Cheers

Here’s an example of GIF vs APNG

http://apng.onevcat.com/demo/

2 Likes
3

That’s great, thanks!

(ezgif is such a great tool)

1 Like
4

Super great, and i rely on TinyPNG most days too - compresses jpegs without loss as well as PNGs

5

Have you seen & tested this? http://svgize.webflow.io/

And this, by the same guy (that’s what I use most of the time) https://getoptimage.com/

1 Like
6

This is useful, thank you!