Cómo comprimir imágenes para una web

En una página típica, las imágenes pesan más que el HTML, el CSS y los scripts juntos. Una sola foto copiada directamente del móvil puede ocupar de 3 a 6 MB, mientras que el resto de la página se queda en unos cientos de kilobytes. Optimizar las imágenes es la mejora de rendimiento más barata que existe, y repercute directamente en el Largest Contentful Paint, la métrica de Core Web Vitals que mide lo rápido que aparece el contenido principal.

Esta guía recoge el flujo completo: decidir a qué tamaño se muestra cada imagen, elegir el formato adecuado, comprimir, revisar el resultado y servirlo correctamente. Sirve tanto para una web hecha a mano como para una tienda o un blog en cualquier gestor de contenidos.

Ten claro tu presupuesto antes de empezar

Ayuda tener cifras en mente. Son objetivos prácticos, no reglas estrictas:

• Imagen de cabecera o banner a ancho completo: entre 150 y 300 KB.
• Imagen de contenido dentro de un artículo: de 50 a 150 KB.
• Ficha de producto o miniatura en una cuadrícula: de 20 a 60 KB.
• Logotipo o icono: unos pocos kilobytes, idealmente en SVG.

Una página con una cabecera y diez imágenes de contenido que cumpla estas cifras pesa entre 1 y 2 MB en imágenes. La misma página montada con fotos del móvil sin tocar supera fácilmente los 30 MB.

Paso 1. Redimensiona al tamaño al que realmente se muestra

El número de píxeles influye en el peso más que cualquier ajuste de calidad. Una foto de 4000×3000 tiene 12 millones de píxeles; a 1600×1200 tiene menos de 2 millones. Es una reducción del 85 % antes incluso de empezar a comprimir.

Averigua el ancho máximo al que se muestra la imagen y ten en cuenta las pantallas de alta densidad:

• Cabecera a ancho completo: entre 1600 y 2000 px de ancho cubren la mayoría de portátiles y pantallas retina.
• Columna de artículo de 700 a 800 px: exporta a 1200–1600 px para que siga nítida en pantallas 2×.
• Ficha en una cuadrícula de tres columnas: de 600 a 800 px.

En Redimensionar imagen online introduce un ancho y deja vacío el alto para conservar las proporciones, o pon el mismo número en ambos campos con Mantener proporción activado para limitar el lado largo en un lote mezclado de fotos verticales y horizontales. Ojo: las imágenes que ya son más pequeñas que ese recuadro se amplían hasta llenarlo, así que no metas iconos pequeños en un lote con un recuadro grande.

Al redimensionar se mantiene el formato de entrada. JPG y WebP se recodifican con calidad alta (0,92) y PNG sigue siendo sin pérdida. Por el camino se eliminan los metadatos de ubicación y de la cámara, algo que de todos modos te interesa en las fotos que publicas.

Paso 2. Elige el formato adecuado

Decide según el contenido, no por costumbre:

• Fotos y cualquier cosa con degradados → WebP. Con la misma calidad visual suele ser entre un 25 y un 35 % más ligero que JPG, y todos los navegadores actuales lo muestran.
• Fotos en las que no puedes usar WebP → JPG con calidad de 75 a 85. Algunas plantillas de correo, gestores de contenidos antiguos y feeds de marketplaces todavía esperan JPG.
• Capturas de pantalla, logotipos, diagramas, gráficos planos → PNG, y después reduce su paleta. Estas imágenes tienen pocos colores y bordes nítidos, donde JPG deja borrones visibles.
• Gráficos con transparencia grandes o fotográficos → WebP. Conserva el canal alfa y pesa mucho menos que PNG en fotos de producto recortadas.
• Iconos e ilustraciones sencillas → SVG siempre que tengas el original vectorial. Ningún formato de mapa de bits lo supera en peso y nitidez.

El error más común es guardar una foto como PNG. Una foto en PNG suele pesar entre cinco y diez veces más que un buen JPG, sin ninguna ventaja visible.

Paso 3. Comprime

Fotos a WebP

Convertir JPG a WebP online parte de calidad 85, adecuada para la mayoría de imágenes de contenido. Baja a 70–75 para miniaturas e imágenes de fondo bajo texto, y sube a 90 para cabeceras con detalle fino o con texto dentro de la imagen. También acepta PNG de entrada y conserva la transparencia.

Para capturas de pantalla y gráficos con transparencia, Convertir PNG a WebP online parte de calidad 90, que mantiene nítidas las líneas finas y el texto pequeño.

La codificación WebP usa el codificador propio de tu navegador. Safari no puede codificar WebP, así que para este paso usa Chrome, Edge o Firefox; la página muestra un error en lugar de guardar un archivo con la extensión equivocada.

Gráficos planos en PNG

Comprimir PNG online reduce la imagen a una paleta de 256, 128 o 64 colores y conserva la transparencia. Las capturas y los logotipos suelen perder entre un 50 y un 70 % de su peso con 256 colores sin ningún cambio visible. Empieza con 256, prueba 128 en capturas de interfaces y reserva 64 para gráficas e iconos sencillos. No aplica tramado, así que los degradados suaves pueden mostrar bandas; si ocurre, vuelve a subir o pasa esa imagen a WebP.

Si te quedas con JPG

Comprimir JPG online parte de 80. Para contenido web, entre 75 y 80 suele ser el punto óptimo. Si un archivo ya está bien optimizado y recodificarlo lo haría más grande, la herramienta devuelve el original sin tocar.

Paso 4. Revisa antes de publicar

Los ajustes de compresión son un compromiso, así que mira el resultado justo donde JPEG y WebP fallan primero: degradados suaves de cielos o paredes, bordes nítidos de alto contraste y zonas de rojo saturado. Comparar dos imágenes pone el original y la versión comprimida bajo un mismo deslizador para que las diferencias salten a la vista.

Después revisa las cifras. Cada fila de archivo muestra el tamaño antes y después; si algo sigue muy por encima del presupuesto, normalmente es que las dimensiones son demasiado grandes, no que la calidad sea demasiado alta.

Paso 5. Sírvelas correctamente

Comprimir es la mitad del trabajo. El marcado decide cómo carga el navegador lo que has preparado:

• Pon siempre width y height en <img>. El navegador reserva el espacio antes de que llegue el archivo, lo que evita el desplazamiento del diseño, otra métrica de Core Web Vitals.
• Usa carga diferida por debajo del pliegue con loading="lazy". Nunca la apliques a la cabecera: suele ser el elemento del Largest Contentful Paint, y retrasarla empeora la puntuación. Dale fetchpriority="high" en su lugar.
• Usa srcset y sizes cuando una misma imagen aparece a anchos muy distintos en móvil y en escritorio. Exporta dos o tres anchos, por ejemplo 800, 1200 y 1600 px, y deja que el navegador elija.
• Usa <picture> con un JPG de respaldo solo si tienes que dar soporte a navegadores muy antiguos. Para la mayoría de webs basta con un WebP.
• Caché larga. Asigna a los archivos de imagen una caché de larga duración y cambia el nombre del archivo cuando cambie la imagen.

Muchos gestores de contenidos generan copias redimensionadas al subir. Ayuda, pero redimensionan a partir de lo que subas, así que un original de 6 MB sigue significando subidas lentas y almacenamiento inflado. Sube imágenes que ya estén cerca del tamaño más grande que necesites.

Opciones integradas en el ordenador y el móvil

Para un puñado de imágenes puede que no necesites nada más:

• Vista Previa de macOS: Herramientas → Ajustar tamaño para cambiar las dimensiones, y luego Archivo → Exportar con el deslizador de calidad para JPG. Rápido para uno o dos archivos.
• Fotos de Windows: la opción "Cambiar el tamaño de la imagen" ofrece tamaños predefinidos y un ajuste de calidad. Paint también redimensiona, pero guarda el JPG sin dejarte elegir la calidad.
• iPhone y Android: los editores integrados recortan, pero no permiten fijar las dimensiones en píxeles ni la compresión, así que las fotos del móvil para una web conviene procesarlas de camino a la web.

Las herramientas del navegador de esta guía merecen la pena cuando tienes un lote: sueltas una carpeta entera, descargas los resultados en un solo ZIP y no se sube nada.

Solución de problemas

• El WebP pesa más que el JPG. El JPG de origen ya estaba muy comprimido, o la calidad está en 95–100. Baja la calidad a 80 o quédate con el JPG.
• El PNG apenas ha bajado. Ya estaba indexado u optimizado. La herramienta indica que se ha conservado el original.
• Las zonas transparentes se han vuelto blancas. La imagen ha pasado por Comprimir JPG online, y JPG no admite transparencia. Usa Convertir PNG a WebP online o Comprimir PNG online para los recortes.
• El texto de las capturas se ve borroso. Usa PNG o WebP a 90 o más, nunca JPG.
• Las imágenes se ven borrosas en pantallas retina. Redimensionaste al ancho CSS; exporta aproximadamente al doble.

Lista de comprobación

1. Mide el ancho máximo al que se muestra cada imagen.
2. Redimensiona como mucho al doble de ese ancho.
3. Fotos a WebP con calidad 80–85, gráficos planos a PNG con paleta.
4. Compara el resultado en degradados y bordes.
5. Comprueba cada archivo frente al presupuesto de peso.
6. Añade width, height, carga diferida por debajo del pliegue y prioridad alta para la cabecera.