Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Imágenes embebidas con PHP

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.

T F G+

Escribir un comentario

¡Gracias por dejarnos tus comentarios! — por favor intenta mantener tu opinión relacionada con la anotación, no usar insultos, agresiones, o faltas de respeto al autor y otros participantes de la discusión, en caso de no hacerlo tu comentario podría ser borrado.
A excepción de la página web, el resto de datos solicitados son necesarios para incluir comentarios. El email no será mostrado en los comentarios. Tampoco será usado por parte del administrador para enviarle ninguna información ni será vendido a terceros para ningún tipo de uso.
Código de seguridad
Refescar

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar