Cómo usar base64 para gráficos en HTML, ¿merece la pena?

En mi habitual ─y creo que sana─ obsesión por acelerar más y más los sitios webs que construimos en Infinitum volví a encontrarme con un asunto que lleva tiempo hablándose entre desarrolladores y diseñadores web: se trata de la opción de incrustar imágenes en el código fuente de HTML codificadas en base64, con lo cual se evita cargar las imágenes aparte con múltiples peticiones HTTP ─una petición http por cada archivo─, acelerando la carga total del sitio.

To base64 or not to base64

Base64 es una codificación muy usada en correo (como en las extensiones MIME para adjuntos) que sirve para cualquier tipo de archivo, usando 2⁶ (64) como base. Esto es, números de 0 a 9, letras de la "a" a la "z" más todas las mayúsculas y símbolos que completan la colección hasta alcanzar 64 caracteres diferentes. Un texto codificado en base64 queda bastante ininteligible y Matrix, difícil de manejar a mano. Como para quejarse de tener que leer colores RGB en hexadecimal o IPs en binario (≧ ᗜ ≦)

Bromas aparte, funciona de manera muy simple: dentro del HTML ─o de la hoja de estilo CSS─ se define, bien como etiqueta de imagen o de background un código que podrá acelerar la carga de la web en general al fusionar varios archivos de imágenes con el HTML/CSS, quedando todo compactado en un único y reluciente archivo. Suena bien, ¿no? Veamos cómo funciona entonces.

¿Cómo uso base64 en mi código?

Lo primero es codificar la imagen o contenido que quieras usar con una herramienta o comando (por ejemplo, en PHP se puede usar base64_encode combinado con file_get_contents(imagefile). Pero lo más sencillo y rápido es usar una web online como este Codificador/Decodificador que traduce el archivo a base64.

Después solo tienes que declararlo en el código HTML, como fuente (src), especificando la cabecera data:image/png;base64, quedando de la siguiente manera la llamada a la imagen. Usaremos el favicon de nuestro logo Cosmox como conejillo de indias virtual, en formato PNG y de dimensiones 16x16.

¡Magia! También se puede incluir dentro de CSS como regla en una clase o ID por ejemplo usando la propiedad background. En el ejemplo siguiente lo aplicaremos como si fuera una textura que se repite en el fondo de una capa div.

Te invito a hacer la prueba con ambos ejemplos. Lo que sucede detrás del escenario (término teatral, sorry ဖ ͜ ဖ) es que el navegador decodifica el contenido en base64 y lo convierte en una imagen, estando disponible de manera inmediata para mostrar dentro del código HTML. Se puede usar para webs muy "pesadas" con muchas miniaturas (Google lo hace, si mal no recuerdo, en determinados servicios suyos). O para simplificar webs en una sola página compacta. O incluso en la firma del correo electrónico. En este último caso se cargarían las imágenes incluso si el cliente de correo bloquea la carga de imágenes externas (comportamiento muy habitual por defecto en casi todos los clientes, por seguridad). Aunque esto último también puede levantar sospechas en filtros antispam y antivirus...

Sin entrar en detalles y después de haber leído unos cuantos debates técnicos no me eternizo y resumo aquí los pros y contras de usar esta técnica.

A favor

• Reduce las peticiones HTTP(S) de imágenes a una: el archivo HTML o CSS principal.
• Al no depender de archivos externos, minimiza los errores 404 o de conectividad (timeout).
• Usado en correo electrónico evita usar adjuntos o imágenes incrustadas y se cargarán siempre al no depender de webs externas.

En contra

• Depende del uso y proceso de CPU y del navegador, que tienen que traducir el código en base64 en imagen. Esto en móviles lentorros o tabletas algo viejunas puede ser un pequeño/gran problema de rendimiento.
• La decodificación se realiza cada vez que se carga o refresca la página web, sin posibilidad de caché.
• Con archivos de imagen grandes resultan archivos muy pesados, hasta un 33% más de tamaño en disco, comparado con la tradicional carga HTML src o CSS background
• Modificar una imagen implica modificar la codificación en Base64 y por ende el HTML "enterito"

Entonces, ¿qué hago? ¿Uso base64 o no? ¡No puedo decidirme!

¡Yo tampoco! De momento sí que he decidido seguir confiando en la caché tanto del navegador como del lado servidor para nuestros sitios webs, básicamente porque en dispositivos móviles u ordenadores no muy potentes podría provocar problemas de ejecución. No me gusta tampoco el hecho de que en imágenes grandes su rendimiento frente a la carga tradicional es bastante peor, al crecer en tamaño entre un 30-33%, un peso final en bytes nada desdeñable.

Sin embargo, para iconos pequeños, texturas, y demás, puede ser muy interesante, y aunque me pareció leer en algún blog que desaconsejaban su uso no descarto hacer experimentos más allá de estos casos... La idea de tener una web exclusivamente hecha sin imágenes de ningún tipo, con puros vectores de SVG y base64 es MUY atractiva.

De hecho ya lo he incluido en varias firmas de correos electrónicos y con iconos pequeños está clara la ventaja :) Y si nos ponemos en modo extremo-laboratorio-imposible, base64 también sirve para otro tipo de archivos: microvideos, gifs, audios cortos, etc. ¿Algún lector espontáneo de este artículo se atreve a hacer pruebas? ¡Que avise!

Resumen: To base64 or not to base64? Bueno, yo diría que sí a base64... pero solo un poco ^‿^