Blog do Penha: APNG - Animated Portable Network Graphics

quinta-feira, 5 de março de 2009

APNG - Animated Portable Network Graphics

Enviado para você por Penha através do Google Reader:

APNG - Animated Portable Network Graphics

via Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards de Pedro Rogério em 04/03/09

O 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.