¿Hace falta generar MP4 y WEBM a la vez?

Si lo vas a usar en tu propia web, sí, porque servir los dos juntos da a la vez eficiencia y compatibilidad. Los navegadores modernos toman el WEBM, que es más pequeño, y los antiguos recurren al MP4. Si tienes que elegir un solo archivo, el MP4 es más seguro: funciona en todas partes. La ventaja del WEBM está solo en el tamaño del archivo, y suele rondar el 20-30 %.

¿Qué pasa si convierto a vídeo un GIF con transparencia?

La transparencia se pierde. Los códecs de vídeo habituales no transportan canal alfa y los píxeles transparentes suelen rellenarse de negro o de blanco. Si hay que conservar la transparencia, elige WEBP animado o APNG en lugar de vídeo; ambos admiten alfa de 8 bits y dan mejor resultado que la transparencia binaria del GIF.

¿El WEBP animado es tan pequeño como un vídeo?

No, suele ser dos o tres veces más grande. Pero ocupa aproximadamente un tercio de lo que ocupa un GIF y conserva la transparencia. El orden queda así: el vídeo es el más pequeño, el WEBP está en medio, el APNG es mayor y el GIF es el más grande. Si no necesitas transparencia, el vídeo siempre es más eficiente.

¿Debería borrar mis archivos GIF después de convertirlos?

No los borres enseguida. Guárdalos un tiempo, porque algunos entornos pueden seguir necesitando GIF: boletines de correo, mensajes antiguos de foros, ciertos gestores de contenido. Además, si detectas algún problema en la conversión tendrás que volver al original. Si has hecho una conversión masiva en toda la web, puedes archivarlos cuando pasen unas semanas sin incidencias.

¿Convertir el GIF a MP4 o a WEBM? Comparativa del formato de destino

Has decidido convertir tu GIF. Ahora viene la pregunta del destino: ¿MP4, WEBM, WEBP animado o APNG? Los cuatro son más pequeños que el GIF y los cuatro hacen concesiones distintas. En este artículo analizamos cuál es el correcto en cada situación.

Resumen de los cuatro formatos de destino

MP4 (H.264): el formato de vídeo más extendido. Soporte universal.

WEBM (VP9): formato de vídeo abierto. A igual calidad es más pequeño que el MP4 y está admitido en los navegadores modernos.

WEBP animado: se comporta como un formato de imagen (se usa con la etiqueta <img>), admite color completo y transparencia alfa.

APNG: la versión animada del PNG. Color completo, alfa de 8 bits y se comporta como una imagen.

Tabla comparativa

Para un GIF de 5 segundos, 480×270 y 15 fps, a grandes rasgos:

| Criterio | GIF (origen) | MP4 | WEBM | WEBP anim. | APNG | |---|---|---|---|---|---| | Tamaño típico | 4 MB | 400 KB | 300 KB | 1,2 MB | 2,5 MB | | Transparencia alfa | Binaria | No | No | 8 bits | 8 bits | | Etiqueta HTML | <img> | <video> | <video> | <img> | <img> | | Reproducción automática | Nativa | Atributo | Atributo | Nativa | Nativa | | Soporte de navegador | Universal | Universal | Moderno | Moderno | Moderno | | Soporte en correo | Bueno | No | No | No | Débil | | Croma a resolución completa | Sí | No (4:2:0) | No (4:2:0) | Sí | Sí |

La última fila es importante: los formatos de vídeo guardan la información de color a media resolución (submuestreo de croma 4:2:0), lo que provoca una leve borrosidad en los bordes de color nítidos. WEBP y APNG no hacen eso.

Escenario 1: animación de producto en una web

Se reproducirá sola en la página y no hace falta transparencia.

Ganador: WEBM + MP4 juntos.

<video autoplay muted loop playsinline poster="previsualizacion.jpg">
  <source src="animacion.webm" type="video/webm">
  <source src="animacion.mp4" type="video/mp4">
</video>

Los navegadores modernos toman el WEBM, más pequeño, y los antiguos recurren al MP4. Generar dos archivos es un pequeño trabajo extra, pero aporta eficiencia y compatibilidad a la vez.

Si tienes que elegir un solo archivo, quédate con el MP4; la ventaja del WEBM es una diferencia de tamaño del 20-30 % y puede no compensar el riesgo de compatibilidad.

Escenario 2: animación de logotipo con fondo transparente

Se verá el contenido de la página que hay detrás.

Ganador: WEBP animado.

Los formatos de vídeo no admiten en la práctica la transparencia alfa. En este escenario, MP4/WEBM quedan descartados por completo.

WEBP frente a APNG:

| Aspecto | WEBP anim. | APNG | |---|---|---| | Tamaño de archivo | Más pequeño | 2-3 veces mayor | | Soporte de navegador | Navegadores modernos | Algo más amplio | | Opción con pérdidas | Sí | No (siempre sin pérdidas) |

El WEBP suele ser la mejor elección porque, gracias a su modo con pérdidas, produce archivos mucho más pequeños y el soporte en navegadores modernos es suficiente.

