¿Por qué optimizar imágenes?
Las imágenes representan entre el 50-70% del peso total de una página web promedio. Optimizarlas es la acción con mayor impacto en la velocidad de carga.
Formatos recomendados
| Formato | Uso ideal | Compresión |
|---|---|---|
| WebP | Todo tipo de contenido | Excelente |
| JPG | Fotografías | Buena |
| PNG | Transparencia, gráficos | Moderada |
| AVIF | Próximamente standard | Superior a WebP |
Compresión con y sin pérdida
Con pérdida (lossy)
Elimina información "invisible" al ojo humano. Ideal para fotografías donde un poco de pérdida es imperceptible. Reduce el tamaño un 50-80%.
Sin pérdida (lossless)
Elimina redundancias sin perder información. Ideal para gráficos con texto, iconos y screenshots. Reduce el tamaño un 20-40%.
Dimensiones correctas
Nunca sirvas una imagen de 4000px en un contenedor de 800px. Las dimensiones recomendadas:
- Hero banners: 1920×1080px
- Cards de contenido: 800×600px
- Thumbnails: 400×300px
- Avatares: 200×200px
Lazy loading
Implementa loading="lazy" en imágenes que no estén above-the-fold. Esto retrasa la carga hasta que la imagen está a punto de ser visible, mejorando el tiempo de carga inicial.
Herramientas de FileUtils
FileUtils ofrece herramientas de compresión y redimensionamiento que procesan todo en tu navegador:
- Comprimir imagen: reduce el peso manteniendo calidad visible
- Redimensionar imagen: adapta las dimensiones al uso exacto
- Convertir a WebP: obtén el mejor ratio compresión/calidad
Todo se procesa localmente: tus imágenes nunca salen de tu dispositivo.