Está demostrado que el tiempo de carga de una página web depende en un 80% del cliente, es decir, el usuario. Las imágenes es uno de los elementos de la web que más penaliza el tiempo de carga de estas. Existe varias técnicas para reducirlo considerablemente. Hoy me voy a centrar en uno, imágenes embebidas.
Esta técnica consiste en incluir los bytes de la imagen utilizando el esquema data, al igual que usamos el esquema http para indicar las URL o mailto para el correo electrónico.
La que voy a mostrar consiste en realizar un array asociativo con las URL de las imágenes que se quieren cargar y para ello nada mejor que un ejemplo práctico.
En un archivo PHP tenemos el siguiente código:
<?php
$images_web = array (
0 => base64_encode(file_get_contents("imagen1.png")),
1 => base64_encode(file_get_contents("imagen2.png")),
2 => base64_encode(file_get_contents("imagen3.png"))
);
?>
Con esto codificamos la imagen en base64. Para utilizarlas solo tendremos que poner, por ejemplo, en nuestra etiqueta <img> el siguiente código en el atributo src.
<img src="data:image/png;base64,<?php echo $images_web [0];?>" alt="Descripción"/>
También podemos utilizarlo en nuestra hoja de estilos CSS si la hemos construido sobre un archivo PHP. Ya escribí un post llamado Variables en CSS con PHP donde se describe este proceso.
Para usar las imágenes anteriores en nuestro CSS pondré otro ejemplo:
background-image:url(data:image/png;base64,<?php echo $images_fweb [0];?>);
Como bien he dicho anteriormente esta técnica tiene una gran ventaja como es la reducción de tiempo de carga de una web, pero también inconvenientes, y es que los navegadores Internet Explorer 6 y 7 no son capaces de procesar el esquema data, y en el caso de Internet Explorer 8 solo las soporta en los CSS.
