Cómo comprimir imágenes para la web
La mayor parte del peso de una imagen se desperdicia mucho antes de que actúe el codificador. Este es el orden de operaciones que de verdad elimina bytes, y los ajustes que merece la pena cuidar.
Por qué importa el peso de las imágenes
En la mayoría de los sitios, las imágenes son el mayor contribuyente al peso de la página, con frecuencia más que todos los scripts, estilos y fuentes juntos. Eso tiene dos consecuencias. Primera: quien navega con datos móviles espera más y paga por el privilegio. Segunda: el peso de las imágenes se traduce directamente en el Largest Contentful Paint, el Core Web Vital al que más se culpa de una mala puntuación de rendimiento, porque el elemento más grande de una página suele ser una imagen principal.
La buena noticia: el peso de las imágenes es también lo más fácil de arreglar. Nada de esto exige reformar la cadena de compilación.
Trabaja por orden de impacto
Las herramientas de compresión te tientan a ir directo al control de calidad. Esa es la menor de las tres palancas. El orden debería ser:
- Redimensionar — la mayor ganancia, con diferencia.
- Elegir el formato — una ganancia grande y única.
- Ajustar la calidad — afinado, con retorno real pero acotado.
1. Redimensiona primero
Una fotografía de 4000 píxeles de ancho mostrada en un hueco de 800 píxeles lleva unas 25 veces más píxeles de los que puede mostrar. Ningún códec puede compensar esa diferencia. Servir una imagen sobredimensionada y luego comprimirla con agresividad es el error clásico: pagas dos veces y el resultado visible es peor que si simplemente hubieras redimensionado bien.
Redimensiona al tamaño real de visualización, duplicado para pantallas de alta densidad si la imagen importa. Como regla general, una imagen principal a todo el ancho rara vez necesita superar unos 2000 píxeles de ancho, y las imágenes de contenido dentro de la página rara vez más de 1200.
2. Elige el formato
Las fotografías deberían ir a AVIF o WebP. Los gráficos con bordes nítidos, texto o transparencia deberían quedarse en PNG o WebP sin pérdida. La guía de formatos cubre los compromisos en detalle; la versión corta es que la elección de formato se decide por tipo de imagen, no de forma global.
3. Ajusta la calidad
En los formatos con pérdida, la calidad es un control de 0 a 100 que intercambia fidelidad por tamaño. No es lineal: bajar de 90 a 80 suele recortar un tercio del archivo sin diferencia perceptible, mientras que bajar de 50 a 40 produce sobre todo artefactos visibles.
Puntos de partida razonables:
| Contenido | Objetivo aproximado | Notas |
|---|---|---|
| Fotografías para web | calidad JPEG/WebP ~75 | El punto óptimo habitual; AVIF alcanza una calidad comparable con un valor aún más bajo |
| Miniaturas, avatares | calidad 60–70 | Un tamaño de visualización pequeño oculta más de lo que esperarías |
| Capturas, interfaz, texto | Sin pérdida (PNG / WebP sin pérdida) | Cualquier compresión con pérdida emborrona bordes de 1 píxel y glifos |
| Archivo / impresión | Calidad 90+, o el original | Conserva el original; este no es un escenario de entrega web |
Juzga a tamaño de visualización, no ampliando. Compara la imagen comprimida y el original al tamaño en que realmente aparecerán. Las diferencias que cantan al 400 % de zoom suelen ser invisibles en contexto.
Un flujo por lotes que escala
- Reúne todo en una carpeta: capturas, fotos, exportaciones.
- Divide en dos grupos: fotográfico y gráfico. Adoptan formatos y ajustes distintos.
- Redimensiona cada grupo a sus dimensiones de entrega.
- Comprime el grupo fotográfico a AVIF y WebP; comprime el grupo gráfico sin pérdida.
- Compara cada resultado con su original. Lo que haya crecido se descarta: es una señal, no un fallo.
- Conserva los originales. La salida comprimida es un artefacto de compilación; tus originales son el archivo.
tinyimg se encarga de los pasos 4 y 5 con hasta 30 archivos a la vez, y puede emitir varios formatos en una sola pasada para que compares tamaños directamente. Procesar por lotes en el navegador también significa que una carpeta de fotos de clientes o personales nunca sale de tu equipo: vale la pena si las políticas de subida son un factor.
Errores que desperdician más bytes en silencio
- Servir una sola imagen enorme a todos los dispositivos. Un único JPEG de 2000 píxeles no es una estrategia adaptable. Usa
srcsetpara que los móviles descarguen una variante más pequeña. - Volver a guardar JPEG una y otra vez. Cada generación con pérdida acumula el daño. Recodifica siempre desde el original.
- Usar PNG para fotografías. Con frecuencia 5–10× más grande que el JPEG equivalente sin ninguna ventaja visible.
- Perseguir «lo más pequeño posible» más allá de lo útil. Un ahorro del 40 % es excelente; un 45 % con bandas visibles en el cielo, no.
- Olvidar la carga diferida. Las imágenes bajo el pliegue no deberían bloquear el primer pintado. La carga diferida es un cambio de un solo atributo con un gran efecto.
- No volver a medir nunca. Fija un presupuesto y compruébalo; de lo contrario se desvía hacia arriba recurso a recurso.
Saber cuándo has terminado
Elige un presupuesto de página y respétalo. Un objetivo razonable para una página de contenido es mantener la carga total de imágenes por debajo de aproximadamente un megabyte, y que la imagen principal haga el mayor trabajo. Si una página se pasa con creces, los culpables habituales son una imagen principal sin redimensionar, una fotografía guardada como PNG o varias imágenes decorativas que podrían ser SVG o CSS.
El ejercicio no tiene glamur, pero es corto: redimensionar, elegir un formato, fijar una calidad sensata, verificar al tamaño de visualización y conservar los originales. Esa secuencia elimina la inmensa mayoría del peso de imagen evitable en casi cualquier sitio.