Para imágenes responsivas, no hay dimensiones únicas, sino un enfoque de múltiples versiones de una misma imagen (srcset/sizes) y puntos de ruptura (breakpoints) como 360px (móvil), 768px (tableta) y 1200px (escritorio), usando width: 100%; height: auto; en CSS para escalar y atributos como width y height en HTML para evitar saltos de contenido, sirviendo la imagen correcta según el dispositivo y resolución.
Dimensiones y Puntos Clave
1. Imágenes Base (Escritorio)
Principal/Banner: 1280x720px o 1920x1080px (para mayor detalle en pantallas grandes).
Artículos/Blog: Alrededor de 1200px de ancho.
2.Imágenes para Móviles (Adaptadas)
Las imágenes deben reducirse a anchos como 360px, 375px, o 411px, dependiendo del dispositivo.
Se crean versiones más pequeñas (ej. 360x200px para una imagen principal) para no cargar archivos pesados en móviles.
3. Puntos de Ruptura (Breakpoints Comunes)
Móvil: < 768px.
Tableta: 768px - 992px.
Escritorio: > 992px (con un máximo de 1140px o 1200px para el contenedor principal).
Implementación Técnica Clave
srcset y sizes: Usar estos atributos en la etiqueta permite al navegador elegir la imagen más adecuada de una lista de opciones (srcset) según el tamaño de la pantalla y la densidad de píxeles, y define el ancho que ocupará la imagen (sizes).
CSS Básico: img { width: 100%; height: auto; } para que la imagen se escale dentro de su contenedor, manteniendo la proporción.
width y height en HTML: Incluir estos atributos (ej. <img src="..." width="1200" height="800">) ayuda al navegador a reservar espacio y evitar que el contenido "salte" mientras carga la imagen.
En Resumen: Crea varias versiones de tus imágenes para diferentes anchos (ej. 360px, 600px, 900px, 1200px) y usa srcset para que el navegador decida cuál es la mejor, optimizando carga y visualización en cualquier dispositivo.
| Salu2 y bendiciones, Atte, Angel Paz |  |
