MP4 vs WebM para la web - cuando usar cada formato
freetoolonline.com Editorial Team
MP4 (H.264) y WebM (VP9/AV1) son los dos formatos de video para la web. MP4 es el estandar universal; WebM entrega archivos 30-40% mas pequenos en navegadores modernos con codecs libres de regalias. Esta guia cubre los compromisos de codec, soporte de navegadores en 2026 y las tres decisiones de produccion.
Contenedor vs codec - lo que realmente contiene cada archivo
Un contenedor envuelve video, audio y metadatos en un solo archivo que un reproductor puede leer. MP4 (ISO base media) y WebM (un perfil Matroska restringido) son ambos contenedores. El codec es como se comprimen los pixeles del video y las muestras de audio. Un MP4 puede, en teoria, llevar casi cualquier codec, pero en la practica el ecosistema web trata MP4 como un archivo H.264. WebM esta construido a proposito para codecs libres de regalias - VP8 (raro en 2026), VP9 (mainstream) y AV1 (mas nuevo, mayor compresion).
Cuando la decision se enmarca como "MP4 o WebM", la decision real es H.264 vs VP9 vs AV1 - que codec codificar. El contenedor sigue al codec. H.264 se envia en MP4; VP9 y AV1 se envian en WebM en la web.
Comparacion de tamano de codec para la misma calidad visual
| Escenario | H.264 (MP4) | VP9 (WebM) | AV1 (WebM) |
|---|---|---|---|
| Clip de 60 segundos a 1080p 30fps | ~12 MB | ~7 MB | ~5 MB |
| Clip de 60 segundos a 720p 30fps | ~6 MB | ~3.5 MB | ~2.5 MB |
| Ahorro relativo de bitrate vs H.264 | 0% (linea base) | ~40% menor | ~55% menor |
| Tiempo de codificacion para 1 minuto de 1080p | ~15 segundos | ~2-3 minutos | ~8-15 minutos |
| CPU de reproduccion en portatil de gama media | Bajo (decodificacion por hardware) | Bajo (decodificacion por hardware) | Moderado (decodificacion por hardware irregular en GPUs pre-2023) |
Realidad de soporte de navegadores en 2026
MP4/H.264 se reproduce en el 100% de los navegadores en circulacion - Chrome, Firefox, Safari, Edge, cada WebView movil. Lo ha hecho durante una decada. Si que un video se reproduzca importa mas que los bytes ahorrados, envia H.264.
WebM/VP9 se reproduce en Chrome, Firefox, Edge, Opera y Safari (desde Safari 14, macOS Big Sur, 2020). Safari movil en iOS 14+ soporta VP9. Una audiencia residual muy pequena en iPhones heredados por debajo de iOS 14 no puede decodificar VP9.
WebM/AV1 se reproduce en Chrome 70+, Firefox 67+ y Edge 75+. Safari anadio soporte AV1 en 17.4 (2024). La decodificacion AV1 por hardware requiere silicio relativamente nuevo - Intel 11a gen (Tiger Lake) o posterior, Apple M3 o posterior, AMD serie 6000 o posterior. Dispositivos pre-2022 caen a decodificacion por software, que agota la bateria y puede perder cuadros en contenido 4K.
El patron de fallback <source>
El patron HTML5 video canonico sirve un codec recomendado que el navegador puede decodificar y cae por la lista:
<video controls preload="metadata" poster="cover.jpg">
<source src="clip.av1.webm" type="video/webm; codecs=av01.0.05M.08">
<source src="clip.vp9.webm" type="video/webm; codecs=vp9,opus">
<source src="clip.h264.mp4" type="video/mp4; codecs=avc1.4D401F,mp4a.40.2">
<p>Tu navegador no soporta video HTML5.</p>
</video>El navegador recorre la lista <source> de arriba hacia abajo, escoge el primer type que reconoce e ignora el resto. Servir AV1 primero captura el ~60% de los dispositivos de 2026 que tienen decodificacion AV1 por hardware; VP9 atrapa la mayor parte del resto; H.264 garantiza fallback 100%.
Las tres decisiones reales de produccion
Decision 1 - Clip social corto para alcance amplio. → MP4 (H.264) solamente. Codifica una vez. Cada navegador, cada plataforma social, cada cliente de email lo reproduce. Los ahorros de banda de VP9/AV1 no justifican el tiempo de codificacion y los dispositivos de borde que perderias.
Decision 2 - Video hero de fondo en un sitio de marketing a 1080p, loop de 15 segundos. → MP4 (H.264) + WebM (VP9). El archivo VP9 sale a ~60% del tamano H.264, lo que significa carga de pagina mas rapida para visitantes con conexiones lentas. El archivo H.264 es el fallback para cualquiera cuyo navegador omita WebM. El tiempo de codificacion es pequeno (una vez, clip de 15 segundos).
Decision 3 - Biblioteca de streaming de formato largo (servicio VOD, plataforma de cursos, videos de 30+ minutos). → AV1 (WebM) + VP9 (WebM) + H.264 (MP4). Los archivos AV1 ahorran salida sustancial de CDN a escala. Los archivos VP9 cubren todos los navegadores modernos. Los archivos H.264 son el fallback universal. Codifica en hardware GPU o pipeline por lotes; el tiempo de codificacion 10× de AV1 importa cuando la biblioteca tiene miles de videos.
Recetas de codificacion
H.264 (MP4) - el universal seguro. Un solo one-liner de FFmpeg da en el punto dulce para entrega web: ffmpeg -i in.mov -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k -movflags +faststart out.mp4. La bandera +faststart coloca el atomo moov al inicio del archivo para que un navegador pueda comenzar la reproduccion antes de que el archivo completo se descargue.
VP9 (WebM) - mejor equilibrio compresion/compatibilidad. Usa codificacion en dos pasadas para calidad consistente a un bitrate objetivo. -c:v libvpx-vp9 -b:v 0 -crf 31 -row-mt 1 -c:a libopus -b:a 96k. La bandera -row-mt 1 activa multi-threading por filas que corta el tiempo de codificacion aproximadamente a la mitad en CPUs modernos.
AV1 (WebM) - compresion maxima. SVT-AV1 es el encoder en el que la industria se asento: -c:v libsvtav1 -crf 35 -preset 6 -c:a libopus -b:a 96k. Preset 6 es el equilibrio por defecto entre velocidad y compresion; presets inferiores (4, 5) favorecen la calidad a costa de codificaciones mucho mas largas.
Cuando evitar WebM por completo
Si tu audiencia es principalmente iOS < 14, Android WebView mas antiguo o navegadores empresariales heredados, WebM no ofrece beneficio - esos dispositivos caeran a la fuente H.264 de todos modos, y la codificacion WebM es esfuerzo desperdiciado. Si el video es contenido generado por usuarios que los espectadores a menudo guardan, re-comparten o editan, H.264 MP4 es el formato que sus herramientas esperan aceptar.
Los clientes de email casi nunca renderizan <video> de forma nativa. Si el video esta en un boletin de email, exporta un breve GIF animado o un enlace MP4 a una landing page - ni WebM ni una etiqueta de video HTML5 inline ayudan.
Convertir entre formatos
Nuestro conversor de video maneja MP4 ↔ WebM en el navegador con FFmpeg.wasm - sin subida, sin instalacion. Para conversion por lotes de formato largo, instala FFmpeg localmente y usa las recetas anteriores; el conversor en el navegador esta limitado por tu RAM disponible (tipicamente 2-4 GB por pestana), que funciona para clips individuales pero no para un catalogo de 50 videos. Ve nuestra guia comparativa FFmpeg online vs local para cuando gana cada uno.
Herramientas relacionadas
- Video Converter - conversion MP4, WebM, MOV en navegador.
- FFmpeg Online - FFmpeg en linea de comandos en el navegador.
- Video Maker - unir imagenes en un clip de video.
- Compress Image - reducir tamano de archivo de la imagen de portada.
Guias relacionadas
- MP4 vs MOV vs MKV - which container when - Elegir entre los tres contenedores comunes para diferentes flujos de produccion.
- Before a video call - which tools to run - Lista de verificacion pre-llamada para preparacion de pantalla, camara y microfono.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
- Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.