Widgets

Segredo para compactar e converter javascript em PNG

2 comentários
grafico de abertuda de paginas
Hoje decidi disponibilizar a todos uma técnica de compactação e transformação de javascript em imagem PNG, que uso aqui no tudoseo.com e em outro blogs que participo, esta técnica, na minha opinião, será a mais indicada para o carregamento mais rápido das paginas de seus blogs e sites daqui em diante.
Primeiro, devo dizer que esta técnica, não foi criada por mim, mas sim por jacob seidelin, que consiste em transformar um Java script em imagem png (compatível com Firefox,opera,chrome e ie9) esta técnica não pretende substituir o gzip, mas creio, seja uma forma de obter eficiência em “SEO” search engine optimization, já que o motor de buscas do google estará indexando apenas os que carreguem mais rápido.
Em teoria, qualquer tipo de dado pode ser armazenado em pixels, como por exemplo o seu código Java script embarcado em seu site ou blog…e como qualquer imagem pode ser comprimida, podemos deduzir que um código convertido em imagem png, que é o formato que oferece melhor compressão, pode ser comprimido ao máximo, tirando proveito para o carregamento de sua pagina…. no meu caso, eu ganhei, pois além de comprimir, eu transferi os códigos que estavam hospedado fora do blog para dentro do próprio blog, ganhando em segurança e eficiência…Então, o próximo passo será, criar um script PHP para ler o arquivo Java script convertido em uma imagem PNG, onde cada pixel terá um valor 0-255(valor ASCii)…
Bom agora, vamos ao pulo do gato…
1º: copie e cole esta script php abaixo logo acima de :
]]></b:skin>
var addCss = function(s) {
     var c = d.createElement(‘style’);
     c.type = ‘text/css’;
     if (c.styleSheet)
       c.styleSheet.cssText = s;
     else
       c.appendChild(d.createTextNode(s));
     d.getElementsByTagName(‘HEAD’)[0].appendChild(c);   
   }
   function loadPNGData(strFilename, fncCallback) {
       // test for canvas and getImageData
       var bCanvas = false;
       var oCanvas = document.createElement("canvas");
       if (oCanvas.getContext) {
           var oCtx = oCanvas.getContext("2d");
           if (oCtx.getImageData) {
               bCanvas = true;
           }
       }
       if (bCanvas) {
           var oImg = new Image();
           oImg.style.position = "absolute";
           oImg.style.left = "-10000px";
           document.body.appendChild(oImg);
           oImg.onload = function() {
               var iWidth = this.offsetWidth;
               var iHeight = this.offsetHeight;
               oCanvas.width = iWidth;
               oCanvas.height = iHeight;
               oCanvas.style.width = iWidth+"px";
               oCanvas.style.height = iHeight+"px";
               var oText = document.getElementById("output");
               oCtx.drawImage(this,0,0);
               var oData = oCtx.getImageData(0,0,iWidth,iHeight).data;
               var a = [];
               var len = oData.length;
               var p = -1;
               for (var i=0;i<len;i+=4) {
                   if (oData[i] > 0)
                       a[++p] = String.fromCharCode(oData[i]);
               };
               var strData = a.join("");
               if (fncCallback) {
                   fncCallback(strData);
               }
               document.body.removeChild(oImg);
           }
           oImg.src = strFilename;
           return true;
       } else {
           return false;
       }
   }
   
   var run = function(s) {
     try{ eval(s); } catch(ex) { alert(ex); }
   }
   loadPNGData(‘css.png’,addCss);
   loadPNGData(‘js.png’,run);
Este seria um exemplo de um PNG com codigo embutido: este seria por exemplo o plusone
javascriptplusone
2º: Copie o seu javascript, e de posse deste, visite a pagina do blog do renato louro, que dispinibiliza o compactador para seu codigo, onde se obtem a imagen png que será usada para substituir seu jquery ou outro arquivo que precise de compactação. Feito isto, pegue a imagem gerada no compactador baixado para seu computador e abra a mesma com um programa de image (photoshop ,fotofilter ou otro que possa tenha a funçao de indexar as cores, no fotofilte seria em imagem,mode,indexar cores…. No gimp esta função fica em: Imagem->Modo->Indexado…->Gerar Paleta Otimizada com no máximo 255 cores. com esta imagem em seu computador, você hospeda em seu blog ou site, e substitui o endereço do javascript pelo da imagem gerada…
como hospedar imagen no proprio blog você encontra neste outro artigo aqui no tudoseo.com. De posse de sua imagem,pegue o endereço desta e substitua o do link para o javascript , e pronto seu java esta comprimido e indexado numa imagem compactada..
Um tutorial completo, você encontra no blog do renato louro.caso tenha dúvidas de como proceder é comentar que eu oriento rapido e rasteiro…

2 comentários:

  1. Por algum motivo não funcionou comigo.

    Poderia disponibilizar um exemplo inteiro? Assim eu e outras pessoas poderíamos saber onde erramos.

    Thank's ;D

    ResponderExcluir
    Respostas
    1. Rafael, nada que eu diga será mais elucidativo que o proprio criador da tecnica, portanto visite este link http://alexle.net/archives/306. e antes de qualquer coisa agradeço seu feedback..

      Excluir

Todo comentário é bem vindo, pois acrescenta muito aos nossos posts, portanto, fique a vontade para debater sobre nossos assuntos...

setaretornoaotopo