El caso en que elegirías APNG: cuando la calidad sin pérdidas es imprescindible (por ejemplo, una animación de interfaz que debe quedar perfecta píxel a píxel) y el tamaño del archivo es secundario.

Los dos son muy superiores a la transparencia binaria del GIF: con 256 niveles de transparencia consiguen bordes suaves, sin los dientes de sierra del GIF.

Escenario 3: animación de grabación de pantalla (demostración de interfaz)

Una grabación que muestra cómo se usa un programa y que contiene texto.

Ganador: WEBM o WEBP animado, atención al problema del croma.

En este escenario el submuestreo de croma puede ser un problema real. Los códecs de vídeo guardan la información de color a media resolución y eso genera borrosidad en los bordes nítidos del texto en color. Los textos de interfaz de cuerpo pequeño pueden volverse ilegibles.

Hay dos soluciones:

1. Usa una resolución alta. Si el texto ocupa suficientes píxeles, el suavizado del croma no se nota. Mantén la grabación en su resolución original.

2. Usa WEBP. El WEBP mantiene la resolución de color completa, no aplica submuestreo de croma. El texto se queda nítido. El archivo saldrá mayor que el vídeo, pero si la legibilidad es crítica merece la pena.

Algunos codificadores de vídeo admiten el perfil 4:4:4 (resolución de croma completa). Si lo tienes disponible, úsalo, pero comprueba el soporte del navegador.

Escenario 4: boletín de correo

Ganador: GIF, no lo conviertas.

Casi ningún cliente de correo reproduce vídeo. El soporte de WEBP y APNG también es débil.

Deja el GIF tal cual, pero optimiza su tamaño: acorta la duración (2-3 segundos), baja la resolución (300-400 px), reduce la velocidad de fotogramas (10 fps) y, si hace falta, baja el número de colores a 128.

Y una nota importante: algunos clientes de correo (sobre todo ciertas versiones de Outlook) muestran solo el primer fotograma del GIF. Diseña ese primer fotograma de forma que tenga sentido por sí solo.

Escenario 5: demostración paso a paso en una entrada de blog

Una animación corta que muestra cómo se hace una operación.

Ganador: vídeo MP4/WEBM, pero piensa en el control del usuario.

En este escenario hay una decisión de experiencia de usuario. Una animación que se reproduce sola puede distraer mientras la persona todavía está leyendo el texto, y que entre en bucle una y otra vez puede resultar molesto.

Alternativa: da control de reproducción al usuario con el atributo controls y no uses autoplay. La persona la arranca cuando está lista, la puede pausar y rebobinar.

En animaciones largas o densas en información esta suele ser la mejor opción. En animaciones cortas y decorativas, la reproducción automática es adecuada.

Escenario 6: optimización masiva de un sitio

Tienes decenas de GIF en tu web y vas a convertirlos todos.

Ganador: WEBM + MP4, con un enfoque sistemático.

El orden:

1. Haz un inventario. ¿Qué GIF hay, dónde están y cuánto pesan? Empieza por los archivos más grandes; la ganancia es proporcional.

2. Separa los que necesitan transparencia. Esos deben ir a WEBP, no a vídeo.

3. Genera la pareja para los destinos de vídeo. WEBM + MP4.

4. Actualiza el HTML. Convierte las etiquetas <img src="x.gif"> en bloques <video>. Añade el atributo poster.

5. Mide. Compara antes y después con herramientas de velocidad de página. La diferencia suele verse de inmediato.

6. No borres los GIF enseguida. Guárdalos unas semanas; si detectas un problema debes poder volver atrás. Además, puede que todavía los necesites para boletines de correo.

Ajustes de calidad

Elijas el formato que elijas, los ajustes importan:

Para MP4/WEBM: usa CRF (factor de calidad constante). Para H.264 es habitual el rango 18-23 y para VP9 el 28-33 (valores más bajos, mejor calidad). En vídeos procedentes de un GIF, como la fuente ya es simple, incluso los ajustes de más calidad dan tamaños razonables.

Para WEBP: un valor de calidad entre 75 y 90 es un buen equilibrio para la mayoría de contenidos. También existe el modo sin pérdidas, pero el archivo crece notablemente.

Común a todos: no aumentes la resolución. Si tu GIF tiene 400 píxeles de ancho, hacer el vídeo de 800 no añade detalle, solo agranda el archivo.

Resumen de la decisión

Decide con tres preguntas:

1. ¿Necesitas transparencia? Sí → WEBP animado (o APNG si hace falta sin pérdidas).

2. ¿Es un correo o un entorno de foro antiguo? Sí → déjalo como GIF, solo optimízalo.

3. Cualquier otro caso → WEBM + MP4 juntos. Si hay que elegir un solo archivo, MP4.

Nota adicional: en grabaciones de pantalla con texto nítido, el submuestreo de croma de los formatos de vídeo puede reducir la legibilidad. En ese caso, mantén una resolución alta o pásate a WEBP.