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/