Curso HTML 19.5 Optimización de imágenes, SEO básico y rendimiento

19.5 Optimización de imágenes, SEO básico y rendimiento

1. Formatos de imagen

Elegir el formato adecuado marca la diferencia en peso, calidad y compatibilidad:

Formato	Ventajas	Uso recomendado
JPEG	Alta compresión con pérdidas, muy soportado	Fotografías y fondos complejos
PNG	Compresión sin pérdidas, soporta transparencia	Gráficos, logos, iconos
WebP	Mejor ratio compresión que JPEG/PNG	Reemplazo progresivo para fotos y gráficos
AVIF	Ratio aún superior, soporte HDR	Uso experimental y progresivo donde esté soportado

2. Compresión y herramientas

Compresión lossless para PNG/GIF con pngcrush, optipng o gifsicle.
Compresión lossy para JPEG con jpegoptim o mozjpeg.
Conversión a WebP/AVIF con cwebp o avifenc.

3. Imágenes responsivas con `srcset` y `sizes`

Permite al navegador elegir la mejor versión según resolución y ancho de viewport.

4. Elemento `picture` para WebP/AVIF con fallback

5. Lazy Loading nativo

Reduce el tiempo de carga inicial, cargando imágenes solo cuando entran en viewport:

6. Evitar Cumulative Layout Shift (CLS)

Reservar espacio con width y height en <img> o usar contenedor con aspect-ratio (CSS) para que el layout no salte.

7. Buenas prácticas SEO para imágenes

Nombre de archivo descriptivo y con palabras clave: foto-playa-verano.jpg en lugar de IMG_1234.jpg.
Atributo alt claro y conciso, describiendo la imagen para buscadores y accesibilidad.
Incluir atributo title solo si aporta valor semántico adicional.
JSON-LD para enriquecer resultados:

Generar sitemap de imágenes para Google:



  
    https://example.com/vacaciones-playa.html
    
      https://example.com/images/foto-playa-verano.jpg
      Familia disfrutando del mar al atardecer

8. Rendimiento y mejores prácticas

Preconnect y DNS-prefetch para dominios de CDN:

Preload para imagen crítica (hero):

Uso de CDN con headers de caché (Cache-Control largo plazo y ETag).
HTTP/2 multiplexing para cargar múltiples imágenes simultáneamente.
Auditoría continua con Lighthouse y seguimiento de Core Web Vitals (LCP, CLS).

Resumen de beneficios

Menor tiempo de carga y menor consumo de datos.
Mejor posición en SEO y mayor visibilidad en Google Images.
Experiencia de usuario más fluida y accesible.
Compatibilidad progresiva con nuevos formatos (WebP, AVIF).