Facebook Twitter Google Digg Reddit Email Imprimir
Miércoles 21 de febrero de 2018
Santoral:
Severino
Otros:
Semana:
08
Día año:
52/365 (14%)
U.F.:
26890.15
IPC:
0,5
Dolar:
595,63
Euro:
735,89
Bitcoin:
U$ 11137.594047619
mindicador.cl
Time4VPS.EU - VPS hosting in Europe

Incrustado de datos (imágenes) en su CSS o HTML

¿Qué ventajas me puede dar?

Introducción

Mediante el uso de url del tipo "data", podemos utilizar un truco en css para cargar un bloque de datos, comunmente imágenes, encapsuladas en el propio archivo de estilo, pero habrá que analizar su alcance, ventajas y desventajas.

Definición

Las URL del tipo data se definen por el RFC 2397, que se define como:

data:[MIME-type][;charset=<encoding>][;base64],datos

Donde:
MIME-type
Define el tipo MIME del contenido como image/png
charset=<encoding>
Define el código de caracteres (opcional), por default se utiliza charset=US-ASCII
base64
Indica codificación base64 para representar el contenido binario
datos
String con los datos codificados en base64

Ésto corresponde a una URL, por lo que podemos copiarla y pegarla en la barra de dirección del Browser y nos mostrará la imagen, dentro de las limitantes del propio browser.

Podemos dar como ejemplo, la imágen "Imagen incrustada de ejemplo" se representa como URL

Ventajas

Desventajas

Formas de Uso

HTML

Se puede utilizar directamente en HTML como insertar una imagen de la forma:

...
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAVUlEQVQIW2NkgILk49v+w9hzLb0YQWwwAZIACUydc+h/doodI4wPZ4AkZs7eyJCe6s8AUwCWNLrKwwCSgAGQgnPaXxjgOqNSFv6/cvkSqk68duJzLQBH00SlYZ4gSwAAAABJRU5ErkJggg==" alt="Imagen incrustada de ejemplo" />
...

CSS

Con CSS tenemos la posibilida de incluirlo como fondo para algún elemento, o como estilo para los items de lista <li>

...
.confondo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAVUlEQVQIW2NkgILk49v+w9hzLb0YQWwwAZIACUydc+h/doodI4wPZ4AkZs7eyJCe6s8AUwCWNLrKwwCSgAGQgnPaXxjgOqNSFv6/cvkSqk68duJzLQBH00SlYZ4gSwAAAABJRU5ErkJggg==');
}
...

Con lo que podemos generar un elemento como:

 
...
ul.ticket {
   list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAARUlEQVQYV5XPURIAEAgE0O3m3ZyaCYlRfNabtRGKj0qO0XIoSMPe0BAYtKAOZTCrOLQn+kVA59cD6ManXzvGCtYlv/oXdgoaEQkmdThOAAAAAElFTkSuQmCC');
}
...

Con lo que obtenemos una lista como:

Conversión de imágen

Desde CentOS, se tiene el comando base64 que permite la conversión de imágen a base64. Para agregarlo en nuestra págino o CSS se recomienda agregar la opción "-w 0" para evitar los cortes de línea, y agrego al final "; echo" para forzar un fin de línea y separar del prompt

base64 mydot.png -w 0; echo
iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAVUlEQVQIW2NkgILk49v+w9hzLb0YQWwwAZIACUydc+h/doodI4wPZ4AkZs7eyJCe6s8AUwCWNLrKwwCSgAGQgnPaXxjgOqNSFv6/cvkSqk68duJzLQBH00SlYZ4gSwAAAABJRU5ErkJggg==

Para la conversión inversa, desde base64 a png, asumiendo que el texto base64 se grabó en el archivo mydot.base64, se ejecuta el comando:

base64 -d -i mydot.base64 > mydot.png

Al omitir el archivo de entrada, se lee desde la entrada estándar.

Escrito por: Luis Hernán de la Barra, 14/10/2014

Generado por Sistema y almacenado en cache

Wyzer
Luis Hernán de la Barra
E-Mail:ldelabar@wyzer.cl
Web:www.wyzer.cl