# MP4 vs WebM: qué formato de vídeo exportar [Canonical HTML page](https://gradiently.design/es/guide/mp4-vs-webm) Dos contenedores, un puñado de códecs y una pregunta práctica: qué archivo le das a Instagram y cuál pones en tu web. ## The short version - MP4 es el formato de vídeo más seguro para exportar porque se reproduce en casi cualquier móvil, navegador, editor y red social. - WebM es un formato abierto y libre de royalties que suele pesar menos que MP4 con una calidad similar, lo que lo hace útil en webs. - Para subir a redes sociales, exporta en MP4, porque las plataformas lo aceptan sin problemas y de todos modos vuelven a codificarlo todo. - En una web, un patrón habitual es ofrecer primero WebM y MP4 como alternativa dentro de un mismo elemento video. - WebM puede llevar transparencia en los navegadores que la admiten, algo que un MP4 normal con H.264 no puede. En la elección **MP4 vs WebM**, exporta en MP4 cuando subas a cualquier sitio que no controlas, como Instagram, TikTok, LinkedIn, el correo de un cliente o un editor de vídeo, porque se reproduce casi en todas partes. Elige WebM para tu propia web, donde suele pesar menos con la misma calidad, y lo ideal es ofrecer los dos para que cada navegador elija el que mejor reproduce. Eso cubre la mayoría de las decisiones. El resto de la página explica por qué, y los pocos casos en los que la respuesta cambia. ## Qué son realmente MP4 y WebM Los dos son **contenedores**: cajas que guardan una pista de vídeo, una de audio y algo de información sobre ellas. Lo que decide la calidad y el tamaño es el **códec** de dentro. MP4 suele llevar vídeo H.264 y audio AAC, a veces H.265 o AV1. WebM lleva vídeo VP8, VP9 o AV1 con audio Opus o Vorbis. WebM se creó como formato abierto y libre de royalties para la web; MP4 es el estándar consolidado en torno al cual se construyeron cámaras, móviles y software de edición. | Característica | MP4 | WebM | | --- | --- | --- | | Códecs de vídeo habituales | H.264, H.265, AV1 | VP8, VP9, AV1 | | Códecs de audio habituales | AAC | Opus, Vorbis | | Tamaño de archivo | Pequeño | A menudo menor con calidad similar | | Se reproduce en | Casi todo | Navegadores modernos; más irregular en apps y editores | | Subidas a redes | Aceptado en todas partes | No se acepta de forma fiable | | Transparencia | No con H.264 | Sí, con VP9 en navegadores compatibles | | Licencias | Algunos códecs tienen licencias de patentes | Abierto y libre de royalties | La visión general. La compatibilidad cambia con el tiempo, así que consulta caniuse antes de depender de un caso límite. ## Qué formato usar en redes sociales Exporta en MP4. Todas las grandes plataformas lo aceptan, y todas vuelven a codificar lo que subes, así que un WebM más ligero no te aporta nada una vez allí. Lo que de verdad cambia cómo se ve tu vídeo tras subirlo es el tamaño del fotograma, la frecuencia de fotogramas y la calidad del archivo que envías. Envía un MP4 limpio de 1080×1920 para Reels e historias, o de 1080×1350 para una publicación vertical en el feed, y la plataforma no tendrá nada que reescalar. - Reel, historia, TikTok 9:16: 1080 × 1920 - Publicación vertical 4:5: 1080 × 1350 - Publicación cuadrada 1:1: 1080 × 1080 - Horizontal 16:9: 1920 × 1080 Los formatos que más vas a exportar. Todos deberían subirse en MP4. Para la lista completa de formatos por plataforma, mira [tamaños de vídeo para redes sociales](https://gradiently.design/es/guide/social-video-sizes). ## Qué formato usar en una web En tu propia web controlas el reproductor, así que puedes ofrecer los dos. El navegador lee los elementos `source` en orden y reproduce el primero que admite. Pon WebM primero si tu archivo WebM es el más ligero de los dos, y deja MP4 como alternativa para cualquier navegador que no pueda reproducirlo. ```html ``` WebM primero, MP4 como alternativa. El póster se muestra mientras carga el vídeo y para quien tenga un navegador que no pueda reproducir ninguno. Mide antes de dar nada por hecho. En algunos clips, sobre todo los muy cortos o muy sencillos, un MP4 bien codificado pesa lo mismo que el WebM, y servir un solo archivo es más sencillo. La guía de MDN sobre [códecs de vídeo web](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs) es la referencia de lo que reproduce cada navegador. Si el clip es un fondo, [vídeos de fondo en webs](https://gradiently.design/es/guide/video-background-website) cubre imágenes de póster, tamaños y rendimiento. ## Convertir entre MP4 y WebM Si tienes un formato y necesitas el otro, la herramienta gratuita de línea de comandos FFmpeg hace la conversión en los dos sentidos. Los comandos de abajo son un punto de partida sensato para bucles diseñados: sin audio, buena calidad y un MP4 que empieza a reproducirse antes de descargarse del todo. ```bash # WebM to MP4 (H.264), ready for social uploads and the web ffmpeg -i loop.webm -c:v libx264 -crf 20 -preset slow \ -pix_fmt yuv420p -movflags +faststart -an loop.mp4 # MP4 to WebM (VP9), usually smaller for your website ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 32 -b:v 0 -an loop.webm ``` Un CRF más bajo significa más calidad y archivos más grandes. Quita -an si el vídeo tiene sonido que quieres conservar. > **Por qué importa yuv420p** Algunos codificadores generan archivos MP4 en un formato de color que móviles y navegadores se niegan a reproducir. Indicar `yuv420p` mantiene el archivo en el formato que todo entiende. ## Degradados, bandas y calidad Los degradados suaves son lo más difícil de comprimir. Las grandes superficies de color que cambia despacio delatan cualquier falta de bits en forma de escalones visibles, y los degradados oscuros lo muestran primero. Los dos formatos lo resuelven bien con una calidad generosa; ninguno lo hace con una calidad tacaña. Un toque de grano en el diseño ayuda mucho, porque los codificadores conservan la textura en lugar de aplanarla en bandas. - Suave: bitrate suficiente: `linear-gradient(180deg, #0b1026 0%, #1e3a8a 55%, #60a5fa 100%)` - Escalonado: codificador sin bits: `linear-gradient(180deg, #0b1026 0% 20%, #13234f 20% 40%, #1e3a8a 40% 60%, #3f6fc4 60% 80%, #60a5fa 80% 100%)` Una visión exagerada de las bandas. La solución es la misma en MP4 y WebM: más calidad, un poco de grano y ningún reescalado extra. Las causas y soluciones para imágenes fijas están en [bandas en degradados](https://gradiently.design/es/guide/gradient-banding). La versión animada añade una regla más: exporta al tamaño exacto en que vas a publicar, para que nada se escale dos veces. ## Dónde encaja el GIF El GIF no es un formato de vídeo y es el más pesado de los tres para el mismo bucle, con un límite de 256 colores que crea bandas en los degradados. Su único bastión es el correo electrónico, donde la mayoría de las bandejas muestran GIF y muy pocas reproducen vídeo. La comparación a tres está en [GIF vs MP4](https://gradiently.design/es/guide/gif-vs-mp4), y el oficio de hacer uno bueno, en [GIF animados](https://gradiently.design/es/guide/gif-maker-tips). ### Exporta MP4 para - Instagram, TikTok, LinkedIn, X, YouTube - Enviar a un cliente o a un editor - Presentaciones y pantallas que no controlas - Cualquier caso en que tengas dudas ### Exporta WebM para - Tu propia web, junto a un MP4 - Superposiciones que necesitan transparencia en el navegador - Páginas en las que cada kilobyte cuenta - Herramientas del navegador que graban WebM de forma nativa En Gradiently, exportar vídeo es una función de Pro y sale en MP4 o WebM, según lo que pueda grabar tu navegador. En cualquier caso obtienes el Mark en movimiento detrás de tus palabras hasta 1080p, listo para subir o incrustar. Los detalles están en [exportar imágenes y bucles](https://gradiently.design/es/guide/export-images-and-loops). ## FAQ ### ¿Es mejor WebM que MP4? WebM suele pesar menos con calidad similar y es abierto y libre de royalties, pero MP4 se reproduce en muchos más dispositivos y apps. Para webs, WebM es una buena primera opción con MP4 como alternativa; para todo lo demás, MP4 es más seguro. ### ¿Puedo subir WebM a Instagram o TikTok? No cuentes con ello. Conviértelo antes a MP4, que todas las plataformas aceptan, al tamaño exacto del formato que vas a publicar. ### ¿Safari reproduce WebM? Las versiones recientes de Safari reproducen WebM, pero la compatibilidad llegó más tarde que en otros navegadores y ha variado según el códec y el dispositivo. Ofrecer un MP4 como alternativa evita la duda. ### ¿Qué pesa menos, MP4 o WebM? WebM con VP9 o AV1 suele pesar menos que MP4 con H.264 con calidad similar, pero no siempre. Codifica los dos y compara los archivos reales. ### ¿Qué formato admite vídeo transparente? WebM con VP9 puede llevar un canal alfa que muestran los navegadores compatibles. Un MP4 estándar con H.264 no puede.