APNG – Animated Portable Network Graphics
Postado por: Pedro Rogério emO formato de arquivo APNG (Animated Portable Network Graphics) é uma extensão de imagens animada do PNG (Portable Network Graphics). Ele permite imagens animadas que funcionam de forma semelhante aos arquivos de formato GIF animado, mantendo a compatibilidade com arquivos PNG sem animação. Sua finalidade principal é considerada no uso dos aplicativos GUI e XUL.
O primeiro quadro de um arquivo APNG é armazenado como um fluxo PNG normal, e portanto a maioria dos decodificadores PNG antigos poderão exibir o primeiro quadro de um arquivo APNG. O quadro velocidade dos dados e quadros de animação extra são armazenados em blocos extras (conforme fornecido pela especificação PNG original).
APNG compete com Multiple-image Network Graphics (MNG), um formato poderoso para animações bitmap, criado pela mesma equipe do PNG. A vantagem do APNG é o menor tamanho da biblioteca e compatibilidade com as implementações mais antigas do PNG.
Querem ver um exemplo, olhem para a imagem abaixo, desculpem-me os usuários de Internet Explorer, mas APNG só funciona nos browsers mais recentes:
Verificar compatibilidade entre browsers
Existe uma forma bem simples de verificar se seu browser possui suporte a APNG, que eu acabei descobindo aqui, é um JavaScript que consiste no seguinte:
(function(_global) {
var apng_test = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
apng_test.src = "apng-test.png"; // a data URI will cause a security error so you _have_ to link to external resource
// frame 1 (skipped on apng-supporting browsers): 0,0,0,255
// frame 2: 0,0,0,0
apng_test.onload = function() {
ctx.drawImage(apng_test, 0, 0);
_global.apng_supported = ( ctx.getImageData(0, 0, 1, 1).data[3] == 0 );
}
})(this);
Esse script foi desenvolvido por Elijah Grey e você pode ver uma demonstração aqui.
Mais informações
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Acho que fiquei hipnotizado por esse logo do FF rodando… 8\
Interessante. Pena que o uso é bem limitado, tanto pela pouca compatibilidade, quanto pelo tamanho. Essa imagem do exemplo tem 599KB.
Não funciona no Safari 4 Beta
Devia ter uma animação com a logo do IE 6 pegando fogo.
@Flavio,
Não achei nenhuma, mas dê uma olhada nessa imagem aqui:
http://img186.imageshack.us/img186/5479/wheeegplmp120xo9.png
E já que não funciona no Safari, também não funciona no Chrome. (porque é tudo webkit)
Mas ok, é uma tecnologia legal. Nunca gostei de gifs animados.
E, @Pedro Rogério, o IE consegue ser mais tosco até nas coisas toscas hahahahah!
Para mim é tal como querer reinventar a roda. Ora, se eu já obtenho a MESMA COISA da forma de GIF animado, para quê perder tempo com algo que vai gerar incompatibilidade com os browsers de outros usuários?!?!?!?! Eu hein… :-\
NUH!? 599kb!??? Fazer em flash nao fica em 30kb!
Pesado e nao funciona em todos browsers… qual a vantagem!???
Bom, ao meu ver a vantagem é que teremos mais uma opção para trabalharmos (Melhor podermos escolher do que termos apenas 2 ou 3 formatos engessados).
Abraço
@JP,
Com GIF você não consegue um logotipo com qualidade semelhante que foi utilizado nesse site aqui: http://camendesign.com/.
O logo é uma APNG: http://camendesign.com/design/logo(c)camen-design.png, repare que após um certo tempo o olho pisca.