Incrustado de datos (imágenes) en su CSS o HTML
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
- 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 "" se representa como URL
Ventajas
- Reduce la cantidad de conexiones hacia el servidor, dado que se hace aun más ventajoso si el archivo a recuperar es muy pequeño.
- Permite concentrar múltiples imágenes en un único archivo, lo que puede facilitar la administración del sitio.
- Facilita la inclusión de imágenes en E-Mails html, evitando la inclusión o referencia de otros archivos, aunque podría presentar inconveninete con algunos cliente de correo.
Desventajas
- Se hace más compleja la lectura del CSS, dado que no es simple visualizar la imágen a presentar.
- Aumenta el tamaño de la imágen del órden de 33%.
- Al definir el estilo dentro de la propia página, los datos de la imágen incrustada no tiene posibilidad de ser almacenada en caché, por lo que se transfieren del servidor en cada requerimiento.
- Al utilizar una plantilla CSS general se pueden estar cargando más datos "lastre" de imágenes no utilizadas. Se recomienda permitir el uso de caching para el archivo CSS.
- Se limita el tamaño de archivo, evitar utilizar más de 32KB.
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:
- Manzana
- Pera
- Durazno
- Damasco
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
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:
Al omitir el archivo de entrada, se lee desde la entrada estándar.
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 |