En la mayoría de las webs, las imágenes son lo más pesado de la página, a menudo más que el HTML, el CSS y el JavaScript juntos. Si una página se siente lenta, las imágenes son lo primero que hay que revisar, y las soluciones suelen ser rápidas.
Tres técnicas hacen casi todo el trabajo: redimensionar la imagen al tamaño en que realmente se muestra, comprimirla y servirla en un formato moderno. Aplicadas juntas, reducen habitualmente el peso de las imágenes en un 70 % o más.
Redimensiona al tamaño que realmente muestras
Este es el error más común y el que más desperdicia. Una foto recién salida de la cámara puede tener 6000 píxeles de ancho, pero tu artículo la muestra en una columna de 800 píxeles. El navegador descarga los seis mil píxeles y luego tira la mayoría cuando reduce la imagen para que quepa.
Servir una imagen de 6000 píxeles en un hueco de 800 puede significar descargar de cinco a diez veces más datos de los necesarios. La solución es simple: redimensiona el archivo aproximadamente al ancho que va a ocupar, más un poco de margen para pantallas de alta densidad.
Una regla práctica:
- Imagen principal a todo ancho: 1600-2000 px de ancho es de sobra.
- Imagen dentro del artículo: 1000-1400 px.
- Miniatura: 300-500 px.
Usa el redimensionador de imágenes para reducir cada imagen antes de que llegue a tu página. Mantiene bloqueada la proporción para que nada se deforme.
Comprime para eliminar lo que sobra
Una vez que las dimensiones son correctas, la compresión elimina detalle que el ojo no puede ver. Para fotografías, una calidad en torno al 75-85 % es el punto óptimo: el archivo cae drásticamente mientras la imagen se ve igual. Para gráficos planos y capturas de pantalla guardadas como PNG, reducir el número de colores (cuantizar a 256 colores) puede encoger el archivo a una fracción de su tamaño original.
El compresor de imágenes hace ambas cosas. Recodifica JPEG y WebP por calidad, cuantiza los PNG y garantiza que nunca producirá un archivo más grande que el original. Si tienes una galería entera, procésalas por lotes y descarga un ZIP.
Cambia a un formato moderno
La sola elección del formato puede reducir un archivo a la mitad. Así se comparan las opciones habituales para fotografías.
| Formato | Tamaño típico frente a JPEG | Ideal para |
|---|---|---|
| JPEG | Referencia | Reserva universal; fotos |
| WebP | ~25-35 % más pequeño | Fotos y gráficos; amplio soporte en navegadores |
| AVIF | ~50 % más pequeño | Fotos donde importa el tamaño mínimo |
| PNG | Mucho más grande para fotos | Logotipos, iconos, gráficos planos, transparencia |
WebP es la opción segura por defecto en 2026: todos los navegadores actuales lo leen y supera a JPEG con holgura. AVIF baja aún más de tamaño, pero tarda más en codificar y tiene un soporte algo más estrecho. El conversor de imágenes te permite apuntar a AVIF y recurre discretamente a WebP cuando AVIF no es lo más adecuado, así que obtienes el mejor resultado disponible sin adivinar.
Una advertencia: no uses PNG para fotografías. PNG brilla con logotipos, iconos y todo lo que necesite transparencia, pero para una foto puede ser varias veces más grande que un WebP de la misma calidad.
Júntalo todo
Un flujo de trabajo fiable para cualquier imagen destinada a la web:
- Redimensiona al ancho de visualización (más margen para pantallas retina).
- Convierte a WebP, o a AVIF si quieres el archivo más pequeño posible.
- Comprime al 75-85 % de calidad para quitar lo último que sobra.
Haz eso y una foto de cámara de 5 MB puede convertirse en un WebP de 120 KB que se ve idéntico en la columna de un artículo. Multiplícalo por toda una página y la diferencia en tiempo de carga es enorme.
Todo funciona en tu navegador con Canvas y WebAssembly, así que nada se sube y las herramientas siguen funcionando sin conexión después de tu primera visita. Eso significa que puedes preparar una carpeta de imágenes para tu sitio sin entregárselas a ningún servidor.
Más allá de los archivos
Dos hábitos más ayudan, y no cuestan nada:
- Carga diferida de las imágenes por debajo del pliegue con
loading="lazy"para que el navegador solo las descargue cuando el lector se acerca al desplazarse. - Define los atributos width y height para que el diseño no salte mientras cargan las imágenes, lo que además mejora tu puntuación de Core Web Vitals.
¿Quieres saber exactamente qué imágenes están frenando una página? Nuestra guía de SEO de imágenes cubre la auditoría, y una comprobación de velocidad de página listará los recursos más pesados para que sepas por dónde empezar.