Este truco se basa en una alternativa -creo que- poco conocida por la gente para cargar una imagen como parte del HTML evitando así una conexión extra al servidor. Cuando escribes una etiqueta <img … > en el atributo «src» puedes introducir el contenido de una imagen (el contenido del fichero) en formato Base-64. Veamos un ejemplo:
<img src=»data:image/gif;base64,abcdef…» />
Esta técnica es totalmente lícita desde hace mucho tiempo, según el RFC 2397. Quizás cayó en desuso porque no parece muy óptimo, ya que engorda el tamaño del HTML y evita cualquier caché sobre la imagen. Pero … yo quiero hablar de «pero».
Si la caché actúa sobre el HTML, actúa también sobre esa imagen. En muchas ocasiones, obviamente no en listados, tenemos páginas de contenido esencialmente estático que se sirven como dinámico para simplificar la introducción de algunos elementos como el menú. En estos casos, una sola petición descartaría tener que descargar más contenido (ni HTML ni imagenes). Yo utiliaría esta técnica únicamente para iconos, que no suelen cambiar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>PageSpeed : Truco para subir nota</title>
<link rel="stylesheet" type="text/css" href="csi/common.css" />
<script type="text/javascript" src="csi/jquery-home.js"></script>
</head>
<body>
<img src="<? ico("../images/contacto.gif") ?>" />
</body>
</html>
<?
function ico($file) {
$b64 = base64_encode(rfile($file));
$mt = strpos("gif", $file) ? "image/gif" : "image/jpeg";
$src = "data:{$mt};base64,".$b64;
echo $src;
}
function rfile($filepath) {
$text = "";
if($file = fopen($filepath, "rb")) {
while (!feof($file)) {
$text .= fread($file, 8192);
}
fclose($file);
} else {
die("No se pudo leer $filepath.");
}
return $text;
}
?>