Otimizando suas requisições Http com Encode & Decode Data URLs PHP

tuning_web_fuscas

Há alguns dias me questionaram sobre técnicas para aumentar a velocidade de um aplicativo web, o objetivo era ter uma solução para otimizar a velocidade de resposta de um grande sistema que possui uma boa base de conteúdos.

Obviamente não existe uma resposta fácil, pois a otimização parte de diversas camadas, como otimização do servidor, das consultas ao banco, refactory e otimização do código, trabalho de conteúdos etc.

Gosto de dizer que “Tuning” é uma cultura (assim como segurança) e não um produto/solução que você compra.

Falando de sistemas web, uma das boas praticas e diminuir o conjunto de requisições Http adicionais ao conteúdo solicitado, deixando o carregamento da página mais veloz.

Converter pequenas imagens para data-URLs pode ser uma ótima maneira de eliminar essas solicitações adicionais e diminuir o tempo de carregamento de suas páginas.

Usando as funções base64_encode () e base64_decode () , temos o poder de converter imagens em data-URLs e vice-versa.

Na prática – Encodando:

Então, vamos começar com uma pequena imagem com o nome, digamos, “feed-icon.gif”:

Em seguida, vamos converte-la com base64_encode (): *

<?php echo base64_encode (file_get_contents (“feed-icon.gif”)); ?>

A saída será a imagem como uma série de caracteres codificados em base64, que não vou listar aqui.
O conteúdo gerado será maior que o tamanho da imagem original.

– Isso não é bom correto? Pois o meu tamanho de página aumenta.
– Errado … mesmo o conteúdo sendo um pouco maior, estamos economizando requisições Http

Mas vamos ter bom senso, uma imagem com mais de 100Kb, já pode passar a ser uma má ideia converter.

Agora que já aprendemos a codificar a imagem, podemos exibi-la em nossa página, assim:

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Ou no meu arquivo de CSS:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

* Isso é uma espécie de técnica de suja “quick-n-dirty”, mas funciona.
Aqui está um outro método de codificação usando fopen () em vez de file_get_contents ():

<?php // converte a imagem para dataURL
$img_source = "feed-icon.gif"; // caminho da imagem
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Na sua página use:
<img src="data:image/gif;base64,<?php echo $img_string; ?>">

Decodando:

A maneira mais fácil de decodificar uma imagem codificada em base64 é apenas para fazer um “Salvar como …” em algum lugar em sua máquina.

Claro, você também pode usar a função base64_decode do PHP para converter algo codificado em sua forma inicial.
Isso funciona muito bem para o conteúdo do texto, mas para imagens precisamos incluir o cabeçalho adequado ao exibir como conteúdo web:

<?php header("Content-type: image/gif");
echo base64_decode($img_string); ?>

Esse tipo de técnica funciona muito bem conteúdos pequenos e estáticos e deve ser usada em conjunto com outras técnicas.

 
Fonte: http://perishablepress.com/php-encode-decode-data-urls/
 

Deixe uma resposta


sete × 5 =