Facebookfacebook Twitter Emailmail Imprimirprint
Martes 19 de marzo de 2024
Santoral:
José
Otros:
Semana:
12
Día año:
79/366 (22%)
U.F.:
Sin información
IPC:
Sin información
Dolar:
Sin información
Euro:
Sin información
Bitcoin:
U$ {bitcoin}
mindicador.cl

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
Si tiene interés por alguno de éstos servicios u otro similar, por favor llene el formulario de contacto

Generado por Sistema y almacenado en cache

Wyzer
Luis Hernán de la Barra
Teléfono:   +56995451689
WhatsApp:   +56995451689
E-Mail:info@wyzer.cl
Web:www.wyzer.cl