Responsive, accesibilidad y rendimiento
En este artículo encontrarás una guía completa para entender cómo deben ser las imágenes para web, cómo elegirlas correctamente y cómo exportarlas y comprimirlas de forma profesional.
¿Por qué es importante optimizar las imágenes?
Antes de entrar en lo técnico, hay que entender el impacto real:
- Velocidad de carga: las imágenes suelen representar más del 50% del peso de una web.
- SEO: Google prioriza webs rápidas y bien optimizadas.
- Experiencia de usuario: imágenes lentas o mal adaptadas generan abandono.
- Consumo de datos: especialmente importante en dispositivos móviles.
Una imagen bien optimizada mantiene calidad visual con el menor peso posible.
Tamaño y dimensiones
Uno de los errores más comunes es subir imágenes más grandes de lo necesario.
Tamaño y dimensiones
Dependen del uso:
- Imágenes hero (banner principal): 1200–2000 px de ancho
- Imágenes de contenido: 800–1200 px
- Miniaturas: 300–600 px
Nunca subas una imagen de 4000 px si se mostrará a 800 px.
Objetivos de peso:
- Portadas/Hero: Menos de 200 KB.
- Imágenes de artículo: Menos de 100 KB.
- Iconos: Menos de 10 KB.
Resolución
- 72 ppp (píxeles por pulgada) es suficiente para web
- Más resolución solo aumenta el peso sin mejorar la visualización
Formatos de imagen para web
Elegir el formato correcto es clave para optimizar peso y calidad.
| Formato | Uso ideal | Ventaja |
|---|---|---|
WEBP | El estándar actual para todo | Hasta un 30% más ligero que el JPEG con la misma calidad. |
AVIF | El futuro (máxima compresión) | Supera a WebP en ahorro de peso, aunque con menos compatibilidad en navegadores muy antiguos. |
JPEG / JPG | Fotografías complejas | Ideal como «plan B» si no usas WebP. |
PNG | Logos e ilustraciones | Esencial cuando necesitas fondos transparentes. |
SVG | Iconos y gráficos vectoriales | No pierde calidad al escalarse y pesa casi nada (es código). |
JPEG (JPG)
- Ideal para fotografías
- Buena compresión con pérdida
- Peso reducido
👉 Uso recomendado: imágenes reales, personas, paisajes
PNG
- Sin pérdida de calidad
- Soporta transparencias
- Más pesado que JPG
👉 Uso recomendado: logos, gráficos, imágenes con fondo transparente
WebP
- Formato moderno
- Mucho menor peso con buena calidad
- Compatible con la mayoría de navegadores actuales
👉 Uso recomendado: casi todo (especialmente en webs modernas)
SVG
- Formato vectorial
- Escalable sin pérdida de calidad
- Peso muy bajo
👉 Uso recomendado: iconos, ilustraciones, logos
Cómo exportar imágenes correctamente
Exportar bien es tan importante como elegir el formato.
Ajustar dimensiones antes de exportar
- Redimensiona la imagen al tamaño real de uso
- Evita redimensionar mediante CSS únicamente
Ajustar calidad
- JPEG: calidad entre 60–80%
- WebP: calidad entre 50–80%
El objetivo: equilibrio entre peso y calidad visual.
Eliminar metadatos innecesarios
- Datos EXIF (cámara, ubicación, etc.)
- Solo aumentan el tamaño del archivo
Cómo comprimir imágenes
La compresión reduce el peso sin afectar demasiado la calidad.
Tipos de compresión
La compresión puede ser Lossy (con pérdida mínima de calidad perceptible) o Lossless (sin pérdida). Para web, siempre buscamos Lossy inteligente.
- Con pérdida (lossy): reduce tamaño eliminando información
- Sin pérdida (lossless): mantiene calidad pero reduce menos
Herramientas recomendadas
- Herramientas online (rápidas y sencillas)
- Squoosh.app: La mejor herramienta gratuita (de Google). Te permite comparar en tiempo real el peso original vs. el optimizado en WebP.
- TinyPNG / TinyJPG: El clásico para comprimir lotes rápidamente.
- iLoveIMG: Ideal si necesitas redimensionar y comprimir muchas imágenes a la vez.
- Plugins de CMS (como WordPress)
- Software de diseño (Photoshop, Figma, etc.)
- Photoshop / Photopea: Usa la opción «Exportar para web» y ajusta la calidad al 70-80%
Buenas prácticas
- Comprimir siempre antes de subir
- Revisar visualmente después
- No sobrecomprimir (evitar pixelado)
Optimización avanzada para web
Lazy loading
Carga las imágenes solo cuando el usuario las necesita (al hacer scroll).
Beneficios:
- Mejora la velocidad inicial
- Reduce consumo de recursos
Responsive images
Usar diferentes tamaños según el dispositivo:
- Móvil → imagen más pequeña
- Escritorio → imagen más grande
Esto se implementa con atributos como srcset.
Optimizar imágenes para web no es solo una cuestión técnica, sino estratégica. Una buena gestión mejora el rendimiento, el posicionamiento y la experiencia del usuario.
La clave está en encontrar el equilibrio entre calidad visual y peso, elegir el formato adecuado y aplicar buenas prácticas de exportación y compresión. Si se hace correctamente, las imágenes dejarán de ser un problema y pasarán a ser una ventaja competitiva.
