Cómo convertir una imagen a un data URI en base64, y cuándo no hacerlo

Convertir un archivo en un data URI siempre funciona. Ese es justamente el problema: nada en la conversión te avisa de que pegar una fotografía de 200 KB en una hoja de estilos acaba de volver más lenta cada página que la carga. La codificación toma segundos. La parte que vale la pena hacer bien es decidir si conviene usarla.

Primero, dos términos

Un data URI es un URI que lleva los bytes de un archivo dentro de sí mismo en lugar de apuntar a un archivo que está en otro lugar. Se escribe como data:, el tipo MIME del archivo, ;base64, y luego los bytes codificados, así que un PNG empieza por data:image/png;base64,.

Base64 es la codificación que permite meter datos binarios en un texto sin riesgo. Toma el archivo de tres en tres bytes, divide esos 24 bits en cuatro grupos de 6 y escribe cada grupo como un carácter de un alfabeto de 64 (2⁶ = 64). Entran tres bytes y salen cuatro caracteres, sea cual sea el contenido.

Cómo convertir el archivo

1. Abre el convertidor de data URI y pulsa “Choose a file” (elige un archivo), o suelta el archivo en cualquier parte de la página. Acepta cualquier cosa: imágenes, SVG, fuentes. También funciona el código SVG pegado fuera de un cuadro de texto, y “Try a sample” (prueba un ejemplo) carga un ícono pequeño.
2. Lee las tres cifras que aparecen: “File” (el original), “Inlined” (el data URI completo, con el prefijo incluido) y “Overhead” (la diferencia en porcentaje).
3. Lee la línea que está debajo. Dice “Reasonable to inline.” (es razonable incrustarlo) o “Use a normal file reference instead.” (usa mejor una referencia normal al archivo), seguido de los motivos.
4. Copia uno de los tres cuadros con su enlace de copia: “Data URI” (la cadena tal cual), “CSS” (una declaración background-image con el URI entre comillas, ya que base64 puede contener una barra) o “HTML” (una etiqueta <img> para imágenes y un enlace de descarga para todo lo demás). También puedes elegir el fragmento en “Copy as” (copiar como) y copiarlo con el botón grande que hay debajo, o descargarlo como archivo .txt desde la barra inferior.

El fragmento HTML escribe alt="", lo que les indica a los lectores de pantalla que la imagen es decorativa. Si la imagen transmite información, reemplázalo por una descripción antes de pegarlo.

A dónde va el tercio extra

La proporción 4:3 es fija, así que el base64 de cualquier archivo es predecible: cuatro caracteres por cada tres bytes, redondeado hacia arriba a un grupo completo de cuatro. La cifra “Inlined” de la herramienta también cuenta el prefijo, y por eso en archivos pequeños el sobrecosto aparece un punto o algo más por encima del 33%: data:image/png;base64, ya ocupa 22 caracteres por sí solo.

Archivo	Bytes	Solo base64	Data URI completo	Sobrecosto mostrado	Lo que dice la herramienta
Icono PNG	3 072	4 096	4 118	+34%	Reasonable to inline
Icono SVG	3 072	4 096	4 122	+34%	Reasonable to inline
PNG, un byte por encima del límite	4 097	5 464	5 486	+34%	Use a normal file reference instead
Fotografía JPEG	204 800	273 068	273 091	+33%	Use a normal file reference instead, con tres motivos

Cada fila es pura aritmética: 4 × ⌈3 072 ÷ 3⌉ = 4,096, y 4 096 + 22 = 4 118. El prefijo de SVG, data:image/svg+xml;base64,, tiene 26 caracteres; el de JPEG, 23.

La compresión del servidor recupera parte de ese tercio durante la transferencia, pero menos de lo que esperarías, porque base64 desordena los patrones de bytes repetidos de los que depende un compresor.

El límite de 4 096 bytes y lo que cuesta pasarlo

El veredicto depende del tamaño del archivo original. Hasta 4 096 bytes, la herramienta aprueba la incrustación: una solicitud menos y nada que gestionar en la caché. Con 4 097 bytes cambia a “Use a normal file reference instead”, y los motivos se acumulan a medida que crece el archivo.

• Caché, para cualquier archivo por encima del límite. Un archivo externo se descarga una vez y se reutiliza en todas las páginas. Uno incrustado viaja dentro del archivo que lo contiene, así que se vuelve a descargar con cada documento u hoja de estilos que lo incluye.
• Imágenes adaptables, para imágenes por encima del límite. Un data URI no tiene una URL sobre la cual el navegador pueda negociar, así que pierdes srcset, la carga diferida y cualquier optimización de imagen que habría aplicado una CDN. Una fuente por encima del límite recibe el aviso de caché, pero no este.
• Bloqueo del renderizado, a partir de 32 768 bytes (8 × 4 096). En una hoja de estilos, el base64 tiene que llegar antes de que la página pueda renderizarse, y un solo cambio de CSS que no tiene nada que ver invalida la copia en caché de todos los recursos incrustados junto a él.

La fotografía de 200 KB de la tabla cumple los tres. La frase de la propia herramienta para ella dice “At 200 KB this becomes roughly 267 KB inlined” (con 200 KB, esto se convierte en unos 267 KB incrustado), y esos 267 KB viajan con la hoja de estilos en cada visita en la que la hoja de estilos todavía no está en caché.

Cuándo un data URI es la decisión correcta

Pequeño, usado en un solo lugar y autónomo: un único icono dentro de un bloque de estilos en línea es el caso de manual. Haz el archivo lo más pequeño posible antes de codificarlo, porque cada 3 bytes que ahorras le quitan 4 caracteres al resultado. Un SVG puede pasar primero por el optimizador de SVG, y un PNG por el compresor de imágenes, que lo reescribe sin cambiar un solo píxel.

	El convertidor de data URI	El comando base64	Un codificador en línea simple
El archivo sale de tu equipo	No	No	Depende del servicio
Prefijo data: y tipo MIME	Los escribe por ti	Los agregas tú	Varía
Tamaño mostrado con el prefijo	Sí, como “Inlined”	No	Varía
Consejo sobre si incrustar	Sí, con motivos	No	Rara vez

Otras formas de hacerlo

En la línea de comandos, la herramienta base64 se encarga de la codificación:

base64 -i icon.png        # macOS
base64 -w0 icon.png       # GNU/Linux

Su salida es solo la cadena base64. Para usarla como data URI, antepón data:image/png;base64,, con el tipo MIME que corresponda al archivo; si el tipo es incorrecto, puede que el archivo no se muestre: los navegadores deducen algunos tipos de imagen a partir de sus bytes, pero un SVG tiene que estar etiquetado como image/svg+xml.

Cómo comprobar que no se subió nada

El archivo se lee en la memoria de tu navegador y se codifica ahí, lo que también significa que no hay más límite de tamaño que tu propia memoria. Para confirmarlo, abre las herramientas para desarrolladores de tu navegador en la pestaña Network (Red) antes de soltar un archivo: la codificación no agrega ninguna solicitud.

Haz la conversión, y toma la decisión, en el convertidor de data URI. Si el veredicto dice que no conviene incrustarlo, reducir el archivo con el compresor de imágenes y servirlo de forma normal suele ser mejor negocio.