Herramientas
Cómo reducir el tamaño de las imágenes para una web más rápida
Las imágenes pesadas son la principal razón por la que las webs se sienten lentas. Una página típica de producto o marketing envía más de dos megabytes de peso, y aproximadamente la mitad son imágenes servidas a resolución completa, calidad completa y en el formato equivocado. Los archivos más grandes empujan tu Largest Contentful Paint más allá del objetivo de 2,5 segundos, inflan la tasa de rebote y erosionan silenciosamente las conversiones: cada 100 KB extra en una imagen hero cuesta un compromiso medible, tanto en móvil como en escritorio. Si solo vas a hacer una pasada de rendimiento este trimestre, hazla sobre las imágenes.
Por qué las imágenes pesadas matan tu página
Los Core Web Vitals de Google tratan la imagen más grande de la página como el elemento de Largest Contentful Paint. El umbral «Bueno» actual está enmenos de 2,5 segundos en el percentil 75 de usuarios reales. El HTTP Archive informa de que la página de escritorio mediana pesa ahora alrededor de2,5 MB y la página móvil mediana alrededor de 2,2 MB, con las imágenes suponiendo de forma constante cerca del 50 % de ese peso. Una sola foto hero de 1,2 MB puede por tanto decidir si tu puntuación LCP es verde, amarilla o roja, antes de que se ejecute cualquier línea de JavaScript que hayas escrito con cuidado.
El caso de negocio es igual de claro. Las propias investigaciones de Google relacionan una mejora de un segundo en el tiempo de carga móvil con tasas de conversión más altas en retail, viajes y sitios de generación de leads. En conexiones 4G irregulares, una imagen de 600 KB y una de 60 KB se sienten como dos productos distintos: la primera hace scroll a tirones, la segunda se pinta al instante. Reducir el tamaño de las imágenes es la ganancia de rendimiento más barata que existe: no hay reescritura del lado del servidor, no hay cambio de arquitectura, solo bytes que no necesitabas enviar desde el principio.
El pipeline de reducción en 4 pasos
No necesitas un servicio de optimización de imágenes ni un pipeline de build. Los mismos cuatro pasos que corren dentro de cualquier CDN de imágenes moderna se pueden hacer en tu navegador, una imagen cada vez, en menos de un minuto. Hazlos en este orden, porque cada paso depende del anterior.
| Paso | Acción | Ahorro típico |
|---|---|---|
| 1. Redimensiona a las dimensiones de visualización | Escala el bitmap al mayor tamaño que el layout realmente renderiza. Una foto de 4000×3000 servida en un hueco de 1200×600 desperdicia más del 90 % de sus píxeles. | 60–80 % |
| 2. Ajusta la calidad a ~75–80 | Baja el control de calidad del codificador a unos 75–80 para fotos. La diferencia visual es imperceptible a la distancia de visión normal y el ahorro en bytes es enorme. | 30–50 % |
| 3. Convierte a WebP | Re-codifica el bitmap redimensionado y re-cuantizado como WebP. Mismas dimensiones, misma calidad, normalmente un tercio de los bytes del JPG o PNG original. | 25–35 % |
| 4. Elimina metadatos | Quita EXIF, IPTC, XMP, perfiles de color y comentarios de autoría. Una foto de móvil puede llevar 50–100 KB de metadatos que el navegador nunca renderiza. | 2–10 % |
Apilados, los cuatro pasos suelen reducir un original de 1,2 MB por debajo de 150 KB sin pérdida visible de calidad a los tamaños habituales de visualización web.
Guía por formato
Distintas tareas visuales piden distintos formatos. Elige por contenido, no por reflejo.
- Fotos. JPG con calidad 75–80 o WebP a una calidad equivalente. AVIF llega más lejos pero cuesta tiempo de codificación y no se admite en un pequeño número de dispositivos antiguos; cae a WebP si la compatibilidad importa.
- Logos, iconos y gráficos de UI. Conserva la transparencia con PNG o, mejor, WebP con canal alfa. SVG es aún más pequeño para line art y escala sin artefactos rasterizados: úsalo cuando la fuente sea vectorial.
- Ilustraciones y arte plano. WebP o PNG. WebP gana en bytes, PNG gana en soporte universal. Si necesitas ambos, genera un WebP con fallback PNG mediante el elemento picture.
¿Necesitas cambiar una carpeta de assets heredados de un formato a otro? Elconversor de imágenesgestiona la recodificación por lotes a JPG, PNG, WebP y AVIF en una sola pasada, con vista previa lado a lado para que veas la compensación de calidad antes de comprometerte.
Fijar un presupuesto
Optimizar sin un presupuesto solo produce imágenes ligeramente más pequeñas. Dale a cada categoría de la página un techo estricto en bytes, aplícalo en CI y verás cómo se desploma el peso medio de la página. Un presupuesto de partida pragmático para un sitio orientado al contenido:
- Imagen hero: por debajo de 100 KB. Es tu elemento LCP. Cualquier cosa más pesada la pagas en Core Web Vitals.
- Miniaturas de galería: menos de 50 KB cada una. Multiplica por el número de miniaturas por encima de la línea de flotación: es un presupuesto que puedes defender.
- Imagen Open Graph: por debajo de 200 KB.Los crawlers y las vistas previas sociales la vuelven a solicitar sin parar; un techo ajustado mantiene ágiles los unfurls de enlaces.
- Total de imágenes above-the-fold: menos de 300 KB. Si lo superas, no hay code-splitting que rescate la puntuación LCP.
Ejecuta el pipeline de cuatro pasos, pega las salidas en el presupuesto de arriba y envía. Páginas más rápidas, mejores Core Web Vitals, visitantes más contentos: y cada byte que recortas es un byte que no tienes que servir.