Contenido
Por qué importa optimizar imágenes
Una foto de celular pesa entre 3 y 8 MB. Si tu web tiene 10 fotos sin optimizar, un visitante descarga 30-80 MB solo para verla. En Colombia, donde muchos navegan con datos móviles limitados, esto es inaceptable.
Google usa la velocidad de carga como factor de posicionamiento. Una página lenta pierde visitantes (53% abandona si tarda más de 3 segundos) y posiciones en resultados.
Formatos de imagen en 2026
| Formato | Uso ideal | Compresión |
|---|---|---|
| WebP | Fotos y gráficos | 30% más liviano que JPEG |
| AVIF | Fotos alta calidad | 50% más liviano que JPEG |
| SVG | Logos, iconos | Escalable sin pérdida |
| JPEG | Fotos (fallback) | Buena |
| PNG | Transparencia | Sin pérdida (pesado) |
Usa WebP como formato principal y AVIF como avanzado con fallback a JPEG. Cubre el 99% de navegadores y reduce el peso hasta 50%.
Técnicas de optimización
Compresión lossy
JPEG al 80% de calidad se ve prácticamente idéntico al original pero pesa la mitad.
Redimensionado
No sirvas 4000x3000px si se muestra a 800x600. Redimensionar reduce el peso 70% o más.
Eliminar metadatos
Las fotos incluyen datos EXIF innecesarios para la web. Eliminarlos reduce tamaño sin afectar calidad.
Herramientas gratuitas
- Squoosh: De Google, para comprimir y convertir en el navegador.
- TinyPNG: Compresión inteligente con excelentes resultados.
- Sharp (Node.js): Procesamiento automático en el servidor.
- ImageMagick: Línea de comandos para conversiones masivas.
Según el W3C, toda imagen debe tener alt descriptivo para accesibilidad y SEO.
Lazy loading y responsive images
Lazy loading solo carga imágenes visibles en pantalla. Implementarlo es tan simple como añadir loading="lazy" a tus img.
Responsive images sirve diferentes tamaños según dispositivo con srcset. Si necesitas una web rápida y profesional, consulta nuestras opciones de desarrollo web optimizado.
Checklist de optimización
- Formato WebP o AVIF para todas las fotos
- Compresión al 80% para fotos generales
- Redimensionar al tamaño máximo de visualización
- Lazy loading en imágenes debajo del fold
- Alt text descriptivo en cada imagen
- SVG para logos e iconos
- CDN para servir desde servidores cercanos