Artículo
Optimizar los medios de un sitio para la velocidad y los Core Web Vitals
Las imágenes suponen normalmente alrededor del 40 % del peso total de una página web, más que cualquier otro tipo de recurso, y el vídeo añade bastante más en las páginas con mucho contenido multimedia. Acertar con ellos es lo más rentable que puedes hacer por la velocidad de carga, las puntuaciones de Core Web Vitals y el posicionamiento en buscadores. La buena noticia: nada de esto requiere software especializado ni un servidor, y tus archivos nunca necesitan salir de tu dispositivo.
Elige el formato adecuado antes que nada
La elección del formato importa más que cualquier control de calidad. Para fotografías en una página web, WebP es la opción por defecto acertada: es entre un 25 y un 35 por ciento más pequeño que el JPEG con la misma calidad visual y todos los navegadores modernos lo admiten. AVIF comprime todavía más, hasta un 50 por ciento mejor que el JPEG, a costa de una codificación más lenta. Usa AVIF para imágenes destacadas y fotos de producto que comprimes una sola vez; usa WebP para todo lo que proceses por lotes o necesites con rapidez. El PNG solo tiene sentido cuando necesitas precisión sin pérdidas o un fondo transparente. El SVG es la única opción sensata para logotipos, iconos e ilustraciones: escala a cualquier tamaño y a menudo pesa unos pocos kilobytes frente a cientos de un equivalente rasterizado.
Comprime imágenes sin pérdida de calidad visible
Empieza redimensionando a las dimensiones reales de visualización: una imagen destacada que se muestra a 1280 píxeles de ancho no necesita 4000 píxeles de datos. Redimensiona primero y comprime después. Para fotografías, la calidad 80 en WebP o JPEG es el suelo práctico por debajo del cual los espectadores ocasionales empiezan a notarlo, así que apunta a entre 75 y 85 y mira la salida al zoom completo antes de publicar. Para gráficos con texto y zonas planas, el PNG sin pérdidas o el SVG conservan la nitidez que los formatos con pérdidas emborronan. El compresor de imágenes de este sitio gestiona todos estos formatos, funciona por completo en tu navegador y aplica los mismos algoritmos que las herramientas de escritorio especializadas.
Convierte vídeo para la web sin subirlo
Los bucles de fondo y el vídeo incrustado son donde la optimización de medios web suele quedarse corta. Un MP4 con H.264 se reproduce en todas partes, y el WebM es la alternativa libre de regalías compatible con todos los navegadores modernos. El conversor de vídeo de este sitio codifica el WebM en VP8, que se sitúa en la misma clase de compresión que H.264: el simple cambio de contenedor no reduce por sí solo el tamaño del archivo, la ganancia real es una cadena totalmente libre de regalías y compatibilidad nativa con el canal alfa. El enfoque práctico es convertir una vez a WebM, servirlo como fuente preferida en un elemento de vídeo y mantener el MP4 como alternativa para navegadores más antiguos. La conversión se ejecuta dentro de tu navegador mediante FFmpeg compilado a WebAssembly: no se sube nada, y los archivos de hasta 500 MB se convierten sin cola. Para vídeo de fondo en línea, considera también el recortador de vídeo para eliminar los segundos muertos antes de codificar: la duración es el mayor factor del tamaño del archivo.
Recursos en línea: base64 y SVG
Las imágenes muy pequeñas, los iconos y los favicons incrustados directamente en HTML o CSS como cadenas base64 eliminan una ida y vuelta de red por recurso. Esto tiene sentido para recursos por debajo de unos 2 KB que aparecen en cada página, como un sprite de logotipo o un indicador de carga. Los recursos más grandes deben quedar como archivos separados porque el base64 codifica un 33 por ciento más pesado que el binario, y los navegadores cachean las referencias a archivos pero no los datos en línea de forma independiente. El optimizador de SVG elimina los restos del editor de los SVG exportados sin tocar el resultado visual. El conversor de imagen a base64 genera el URI de datos listo para pegar en tu navegador.
Servir el tamaño adecuado y cargarlo primero
Dos detalles de entrega importan tanto como los propios archivos. El primero es el tamaño adaptable. Con una lista srcset de descriptores de anchura (image-400.webp 400w, image-800.webp 800w y así sucesivamente), el navegador elige el archivo más pequeño que aún cubre la pantalla: multiplica el ancho en CSS por el device pixel ratio (la relación de píxeles del dispositivo) antes de solicitar nada. Un teléfono con un diseño de 390px de ancho y una pantalla 3x necesita unos 1170 píxeles, por lo que descarga la versión 1200w y omite el original de escritorio. El segundo es la prioridad. Los navegadores ejecutan un preload scanner (escáner de precarga) que avanza en la lectura e inicia la descarga de imágenes antes de que el analizador principal las alcance; añadir fetchpriority="high" a tu imagen more grande above-the-fold (visible sin desplazamiento) indica al navegador que la descargue primero, lo cual suele ser lo que determina tu Largest Contentful Paint.
Herramientas en este artículo
- Comprimir imágenesReduce el tamaño de las imágenes sin subirlas. Control de calidad o tamaño objetivo en KB. Compatible con lotes.
- Redimensionar imágenesRedimensiona y convierte tus imágenes (JPEG, PNG, WebP) sin subirlas.
- Optimizador SVGOptimiza y minifica archivos SVG con SVGO directamente en tu navegador. Sin subida.
- Conversor de vídeoConvierte vídeo entre MP4, WebM, MKV y MOV (H.264/VP8) en tu navegador. Sin subida.
- Imagen a Base64Convierte imágenes a URIs de datos Base64 (y viceversa) directamente en tu navegador. Copia, fragmento CSS, sin subida.
- Deslizador de comparación de imágenesCompara dos imágenes lado a lado o con un deslizador (antes/después). Sin subida.
Preguntas frecuentes
¿Afecta la compresión de imágenes a mi posicionamiento en buscadores?
Google usa los Core Web Vitals como señal de posicionamiento, y el Largest Contentful Paint casi siempre es una imagen o un póster de vídeo. Una página cuya imagen destacada carga en menos de un segundo puntúa mejor que otra en la que tarda tres segundos. La compresión y el formato adecuado afectan directamente a esta métrica, así que sí, la optimización de imágenes tiene un impacto medible en el SEO. El efecto es más fuerte en móvil, donde las conexiones son más lentas y la penalización por imágenes pesadas es mayor.
¿Por qué procesar los medios en local en lugar de usar un servicio web?
La mayoría de las herramientas de medios en línea exigen subir tus archivos a un servidor remoto, lo que lleva tiempo, consume ancho de banda y significa que existe una copia de tu archivo en una infraestructura que no controlas. Las herramientas de este sitio funcionan por completo en tu navegador: tus imágenes y vídeos se procesan en tu dispositivo y el resultado se descarga directamente. No hay cuenta, no hay espera de subida y nada sobre tus archivos se envía jamás a un servidor.