The Art of the Animated GIF 129
theodp writes "Some artists work in oils, some in pastels, some in acrylics. Photographer Jamie Beck and motion graphics artist Kevin Burg? Their medium of choice is animated GIFs. 'We wanted to tell more of a story than a single still frame photograph but didn't want the high maintenance aspect of a video,' said the two of their unusual collaboration. Needless to say, these are not your father's GeoCities 'Under Construction' GIFs — it can take several hours of manual editing for Beck and Burg to breathe the whisper of life into each image."
Re: (Score:1)
oblig "it works fine for me"
Re: (Score:2)
At which point you then quote your OS, Architecture, Version, and Plugins, else the "oblig" hasn't really been satisfied.
Instead you've just added more uncertainty... though perhaps elaborate troll is elaborate... hrmmm.
Re: (Score:2)
Re: (Score:2)
For me: The images are hosted on a site that is blocked by my workplace so I have:
...animated creations that are "something more than a photo but less than a video."
Here's one of my favorites:
Warning! Access to this site has violated...
The pair was inspired... each image.
Warning! Access to this site has violated...
/sigh
Re: (Score:1)
Let's see how long it takes some of you to get that joke...
Re: (Score:2)
Re:Uhm.. (Score:4, Insightful)
I think it's more that Gawker uses a moronic JavaScript method of making pages, with no non-JavaScript fallback. I use NoScript, therefore, I'm not going to see the article. That's fine, as I'm sure that someone else will post all the interesting bits in the discussion thread.
I really wanted to see those animated gifs that take ages to make though. They must be awesome. But not enough to potentially open up my browser to an attack. If Gawker are too incompetent to make a non-JavaScript fallback,I don't thin they'd be able to protect themselves against someone taking over their site and inserting malicious JavaScript in it...
(Also, MNG [wikipedia.org] and APNG [wikipedia.org], neither of which has any real support. Have the GIF patents expired yet?)
Re: (Score:1)
You get the non-javascript fallback by using _escaped_fragment_ [gawker.com]. Unfortunately half of the page is hidden behind a floating window that doesn't have a close button. :/
Re: (Score:3)
But there is enough of each image shown to right-click and open or save the image by itself. Or you could just go to the artists' site, as mentioned by someone below: http://fromme-toyou.tumblr.com/tagged/cinemagraph [tumblr.com]
It is interesting work based on a really nice concept.
Re:Uhm.. (Score:5, Informative)
Apparently I'm not the only one who dislikes the design. from here [giraffeforum.com]:
Re: (Score:2)
I blame W3C, who in their small minds failed to create any decent method of creating a div layout with multiple equal height columns, which is what every damn site wants to do.
Re:Uhm.. (Score:5, Informative)
Skip Gawker. Go to their website directly:
http://fromme-toyou.tumblr.com/tagged/cinemagraph [tumblr.com]
And yes, they are truly beautiful animations.
Re:go to their website directly (Score:5, Insightful)
Actually, you just mentioned one of the key problems with Web 2.0: "Why bother to link the site of an unknown artist who might be able to use the traffic, when you can link an intermediary aggregator first?"
Re: (Score:3)
Well said. It seems Web2.0 has come with Stupidity factor without which it does not work.
And, I am anyway not clicking on ANY gawker link. They do not deserve any traffic whatsoever, especially not from /..
Re: (Score:2)
To prevent them from getting slashdotted?
Re: (Score:2)
if we don't, remember me [tumblr.com]
Re: (Score:1)
What you said.
At least fall through to a no-script page that tells me my browser sucks instead of failing to render. If they can't understand graceful degradation, they should get out of the business.
Re: (Score:2)
Re: (Score:2)
Re: (Score:1)
Re: (Score:3)
Re: (Score:2)
Don't waste your time at the scummy Gawker site, click straight through to the artists pages. There's even more amazing stuff there. Some of it very subtle, very beautiful.
I'm pretty impressed with these, though I was pretty impressed with the dancing baby. too, so I'm probably half a moron.
Re: (Score:2)
It worked for me once I removed the #! from the url.
try this: http://gawker.com/5795002/the-art-of-the-animated-gif [gawker.com]
Not exactly animated GIFs, but can't miss this: (Score:5, Interesting)
Re: (Score:2)
Re: (Score:2)
I was doing the same thing back in '99 with Windows 9x logos. The scrolling bar at the bottom was using the same palette cycling technique of these images. Manually editing the bitmaps of the logo .sys files, you could also choose how many colors would cycle IIRC. It was really easy to get some kind of animation going with this technique. Too bad I never released any of them...
Still, this art is way cooler than mine! ;)
not loading (Score:4, Interesting)
Re: (Score:3, Insightful)
Re: (Score:1)
Re: (Score:3)
Normally I'd agree with you.. whining that a site doesn't work with noscript is pointless because as you said, once you use something like that you are out of the demographic most for-profit sites care about.
However in this case, Gawker really does have a screwed up web design.. and their public stats have shown that not only did their traffic practically get cut in half when they rolled out the new design... but their traffic has continued to decline.
Re: (Score:3)
Re: (Score:2)
APNG/MNG (Score:3, Interesting)
Re: (Score:3)
APNG is a nice format. Must say an animated version of OpenEXR would be fun too.
Re: (Score:1)
Re: (Score:1)
You're the one missing the point. You can put the same limits on a PNG, but it'd still take up less space and render much faster. GIF is an outdated technology and there is no reason to use it over APNG (as a whole). I actually convert all of my GIFs to PNG, and they take up about half the space and render much more efficiently.
Re:APNG/MNG (Score:5, Insightful)
Re: (Score:1)
Amen. I don't particularly care which format it is; can we please just get some format for animations that isn't patented, supports better than 8-bit color, and works in a majority of web browsers?
Some of my favorite... (Score:3)
If we don't, remember me. (Score:5, Interesting)
Re: (Score:2)
Re: (Score:2)
Re:If we don't, remember me. (Score:4, Interesting)
Re: (Score:1)
Re: If we don't, remember me. (Score:1)
Why not use SVG (Score:2)
From the Article
So why did Beck and Burg choose the GIF format, rather than something more flexible like Flash? After all, it doesn't take more than a couple of these gorgeous pics to slow most browsers to a crawl. "The format has interesting capabilities as well as some severe limitations which are very influential in the visual style of our images," say the pair. "GIF is very basic, highly linkable through outlets such as Tumblr, and integrated into the web. Flash certainly has more capabilities but since our images are at their heart a traditional photograph, a format like .gif makes the most sense."
I know its not fully supported across all browsers yet but the format would be even more integrated into the current web. I don’t think GIFs deserve to be called the "Jazz of the Internet"[article]. I was hoping bad GIFs were something from last decade, that stayed there.
Most work well in Firefox 4
http://svg-wow.org/ [svg-wow.org]
http://en.wikipedia.org/wiki/SVG_animation [wikipedia.org]
PS the pics are quite good but they promote GIF when it should die
Re: (Score:3)
Re: (Score:1)
There is support for raster graphics according to wikipedia. PNGs would be average for the kind of images they were using.
Since you use the SVG suffix you can use jpeg 2000 or WebP and maybe kill another solid and useful but now obsolete standard.
Plus APNG is only supported by Gecko and Presto. SVG will be supported by all modern browsers (though IE will lag as far behind as possible to troll the standard I expect).
Re: (Score:2, Informative)
Re: (Score:1)
Thought it may cause it to be DOA, some people want SVG to include the 'kitchen sink'.
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics#Compression [wikipedia.org] .svgz (.svg.gz) will help with file size.
Scroll down or search for raster you can load the image and then draw instances of it. According to the link in GP these can used for animations. I think all raster graphics supported by the browsers would be able to use as well, resulting in terrible performance currently.
Re: (Score:2)
Re: (Score:1)
I noticed that too it is a major draw back. They may need a JIT complier SVG is written in XML or to use more efficient animation methods. Im sure it can be fixed or the standard will die.
Re: (Score:2)
Re: (Score:1)
What do you suggest they use to make these putative animated SVGs? It's not like Photoshop can poop out an animated SVG; all the examples you point to seem to be chunks of Javascript that dick around inside an SVG rather than something that can be put together by a non-programmer.
Plus, as you say: "I know it's not fully supported across all browsers". Why should they limit their audience by encapsulating a sequence of bitmaps in a vector container that won't work on all browsers when there's animgif code th
Re: (Score:1)
While photoshop can't it appears illustrator with Ikivo Animator can. Layering raster images in sequence would be not hard to code relative to making it look decent.
Must be close to 50 percent can view it now and there is google frame for the rest. But all Macs have the required support and the under 40s on their own laptop might run either an alternative or (and) better browser.
I think you are right, animated SVG is still 1 to 3 years off being feasible on the web.
Re: (Score:2)
There is room on the web for more than one graphics format... different tools for different jobs, and all that. SVG is ideal for any images where the steps to draw the image are easier to describe than the rendered image itsel
Re: (Score:1)
Because its a standard so webkit and trident actually have to make implementations of it. APNG lacks full support and is unlikely to ever get it. Also since APNG shares the suffix with PNG it hurts the PNG standard. Plus PNG is terrible for raster images.
As is in the link in GP you can use raster graphics when everyone gets around to implementing it so you sneak jpeg 2000 compression in there.
Its been pointed out to me that its not ready to be used yet, and some devs are still trying to get full javascript
Re: (Score:2)
Cite references please.
Anyways, my point remains. If you're just going to embed raster graphics inside of SVG, why not just use the raster graphics format itself?
Oh... and animated SVG requires javascript, which means you have to run an interpreter. There are more applications for animated web page images than just the web browser itself.
3D Animated GIFs - Another thing to try (Score:5, Interesting)
Re: (Score:1)
NSFW image there, careful...
where are they? (Score:2)
Re: (Score:1)
These are the kind of devs I want to bitchslap (Score:3)
And while you're at it, throw in a lot of JavaScript with loops and poll the server every 9 seconds to see if anything new has been put up on the server. And pull in lots of include scripts from your advertisers doing the same sort of crap. You know, sites like Huffington Post, or, errr, Slashdot....
Re: (Score:1)
I'm surprised so many people here read Gawker. When I think of Gawker, I think of all the AOL "People Magazine" style websites full of meaningless crap not of interest to anyone over twelve. Or with a penis. Granted, they're not exactly *that*. But come on. They're awfully close.
I used to be big on this (Score:1)
Wake me up for animated pngs... (Score:2, Interesting)
Zzz...animated gifs...zzz...1997...zzz...256 colors...zzzzzzz....
Please. Wake me up when we've invented animated PNGs.
Re:Wake me up for animated pngs... (Score:4, Informative)
They are effectively though (Score:4, Informative)
That page you sent people to is a good example why. the 32k GIF renders extremely slowly on both FF4 and IE9. It goes one block at a time. Also, when I looked at the properties of it in FF, it only showed the first block, and then proceeded to do so on the page, even after a reload. Not the kind of thing you want on your webpage.
Also there's the fact that precious little saves them. The reason is that the GIF format does actually NOT support more than 8-bits per pixel. What they are doing to make those high colour GIFs is messing with animation. You make a non-looping animation that doesn't render the whole image area, but rather tiles. Fine but:
1) It is a rather hacked way of doing things.
2) It is slow in most browsers (as I pointed out).
3) It defeats any hope of having an animated GIF since it is using animation.
For all practical purposes, GIFs are limited to 256 colours. In the case of animations you get 256 per frame, and the frames don't have to be the same though some programs may not support that correctly.
Re: (Score:2)
3) It defeats any hope of having an animated GIF since it is using animation.
Why would that be true? You have delays only between animation frames, and no delay between parts-of-image frames. The only problem then is the speed.
Re: (Score:2)
But your first point is rather true, it IS a rather hacked way of doing things.
Re: (Score:1)
I'd also like to point out it renders fairly slowly in Chrome 12. Also worth noting, I'm not exactly running a slow computer. Phenom II x4 @ 3.8 GHz, 4 GB DDR3 ram (1600 MHz,) and not that it matters for rendering a gif, a geforce 460 GTX factory overclocked.
Re: (Score:2)
Which is interesting but irrelevant, since these images (the ones I've looked at closely, anyway) each use just one colormap. Or at least, each frame in the animation uses the same colormap.
I'm actually more impressed that he managed to reduce photos to 256 colors and still have them look good than I am by the animation.
Re: (Score:2)
Re: (Score:1)
I know is not quite the same as making GIF completely redundant but animated SVGs using raster graphics (PNG, JPEG (2000) and WebP) can now supposedly be done. Just not in IE.
http://en.wikipedia.org/wiki/SVG_animation [wikipedia.org]
Though in the case of PNG they will have to resist purely vectorising it.
http://upload.wikimedia.org/wikipedia/commons/4/4f/Soccer_ball_animated.svg [wikimedia.org]
Comment removed (Score:4, Insightful)
Re: (Score:2)
Based on the rate at which different Indo-European words change, scholars now place the age of the world "wheel" (along with the words "horse", "chariot" and "axle") at around 5,000 BCE. In other words, it's not just wheels that have survived, but the entire specification of land vehicles. So, yeah, I'd have to agree specs can hang around a very, very long time.
Not fond of the GIF format, myself, but for limited-pallet lossless bitmapped images, they're certainly the best out there. In some ways, TARGA is b
Re: (Score:1)
Well, you re right in all points. And that is why it makes it even more interesting for us to learn why the artist of the article chose the GIF format instead of the APNG format.
Re: (Score:1)
Look at the APNG page a bit more closely, most web browsers don't support it.
F-ing Hate animated gif (Score:2)
I hate the animated gif format because it's so often abused to make shitty, grainy silent versions of clips that could just be put on youtube or elsewhere - and probably take 5x of the bandwidth a proper format would have taken. Idk why people do that other than they lack basic video editing skills.
APNG is still my fav. (Score:5, Informative)
lossless + animation = movie-like images
Re: (Score:1)
APNG is a nice fuckup from Mozilla. They had MNG support, they removed it in 2003 because it was deemed too complex and not widely used (the usual chicken and egg problem). Then they decided they were going to create a non standard format based upon PNG and added it in 2008.
The problem is that showing the first frame of the animation if the animation is not supported by the reading application is plain stupid, people just use GIF instead. And APNGs, just like GIFs, need to be opened first if you want to rea
Original (Score:1)
Those were the kbs... (Score:1)
I remember exporting individual frames of animated GIFs, correct/add something to, or just reverse it, put it back together and use it on another crappy Geocities website.
Oh, and the "Awards"! Apparently clicking links through images was a difficult task back then. I gotta admit, I have a little corner in my heart for the god damned MIDI files.
hitler has joined the game (Score:1)
enable animation for lulz [photobucket.com]
wow (Score:2)
I must say, I've just seen the first animated GIFs that I actually enjoyed.
Thanks, guys.
Put GIF (& APNG) playback tools in the browser (Score:2)
Well-made GIFs (Score:1)
Harry Potteresque (Score:1)
Harry Potter (Score:1)
Doesn't Harry Potter pictures use this technique?
Creepy.... (Score:1)
I find the animated GIFs that they produce to be creepy and unnatural. I would think that most people would respond negatively to partial animation as it is unnatural movement. This is one of the reasons why horror movies use these type of techniques. In addition, one of the stated reasons for not shooting video is because of the amount of effort involved. I'm not sure that I buy this argument as it seems that this technique would require more effort to get it right.
In my opinion either you shoot movies
No animated goatse trolls? (Score:2)
paranoia (Score:1)
Re: (Score:1)
Frankly I agree, they do not even accept direct links.
Clicking on the article link takes you to the homepage. Gawker must be desperate for hits.
Re:start caring again (Score:2)
What about a Slashdot Fork?
Isn't the base code OSS/CC Attribution?
Don't we say that any one of thousands of us has better grammar than what shows up in summaries? Should we link to original sites rather than awker & friends?
All someone needs to figure out is how to keep the trolls from posting stories vs the rate they post comment. Maybe a 5-person metamod before it gets released?
Re: (Score:1)