Elige el patrón correcto
El cambio por resolución mantiene la composición igual y ofrece varios anchos de archivo. Es el patrón habitual para fotos de producto, figuras de artículo y tarjetas. Usa descriptores de ancho como 480w o 1200w cuando el ancho renderizado cambia con el diseño. El número es el ancho real en píxeles del archivo, no un objetivo de teléfono ni una orden de CSS.
El cambio por densidad sirve una ranura CSS fija con más píxeles fuente para una pantalla de mayor densidad. Sus descriptores son 1x, 1.5x o 2x, y conviene para un logo o ícono que, por ejemplo, siempre mide 160 CSS pixels de ancho. No mezcles descriptores de ancho y densidad en un mismo srcset.
Usa descriptores w con sizes cuando un componente crece o se reduce.
Usa descriptores x sin sizes solo cuando el tamaño renderizado en CSS sea estable.
Entiende cómo sizes guía la selección
Con descriptores de ancho, el navegador evalúa sizes antes de descargar una imagen. Cada entrada empareja una condición media opcional con una longitud. La primera condición coincidente suministra el source size; la longitud incondicional final es la reserva. sizes es una pista para la selección, no una regla de CSS.
El navegador compara ese source size con los anchos candidatos para calcular la densidad efectiva, luego puede considerar la densidad de pantalla, el zoom y las condiciones de red. No está obligado a elegir el nombre de archivo matemáticamente más cercano. Proporciona candidatos honestos y una estimación de ranura creíble; la selección final sigue siendo decisión del agente de usuario.
La primera condición media coincidente gana, así que escribe la lista en el orden que haga correcta esa primera coincidencia.
Una tarjeta de escritorio de un tercio descrita como ancho del viewport puede desencadenar un candidato innecesariamente grande.
Deriva los candidatos del diseño real
Inventaría componentes, no páginas. Un hero, figura editorial, galería de producto, miniatura de búsqueda y logo de pie de página suelen tener anchos de ranura distintos. Para cada uno, registra el ancho renderizado estrecho y el mayor, la relación de aspecto, el comportamiento de recorte y la visibilidad inicial en pantalla.
Genera anchos en torno al rango significativo de la ranura del componente, con una opción mayor cuando el detalle justifique renderizado de alta densidad. Archivos casi idénticos añaden complejidad al build y la caché; solo un archivo muy pequeño y otro muy grande fuerzan un compromiso. Prueba las URLs generadas en vez de asumir que las transformaciones de imagen funcionan.
Mantén un src de reserva válido y valores width y height que coincidan con la proporción entregada. Reservan espacio pero no impiden que el CSS responsivo cambie las dimensiones finales.
Un candidato anunciado como 800w debe ser realmente 800 píxeles de ancho.
Mantén la ranura y el plan de candidatos junto con los cambios de plantilla y diseño.
Usa picture para dirección artística
La dirección artística cambia la composición, no solo el tamaño del archivo. Una foto amplia en paisaje puede necesitar un recorte más apretado en retrato en una pantalla estrecha para que el sujeto siga siendo visible. El elemento picture puede ofrecer opciones específicas por media, seguidas por un img de reserva. El navegador considera la media, el type y la información srcset de cada source; el img lleva el texto alternativo, dimensiones y el comportamiento de reserva.
Prepara cada recorte con revisión editorial y de accesibilidad. Un recorte móvil puede eliminar un detalle de producto o a una persona mencionada en el texto alternativo. Pon alt en el img y describe la información o función que la imagen transmite. Usa alt="" solo para una imagen genuinamente decorativa; para una imagen enlazada o botón, describe la acción en lugar de la apariencia. No introduzcas picture cuando el recorte no cambia: un srcset basado en ancho ordinario es más sencillo.
Un hero de escritorio cargado necesita un recorte en retrato distinto para un teléfono.
Un source en picture puede ofrecer una pista de type y preservar un img de reserva ampliamente usable.
Evita cargas y marcado costosos
El desperdicio habitual es copiar sizes="100vw" a cada imagen. Eso puede encajar en una figura estrecha a pantalla completa pero no en un contenedor con límite ni en una tarjeta de escritorio. El fallo opuesto es sizes obsoletos tras un rediseño. Cambia CSS y sizes juntos.
No cargues perezosamente (lazy-load) una imagen importante en el contenido inicialmente visible. La guía recomienda lazy-loading para imágenes por debajo del pliegue y mantener el hero visible como eager. Fetch priority puede elevar una imagen verdaderamente vital, pero reglas amplias de alta prioridad o preload pueden perjudicar el rendimiento. No confíes en nombres de archivo o resultados en caché como prueba.
Un CMS, proxy o caché puede ocultar un descriptor erróneo o una petición de imagen no intencionada.
No hagas que texto esencial de la página dependa solo de un recorte dirigido artísticamente.
Prueba la petición, el recorte y la reparación
Prueba páginas representativas en anchos de cambio de diseño, incluyendo justo por encima y por debajo de un punto de quiebre del grid. Incluye una configuración de alta densidad, escritorio ancho y estados que alteren la ranura. Confirma dimensiones renderizadas, recorte, texto alternativo y nitidez visual.
En Chrome DevTools, abre Network, recarga con caché deshabilitada o usa "Empty Cache And Hard Reload", filtra las peticiones de imagen e inspecciona URL, tamaño transferido, cabeceras, iniciador y tiempos. Estrangula (throttle) para revelar trabajo tardío o desperdiciado. Registra viewport, device scale factor, ranura, candidato, bytes transferidos y resultado esperado.
Cuando una plantilla, punto de quiebre, CDN o pipeline de activos cambie, haz de esto una puerta de lanzamiento. Repara de forma estrecha: corrige sizes, arregla un descriptor, regenera un recorte, restaura una reserva o elimina un preload innecesario. Vuelve a probar con una recarga con caché vacía.
El panel Network registra el candidato que realmente se solicitó.
Esto verifica el comportamiento de entrega de imágenes, no la capacidad del origen, la disponibilidad del CDN ni el tiempo de actividad general.
Aplica esto como control de resiliencia SIU
Las imágenes responsivas reducen transferencia evitable pero no pueden garantizar una petición exitosa. Errores de origen, transformaciones no disponibles, hosts de terceros y fallos de CDN requieren planificación separada de continuidad y recuperación.
Para SIU, usa registros de prueba para detectar regresiones de entrega temprano, identificar la plantilla o regla de transformación responsable y hacer la corrección más pequeña y segura antes del lanzamiento. Empareja esto con pruebas de disponibilidad previas al despliegue y planificación de rollback.
Asigna un propietario del componente y de la canalización de imágenes para cada verificación de selección fallida.