Las imágenes representan aproximadamente la mitad del peso total de una página web típica. Optimizarlas es la mejora de rendimiento de mayor impacto que la mayoría de los sitios web pueden realizar. A diferencia de la optimización de código, que ofrece ganancias marginales, la optimización de imágenes puede reducir el peso de la página entre un 60 y un 80 % con un esfuerzo mínimo.
Esta guía cubre las técnicas que ofrecen resultados reales.
Formatos de imagen modernos
JPEG y PNG han servido bien a la web durante décadas, pero los formatos modernos ofrecen una compresión dramáticamente mejor.
WebP: compatible con todos los navegadores modernos. Ofrece archivos entre un 25 y un 35 % más pequeños que JPEG con calidad equivalente. Soporta compresión con y sin pérdida, además de transparencia.
AVIF: el formato más nuevo, basado en el códec de video AV1. Ofrece archivos un 50 % más pequeños que JPEG. El soporte está creciendo (Chrome, Firefox, Safari 16.4+). Úsalo como mejora, no como reemplazo.
Implementación: sirve AVIF a los navegadores que lo soporten, con fallo a WebP y luego a JPEG. El elemento <picture> maneja esto:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="descripción" loading="lazy" />
</picture>
Imágenes responsivas
Servir la misma imagen a una pantalla móvil de 320 px y a un monitor de escritorio de 2560 px desperdicia ancho de banda. El atributo srcset te permite servir diferentes tamaños de imagen según el ancho del viewport:
<img
srcset="image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 50vw"
src="image-1280.jpg"
alt="descripción"
/>
El navegador selecciona la imagen más adecuada según el viewport y la densidad de píxeles del dispositivo.
Lazy loading
El lazy loading nativo (loading="lazy") difiere las imágenes fuera de pantalla hasta que el usuario se desplaza cerca de ellas. Es compatible con todos los navegadores modernos y no requiere JavaScript:
<img src="image.jpg" alt="descripción" loading="lazy" />
Mejor práctica: aplica lazy loading a todas las imágenes que están debajo del pliegue. Usa loading="eager" u omite el atributo para la imagen hero inicial (sobre el pliegue).
Entrega mediante CDN y transformación de imágenes
Una CDN almacena imágenes en caché en ubicaciones edge, reduciendo la latencia para usuarios globales. Muchas CDN ofrecen transformación de imágenes del lado del servidor:
- Redimensiona imágenes sobre la marcha añadiendo parámetros a la URL
- Convierte automáticamente a WebP o AVIF según el navegador del usuario
- Elimina metadatos EXIF
- Ajusta la calidad dinámicamente
Servicios como Cloudinary, imgix y la optimización de imágenes integrada de Vercel manejan esto automáticamente.
El componente Image de Next.js
Si usas Next.js, el componente next/image proporciona optimización de imágenes lista para producción:
import Image from "next/image";
<Image
src="/hero.jpg"
alt="Imagen principal"
width={1200}
height={630}
priority
/>
Los beneficios incluyen conversión automática a WebP/AVIF, generación de srcset responsivo, lazy loading por defecto y prevención de CLS mediante dimensiones explícitas.
Herramientas de compresión
Para imágenes estáticas u optimización en tiempo de compilación:
- Sharp: librería Node.js para procesamiento de imágenes de alto rendimiento
- Squoosh: herramienta basada en navegador para optimización manual
- imagemagick: herramienta de línea de comandos para procesamiento por lotes
- TinyPNG/TinyJPG: servicio web con excelentes algoritmos de compresión
La optimización de imágenes es la mejora de rendimiento más fácil de conseguir. Implementar estas técnicas suele reducir el peso de la página a la mitad, mejorando tanto la experiencia de usuario como las puntuaciones de Core Web Vitals.
¿Estás optimizando el rendimiento de tu sitio web? En Vynta implementamos pipelines completos de optimización de imágenes como parte de cada proyecto web que entregamos.