GIF a Base64

Cómo convertir un GIF a Base64

1. Suelta un archivo .gif en el recuadro o elígelo con el selector de archivos.
2. Si el GIF está animado, no toques Ancho máx., Convertir a ni Quitar metadatos (EXIF).
3. Elige Salida como: Data URI, CSS background-image, HTML <img>, Markdown o Base64 simple.
4. Pulsa Copiar salida. El indicador muestra cuánto más grande es el texto que el archivo.

La vista previa reproduce la animación, así puedes comprobar que es el archivo correcto antes de copiar.

La animación y las opciones de recodificación

Las opciones sobre la salida redibujan la imagen en un canvas. Un canvas contiene una sola imagen fija y los navegadores no pueden escribir archivos GIF a partir de él, así que un GIF recodificado sale como PNG (o JPEG o WebP si eliges uno) solo del primer fotograma. Eso sirve para una miniatura estática de una animación; para conservar la animación, deja las opciones desactivadas.

Si un GIF animado es demasiado grande, hay que arreglarlo antes de esta herramienta: reduce el número de fotogramas, las dimensiones o la paleta de colores en un editor de GIF, o sustitúyelo por un MP4 o WebM corto en bucle, que suele ser mucho más pequeño que el mismo clip en GIF.

Cómo es el Base64 de un GIF

El GIF transparente de 1×1 de abajo ocupa 42 bytes, 56 caracteres de Base64:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1" height="1">

Antes rellenaba maquetaciones con tablas y todavía aparece como src provisional en imágenes con carga diferida, porque una imagen válida evita el icono de imagen rota y una petición extra.

Tamaño de un GIF animado en Base64

La compresión de GIF es débil para los estándares actuales, y los GIF animados guardan cada fotograma. Un GIF de reacción de dos segundos puede ocupar fácilmente unos megabytes, que se convierten en varios megabytes de texto Base64. Incrusta solo GIF pequeños, como spinners de carga o iconos diminutos. Para cualquier cosa mayor, un archivo normal se puede guardar en caché y cargar de forma diferida, mientras que un data URI se descarga de nuevo con cada página que lo contiene.

El correo no se lleva bien con los GIF en Base64. Gmail y otros clientes de webmail no muestran imágenes en data URI, así que los GIF animados de los boletines se enlazan como archivos alojados. Consulta Base64 en el correo electrónico.

Codificar un GIF en Node.js

import { readFileSync } from "node:fs";

const gif = readFileSync("spinner.gif");
const uri = `data:image/gif;base64,${gif.toString("base64")}`;

Base64 en Node.js cubre streams y salida URL-safe. Para convertir una cadena Base64 de nuevo en un archivo reproducible, usa Base64 a GIF.

Preguntas frecuentes