Codificando imágenes en Base64

Cristian in CSS

July 5, 2008

Desde hace unos meses que quería echarle un ojo a un bundle para codificar imágenes en Base64 para textmate que vi que Arnau había publicado que vi también comentado por Shaun Inman y cogió bastante repercusión.

Hasta hoy no he encontrado un momento para instalarlo, pero es killer. Con ctrl+cmd+b automáticamente te hace la conversión, teniendo en cuenta que la imagen está en un ruta relativa.

Esto nos servirá para reducir el número de peticiones http en el servidor, y elimina la necesidad física de alojar la imagen en el servidor. 

La imagen se embebe utilizando la propiedad data:url, con lo que hay que tener en cuenta la extensión del código generado para no alcanzar el límite máximo de longitud en la url aceptado por los navegadores.

Este es el código de un ejemplo básico de una imagen embebida en css, también lo podrías escupir como un output <img /> en HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Base64</title>
<style type="text/css">
	body {
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAfCAMAAAAlbpZMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7PjVz+yV6fbO5/XNoNo+4PO+rt9Y/P73tuNoy+uSnNg2ndk0lNUnjdMWyeqL/f76essAmdcwmNcs4vTC3PGz1++r1e6n0OyczuydhM8GgM4DyOqOxeiExOiCwueCwOd6dckAv+Z7uuRyi9IWp91LpdxFo9tBoNo88vrj8fng7PfVmdcz6fbSltYok9Up4/TEkNQikdQf3vK32vCxhtAMyeqQv+Z5vOVzr+BbqN1RodpAl9YsldYpktUjkNQghdALgc4GfMwCdcoA////ecsAe8wAdsoAeMsAd8oAccgAf80Ac8kAfMwAcsgA+Pzv///++v3z/v/8fs0Aqt5TeswAx+mQ7/ndnNg4ndk4fcwAyuqQ1u+psOBeseBf/P74/f75g88GuONs9Pvml9cv9fvo///9ltYreMoAfc0A8frisOBaqN1HsOBc+v314vPD2PCq9fvpmtgxitEb5/bKrN9S+v3vptxHyuqMktUgsOBfc8gAkNQbmtgvmdc6jtMYhdAO9PvojdIc6vfSwOd95PTG5fXGidEM7vjal9cw/f78vOV0d8sAt+JgteJk9/zq0OyV8vrg3fG2xOeD5PTFwueG1e6oueRu1u6ny+uU8/rkldYrntk6fs0Gqd5QuONvo9xErt9c+fzwgc4C8Pnfg88Bg88DottDndk7/v789vvs/v/93PG10+6l5fXJ5fXK5vXK5/bJg88M6vfUiNERiNETitER/v/+i9ITh9AWiNAJptxNxOd93fK73/K4wed+0+2g0e2egc4IbcYAhM8JxumH0u2cfcwC4vTAj9Qfp9xDseFeq95V1++vcskAvOVx/P753vK7z+yfqd1Oqt1Mq95Pr+BexeiIxumIx+mK5/bNxumDueRsptw+uuRvitET4PO9n9o1jNIZj9MahdAMndk/n9o9n9o+h9AJhtAK6/fT0e2ituNt+f3vw+iFsuFg9vvqs+Fjj9Mf6vbSyOmPwueByOmMwud+fs0B5fTH2vCy+v30y+uP+/31iNEP7fjazuyYe6yyjgAAAjpJREFUeNpicMYFGECESCaMm4oqw+D4FUjezHV21gif6bwCSabEszDQOWwng9+euQrBTw4gZDZ8d3f56cyZoCXo4url7vkVIXPZ89KWCOertmLpPl6RQS7T4TKs6cl/5lV9eh3c7GHiqmogsA4m0xnhdt+5YYeS0dHTrtNczU7YJ8FkAp+6C//wS1lrx2V9b2rGkUVp2+CmRSuYK2/kEHcJfzibqWKNmwXCP29M1FuXe3u5Zj+P4V8v5suJ5FM2gYWTXO8I3F7y1tm53IMpHiFzwanXoKzfnXHpRWdnvkecgn5wmUBuDxfjia5NyqHO7DKJz9ya4m/6Q0NHf86ixStvpU5a7XzK8P0sn5exLwJgYb3Lq8/ZOVrXn9kn47hNvayC1SqoTJylx9vPuyM2O7Od9dgn6PBXgBViT2alnlSQi0JbV+yEg4IOqlwuHolQF0R5uvlEBkXylt7VFiiOMmdxCWGFytxw4zH5uHerrYiAm7ups/Oybjd1fojMK29RqwfOdmm/3XUFuJydPzwW8jwHkZnstn+BrrN2sqmvqc0x/Xdp27X0vP+DZQIOK35pdFbpYPQ9M8P7pGSd1OL2IgVRsKu/KYklsMvZGTtJ/LrnYi8TIuI8s5YD4h/2m66bmGraXUOdrx+ySvIS/afvfB4aBnFsec5hzvItzgGWiop757NZwVOis7M/LFakY5wl1bgtdOAycJB14BrLFZZqcQwZf7VdU8x6hHKcMfUU8Dvnp2iyY5FBAIAAAwA7mQZUE+c0awAAAABJRU5ErkJggg==);
	}
</style>
</head>
<body>
	<div id="container">
	      /* Contenido */
	</div>
</body>
</html>

Puedes ver el ejemplo aquí y descargarte el bundle para texmate desde la web de su autor.

Tener en cuenta que aunque Internet Explorer (ni el 6 ni el 7, el 8 lo hará) no soporta la propiedad data:url siempre podemos identificar el navegador y pasarle al internet explorer la imagen física.

Juntando este método con algunas funciones javascript y php se pueden conseguir resultados realmente interesantes. 

0 Comments

Insert Comment