Buenas prácticas de optimización de imágenes web

Los hábitos que mantienen un sitio rápido a medida que crece.

La carga rápida no es un truco, sino hábitos aplicados con constancia:

  • Tamaño correcto — exporta al tamaño de visualización (unas 2× para Retina).
  • Formatos modernos con respaldo — WebP/AVIF; el elemento <picture> ofrece un fallback.
  • Imágenes responsivassrcset carga la resolución adecuada.
  • Carga diferida y caché agresiva mediante CDN.

Estandariza: redimensionar → WebP → calidad ~80 → quitar metadatos.

Prueba las herramientas

Preguntas frecuentes

¿Qué optimización de imágenes tiene más impacto?

El tamaño correcto: servir las imágenes al tamaño en que se muestran. Las imágenes demasiado grandes son el problema de rendimiento más común.

¿Cuándo usar el elemento picture en vez de img?

Cuando quieras servir un formato moderno (WebP/AVIF) con respaldo o recortes distintos por pantalla. Para un escalado simple basta <img> con srcset.

Lecturas relacionadas

Guías y Tutoriales
← Guías y Tutoriales