Streaming live at 10am (PST)

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


#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 https://ezgif.com/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/


#3

That’s great, thanks!

(ezgif is such a great tool)


#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/


#6

This is useful, thank you!