William Wegman’s first animated gif. (via this isn’t happiness)
Awww…only just discovered this. I promised myself no twee gifs… I am sorry, cannot resist this. Can you?
Page 23 of 36
My book of cartoons ‘You’re All Just Jealous of my Jetpack’ is available now:
US: http://www.amazon.com/dp/1770461043
UK: http://www.amazon.co.uk/dp/1770461043
Other stockists and info at www.tomgauld.com
Who doesn’t love animated GIFs?
Believe it or not, support for GIFs at Tumblr was a happy accident! When Tumblr put together the code for handling JPEGs, support and GIFs (and PNGs) happened to also work using the same code. Perhaps even more surprising is that the tools used to handle GIFs at Tumblr hadn’t changed much from those early days.
The image above is an original from sukme that could not be posted to Tumblr last June. It also would have failed if he’d tried last Sunday. If you click-through to the original post, you will see a muddy, reduced-saturation mess. All this because our resizer couldn’t handle the original.
I’ve got ninety-nine problems and the GIF is one
There is a lot of misinformation about GIF limits on Tumblr, so let me set the record straight: We don’t count colors or frames or pixels. We only count bytes and seconds. Every image that comes in is scaled to a number of smaller sizes and the smaller your image is, the fewer resizes need to happen, which means less time.
We had two core failure modes in our prior resizer: Some images would take as much as several minutes to convert. This was not directly attributable to color, dimensions, or frame count, but a mysterious mix of all of them. Some images would balloon in size (600KB at 400×400, 27MB at 250×250).
The unpredictability of these failures made our GIF limits feel arbitrary and terrible to the end users. Some have gone so far as to threaten monkey kicks. I don’t want to get kicked by a monkey, so we started working hard late last year to fix it.
A proposed solution
Some of you may have seen this post where the performance of our current converter was compared with a new “mystery” converter. The mystery converter was roughly 1000x faster on the “slapping” GIF and happened to look great, but had quality problems on other images. Those were more fully explored in here a couple of days later.
If you haven’t figured it out yet, the mystery converter is gifsicle.
Getting a better handle on it
To get an unbiased test set, I took a random sample of roughly 90K GIFs that Tumblr users tried to upload, not limiting the corpus only to those that succeeded. These were tested against the current converter, resizing down to the next size we produce. Each resize is given up to 20 seconds to complete in our application, but all resizes must complete in 30 seconds. All resizes must be under 1MB or we will convert the first frame to JPEG and call it a day.
2.6% of my 90K GIFs took longer than 20 seconds to resize. This is an underestimation of how many GIFs would be rejected for time because this is only one of several resizes required. A whopping 17.1% of all GIFs were over 1MB. Even if we bump up to 2MB, the rejection rate is 2.75%. The converter was making over 25% of all resizes larger than the higher-resolution originals! The total rejection rate for my sample set was 4.46% of all original GIFs uploaded.
Using gifsicle is so much faster that our CPU rejection rate drops to 0.00 on my test set. Also, just under 99% of all images were smaller when resized than they were at their original resolution. The size rejection rate was a much lower 0.59%.
Gifsicle problems
As compelling as the performance of gifsicle is, the quality problems are too much to ignore. We played around with the code a bit, but eventually we just got in touch with the author, Dr. Eddie Kohler. The specifics are in this post, but the short version is that Eddie was able to improve quality by adding some more advanced resampling methods as well as palette expansion for small-palette images. This increased our size rejection rate to 0.68% while still keeping us well under our CPU budget.
Proving it
Image processing is all about choices. How do you resample? Do you sharpen? Where in the workflow is gamma correction applied, if at all? The list goes on and on.
As you can imagine from the performance differences, our previous converter and gifsicle take very different approaches to GIF resizing. The output images look different. Sometimes it is slight, sometimes it is significant, but there is no way we could put out a converter that messes up your images, even if it messes them up quickly.
We set up a qualitative study. The goal was simply to prove that we weren’t doing worse than our old converter, not necessarily that we were doing better. This study was opened up to all Tumblr employees, as well as some “randomly selected” outsiders (my friends and family). Participants were presented with one of two questions:
1.) Given an original and 1 resize, decide whether it is ok, unacceptable, or completely broken.
2.) Given an original and 2 resizes (randomly choses which was left and which was right, sometimes they were identical), choose the better image or say there is no difference.
The results were everything I could have hoped for. The “acceptable” test showed that users found gifsicle better at producing acceptable results (87% vs. 84%), but not by a statistically relevant amount (p=0.086) and that gifsicle produced fewer broken GIFs (0.71% vs. 1.38%), but again not enough to say it is definitively better (p=0.106). The “better” test found users preferring gifsicle 37% of the time, the prior converter only 16% of the time, but users also preferred one identical image over the other 27% of the time. Again, it is hard to say that gifsicle is better, but it is clear that it is no worse.
Putting it all together
The development and testing described above took from late October until the beginning of March. Packaging, deployment, and integration took only a couple of weeks!
We aren’t done. There is work underway exploring how we handle JPEGs and PNGs. There are a slew of features that we can go after. This was a big step, a necessary step, but not the end for sure.
We are a community, it takes a village, there’s no “i” in GIF
This project couldn’t have happened without the excellent work of Eddie Kohler in creating, maintaining, and enhancing gifsicle. Tumblr’s Site Reliability Engineering group packaged and helped deploy gifsicle onto hundreds and hundreds of machines in our datacenter. Tumblr’s Security Team vetted the code, both by inspection and by attacking it to make sure we stay safe. This was all for the awesome Tumblr creators, but I have to mention qilme/sukme (same dude, two blogs), reallivingartist, and especially gnumblr for their help in understanding and ultimately attacking this monstrous problem.
Kuleshov, betrayal and the working life
“For me, story is defined as something—anything—that insists on some kind of relationship between chronology and causation.” B. Short.
source for gif: http://youtu.be/_gGl3LJ7vHc
Anything that insists on a connection between chronology and causation is a story, says Brian Short. He uses the ‘Kuleshov effect’ to explain what he means:
“In this experiment, Lev Kuleshov put a moving image—a shot of Tsarist matinee idol Ivan Mosjoukine looking blankly at the camera—before another moving image—a shot of a bowl of soup. Then we cut back to Mosjoukine, then we cut to a new shot—of a coffin with a body in it. Then Mosjoukine again, then a lady reclining on a couch. In each shot, Mosjoukine’s expression seems slightly different, switching from hunger to sadness to lust without ever actually changing. It’s the same footage. And yet, in its subtleties, Mosjoukine’s expression seems a response to the image that comes right after.”
We fill in the gaps of what is not there in our drive for a coherent narrative. Good stories use our inability to see what is actually there bottom up, we will fill in gaps top down based on our expectations and past history.
The praise/rebuke game created by David Kernohan is another example of this. He asks readers to click to offer praise or rebuke and notice impact on morale in a ‘game’ he created. As we click to get the graph to fit our expectations, we get impatient. It took me a few goes to see that I had no impact at all no matter where I clicked. It is just an animated gif creating the illusion of control. Clever.
Our unconscious expectations about the world impact significantly what we foreground in our experiences. As we start this ‘DS106 goes to work’ course, Alan Levine reflects on the way work is represented in popular culture,
Comedic or dark and evil – is this the only way corporate culture is represented in popular culture? Might there be other ways to represent it?
In the next few weeks, this shrink wants to focus on precisely this. What are my unchallenged, background assumptions about work? What stories do I tell myself and others about the workplace? One of the most powerful books I have read on the meaning of work is from a sociologist,
This book is no Hollywood, it is awesome and a difficult read. It challenged many of my pollyanna attitudes about my role as a developer of people and organisations when I first read it a few years ago. Today I look forward to having my attitudes challenged in a more DS106 kind of way: might there be other ways to represent working life beyond stereotypes?
I look forward to everyone’s explorations in the next few weeks. Now, let’s get to work!
Date for you calendars: March 23, 2014. 20:00 GMT
Coming to a radio near you:
The #DS106 Good Spell in 106 bullets.
John and the shrink chat about what makes DS106 the best learning experience in the interwebz!
What lies behind the mask?
Source and more faces: http://karialtmann.com/work/2008/dreamcaptchas/dreamcaptchas02.html
A morning in the garden pottering with various apps. I guess I should have been gardening instead. The toad not mine but from Flickr cc by. He fitted in too well here not to add!
The importance of history – advise to new students
One of the things I most value about being part of the DS106 community is that it makes come alive years of theory and research on the creative process.
On this post I want to talk about Bagman, a character that is part of the DS106 oral tradition and how it relates to a systemic theory of creativity.
I started the week looking for a photo of ‘the little paper bag character’ I had seen on Twitter some time ago. I thought it was created by Martha Burtis but soon found out that it was Brian Short’s original idea, that it was called Bagman and that he had ran for president in the past with a comprehensive campaign being staged by past DS106 participants. He has become an assignment on the DS106 bank.
His most recent appearance was to claim his own domain at UMW, a trailer well worth watching. Search for him on the google and there are pages of fun art to listen to and watch, all to do with this little paper bag creation.
Why bother writing about him? Other than the obvious prima facie reason that he is awesome, there are those out there who need a rationale for having fun, if that is not too much of an oxymoron. Sheep! I needed a rationale to join this cult #4life not too long ago.
So let me be serious for a minute and bring to bear my academic expertise as the DS106 Shrink to the important subject that is Bagman or B. Agman as I believe he is known on Linkedin. The dry and boring diagram on photo set above, explain systemic creativity. I put it here for completeness but will only focus on what is relevant to this story.
As I was digging into the history of DS106 through finding out about this little character, I had a lived experience of what Csikszentmihalyi (the guy responsible for boring diagram) means when he says that we need to ask where is creativity? Rather than, What is creativity?
In psychology often the focus is on the person and how to develop individual creativity. Until I came across this model I used to focus all my workshops on individual creativity too. But the individual is not an island and in order for creative output to obtain, we need to look beyond the ‘I’. The individual belongs to a field or craft. In that field there are colleagues, journals and review processes that determine what becomes part of the domain of that field. The acceptance of a given output by the field into the domain determines what future students learn as the symbol system for that field that they can then deviate from – the symbols they will manipulate to become creators. A key thing the theory proposes and one that is often forgotten by those who want to encourage creativity is the need of years of training and practicing to learn that symbol system – in other words you will not become Einstein without learning physics.
This is similar to what Ira Glass says about practicing your craft. You will suck for a long time as you learn your craft, what you do will not be accepted in the field and even if your taste is impeccable all the way through your output will not match your taste. Do read Alan Levine’s latest post to understand more about this and learn a lot about what teaching means within our little DS106 community.
What does all this have to do with Bagman?
I have always struggled to explain this theory to my students. It seems self evident to me, but not often to others on first seeing it. I can now explain it with Bagman. Tracking his story this morning taught me a little more about the people who ‘are’ DS106 today, this will help me join the conversation. It is always tough to come into a party where you don’t know anyone; knowing their war stories, their recurrent jokes and developing an ability to contribute to their interactional currency will help you join in. In some ways, all we have online is this narrative history to establish relationships within an existing social system.
If you are coming in new to DS106 it would pay you to study it narrative history or as I think of it, its oral tradition.
The open web is a great repository of this tradition as many students before you have engaged with the course and produced creative outputs for it. DS106 has a symbol system and it is not so obvious without studying a little history.
The characters and the creations of the students involving each character were the medium through which students became part of the social system that is the field of DS106. If you look at the content only (the tools, the assignments, the weekly announcements) you will miss a core element of what makes this community special. The way to be accepted within it is also by knowing its history through narrative. You can then locate individuals and their roles within the community through the history they share.
The big difference between being a DS106 student and being a physicist is of course that neither the social nor the symbol system through which people interact is made explicit when you join it. You have to dig for it, and realise that it matters. It matters not because Bagman will change your world or teach you digital storytelling techniques (although he might), it matters because it is a history that the community shares and often talks about.
I am also very aware in making artefacts that there is a difference between making things for the DS106 community, with the intention of engagement and interaction and making things for a wider social system. Much of what I make within this community is pretty meaningless to those outside it or new to it. From an individual creativity perspective I am practising digital storytelling whatever the content. If that is your intention in joining the social and symbol systems may be do not matter.
Yet, seeing DS106 as a domain of knowledge in itself with a symbol system embedded in its oral tradition, its content maintained informally by the social system interacting around these symbols, may enable new open participants to participate more fully in the learning process.
And we are all pretty vain, so we love to be asked about what we have made and why we have made it! If you are joining us on March 18th for the first time, welcome to the party.
Campaign gif source; http://blog.neverthesameriver.com/change-its-in-the-bag-design-assignment/
Video for Bagman in London gif: http://youtu.be/mdxolXh3U60
