Generar Data URI Scheme con PHP
Data URI , es un esquema que nos permite incluir datos en linea en una página web como si fueran recursos externos. La mayoría de los navegadores hoy en día lo soportan ,salvo Internet Explorer que en su versión 7 no la soporta.
Ventajas de usar Data URI:
- Las cabeceras HTTP por lo tanto los data: URIs pueden usar menos recursos de la red que la sobrecarga de la codificación del contenido en línea ya que un data: URI es más pequeño que las cabeceras HTTP que de otro modo serían necesarias, en consecuencia su sitio cargará mas rápido.
- La mayoría de navegadores solo pueden soportar máximo cuatro conexiones simultáneas a un servidor, en consecuencia con los Data dejará libre para otras conexiones.
- Los navegadores gestionan menos entradas de cache para un fichero que contiene data: URIs.
Algunas desventajas:
- El contenido debe ser re-codificados y re-integrados cada vez que se realiza un cambio.
- Internet Explorer 7 no lo soporta e Internet Explorer 8 tiene un limite de 32Kb como máximo.
Su formato tiene la siguiente regla:
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
Donde el <MIME-type> corresponde con el MIME Type del contenido a mostrar. <encoding> es el tipo codificación de los datos. Luego en [Base64] irá el contenido.
Ejemplo:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4gg==" alt="Prueba">
Generar los data con PHP
<?php
//Creando funcion que genera el data
function generaDataUri ($file){
if (is_file($file)){
$type = end (explode('.' , $file));
$type = $type == 'jpg' ? 'jpeg' : $type ;
$content = base64_encode(file_get_contents ($file));
$string = "data:image/" . $type . ';base64,' . $content ;
}
return $string ;
}
//Ejemplo para insertar en HTML
echo "<img src="".generaDataUri("imagen.png").""/><br/>"; ?>
Uso en CSS
div.cuadro {
background-image: url ('? <php echo generaDataUri("img-cuadro.jpg");?>');
}
Conclusión:
Las inserción de imágenes usando data:uri permite mayor velocidad en la carga del sitio web ya que reduce el numero de peticiones al servidor, esto ayuda en el rendimiento de su web y ayuda al SEO.
Espero que el tutorial le sea de utilidad para sus proyectos web, saludos :)
Raylin
4 abril, 2012 at 7:12 pm
Muy buena nota felicidades, la pregunta es, y este método cargaría o haría más pesado el codigo html?
Digamos que tengo mas de 50 imagenes diferentes en una web, no hay ningún problema?, y para el uso de sprites css, como sería?
Neysi
6 abril, 2012 at 12:36 pm
Para imágenes de contenido o imágenes de tamaño grande no se recomienda este método, ya que el codigo base_64 saldrá extenso y el tamaño de tu archivo HTML será pesado. Se recomienda usar para imágenes de la interfaz ya sea fondos, iconos, sprites (Con sprites es lo mismo). Se recomienda ya tener genera el código en base_64 para no hacer peticiones al servidor para cada vez que genera.