Las imágenes son responsables, en la mayoría de webs, de la mitad o más del peso total de cada página. Optimizarlas bien es una de las acciones que más impacto tiene en el rendimiento, el SEO y la conversión sin tocar una línea de código complejo.
Por qué optimizar imágenes
Una imagen sin tratar puede pesar varios megas. En una web con 8-10 imágenes, eso son fácilmente 30-40 MB que tu usuario tiene que descargar. Optimizar bien suele reducir el peso un 70-90% sin pérdida visible.
- Aumenta el tiempo de permanencia y la conversión.
- Mejora las Core Web Vitals (LCP, CLS) y el ranking en Google.
- Ahorra datos al usuario, sobre todo en móvil.
Elegir el formato adecuado
- WebP / AVIF: formatos modernos, los más eficientes. Hoy son la opción por defecto.
- JPEG: para fotografías cuando WebP no es viable.
- PNG: para gráficos con transparencia o iconos sin gradientes complejos.
- SVG: para logos, iconos y formas vectoriales escalables.
- GIF: solo para animaciones muy simples (mejor MP4 o WebM).
Técnicas de compresión
Existen dos enfoques:
- Con pérdida (JPEG, WebP): reduce calidad de forma imperceptible para el ojo a cambio de archivos mucho más ligeros.
- Sin pérdida (PNG, AVIF): mantiene la imagen exacta, ideal para gráficos con texto o líneas finas.
Herramientas como TinyPNG, Squoosh o ShortPixel automatizan este proceso con resultados excelentes.
Dimensiona la imagen al uso real
Subir una foto de 4000x3000 px para una miniatura de 300x200 px es uno de los errores más típicos. Redimensiona siempre la imagen al tamaño máximo que se mostrará en pantalla. Photoshop, GIMP o Canva sirven perfectamente.
Imágenes responsive con srcset
Sirve distintas resoluciones según el dispositivo con el atributo srcset. Así el móvil descarga una imagen pequeña y el escritorio una grande, sin tener que elegir un compromiso intermedio.
Lazy loading: carga solo lo necesario
Con loading="lazy" las imágenes fuera del viewport se cargan al hacer scroll. Reduce el peso inicial y mejora el LCP de la página.
Texto alternativo y SEO de imagen
- Pon siempre
altdescriptivo (también ayuda en accesibilidad). - Nombra los archivos con palabras clave:
diseno-web-oviedo.webpmejor queIMG_2304.jpg. - Incluye dimensiones (
width/height) para evitar Cumulative Layout Shift.
Herramientas que conviene tener a mano
- TinyPNG, Squoosh, Kraken.io para comprimir.
- ImageOptim (macOS) y FileOptimizer (Windows) para procesos batch.
- ShortPixel o WebP Express en WordPress para automatizarlo todo.
- CDN como Cloudflare o Bunny.net con compresión y conversión a WebP al vuelo.
Conclusión
Optimizar imágenes es una de las decisiones técnicas con mejor relación beneficio/esfuerzo que existen en una web. Formatos modernos, dimensiones correctas, lazy loading, atributos SEO y compresión te darán mejoras visibles en velocidad y posicionamiento.