Cómo se usa
- Suelta un GIF en la zona de arrastre, haz clic para elegir uno o pega una imagen.
- Deja Convertir a en Mantener original y Ancho máximo en Tamaño original para conservar la animación.
- Comprueba el tamaño original y el codificado; los GIF animados crecen rápido.
- Copia la salida de etiqueta img o de background-image de CSS, o usa la versión en data URI, Base64 puro o Markdown.
Acerca del formato GIF
GIF (Graphics Interchange Format, tipo MIME image/gif) data de 1987. Cada fotograma usa una paleta de 256 colores como máximo, comprimida sin pérdida con LZW. La transparencia es de todo o nada: una entrada de la paleta puede marcarse como transparente, pero no hay opacidad parcial. Un archivo puede contener muchos fotogramas con retardos individuales y un número de repeticiones, y por eso GIF se convirtió en el formato de las animaciones cortas.
El Base64 de un GIF empieza por R0lGODlh en la versión habitual GIF89a, o por R0lGODdh en la antigua GIF87a.
Cómo conservar la animación
Si mantienes el formato original, la herramienta codifica los bytes del archivo tal como están. Por tanto, el data URI se anima exactamente igual que el archivo, tanto si lo usas en una etiqueta <img> como si lo usas como fondo CSS.
Convertir a PNG, JPEG o WebP, o fijar un ancho máximo, vuelve a dibujar la imagen en el navegador, y solo se conserva el primer fotograma. Es útil cuando quieres una vista previa estática de una animación, pero para la versión animada deja ambas opciones sin activar.
Dónde siguen teniendo sentido los data URI GIF
- Pequeños indicadores de carga e iconos de estado animados en CSS.
- El clásico píxel transparente de 1x1, usado como
srcprovisional. Ocupa solo unas decenas de bytes y bastante menos de 100 caracteres en Base64. - Dibujos de líneas sencillos con pocos colores, en los que GIF resulta compacto.
Las animaciones grandes no encajan bien. Un GIF de reacción de 2 MB se convierte en unos 2,7 MB de texto que no se pueden guardar en caché por separado; un archivo de video alojado o un WebP animado es mucho más ligero.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Preguntas frecuentes
¿Mi GIF seguirá animado después de codificarlo en Base64?
Sí, siempre que mantengas el formato original y no lo redimensiones. Base64 guarda el archivo completo, incluidos todos los fotogramas y el ajuste de repetición.
¿Por qué mi GIF dejó de moverse tras la conversión?
Convertir a PNG, JPEG o WebP, o redimensionar, vuelve a renderizar la imagen a partir de su primer fotograma. La herramienta no puede crear archivos PNG o WebP animados, así que mantén el GIF original para conservar el movimiento.