Usa picture para alternar entre archivos de imagen cuadrados y panorámicos en un punto de interrupción del viewport. Asigna a cada fuente sus propias dimensiones y deja que CSS escale proporcionalmente la imagen seleccionada. Esta guía crea y prueba un ejemplo local en un Mac.

¿Cómo alterna picture entre distintas relaciones de aspecto?

Coloca un elemento source con una condición media antes del elemento de respaldo img dentro de picture. El navegador selecciona la primera fuente apta cuya condición coincide y, luego, selecciona una imagen de su srcset. Esto se llama dirección artística: proporcionar composiciones diferentes para distintos diseños. El estándar HTML admite explícitamente este enfoque. Estándar HTML: Imágenes

Tres elementos trabajan en conjunto: la fuente elige el recurso, los atributos de dimensiones describen las proporciones de ese recurso y CSS controla el tamaño con el que se muestra. width y height de la fuente seleccionada pueden proporcionar la relación de aspecto que usa la imagen contenida. El elemento picture en sí no dibuja la imagen; lo hace su img. Estándar HTML: Contenido incrustado

Elige el mecanismo según el resultado que necesites:

Requisito Mecanismo adecuado
Cambiar la composición o la relación de aspecto en un punto de interrupción picture con un source que use media
Ofrecer distintas resoluciones de la misma composición srcset, con sizes cuando se usan descriptores de ancho
Mantener un solo archivo y recortarlo dentro de un marco fijo Ajuste de tamaño en CSS y object-fit: cover

Estos mecanismos resuelven decisiones distintas. La dirección artística determina qué composición aparece. La selección de resolución permite que el navegador elija una opción adecuada dentro de una composición. El ajuste con CSS determina cómo ocupa el recurso seleccionado su marco. MDN documenta estos usos de picture y su relación con srcset y las propiedades de ajuste. MDN: El elemento picture

Crea un ejemplo local completo en tu Mac

El ejemplo usa dos recursos SVG originales que contienen un círculo naranja y un rectángulo redondeado color turquesa. La versión cuadrada los apila; la versión panorámica los coloca uno al lado del otro. Todo está en una sola carpeta, sin recursos externos ni JavaScript para alternar entre ellos.

El contrato de recursos definido es sencillo: por debajo de un ancho de viewport de 700px, usa un recurso cuadrado de 600 × 600. A partir de 700px, usa un recurso panorámico de 1200 × 600. La imagen mostrada ocupa todo el ancho del área de contenido, con 16px a cada lado, hasta un ancho máximo de 960px. Estas dimensiones y el punto de interrupción son decisiones de diseño ilustrativas.

Guarda los dos recursos con las formas

Crea una carpeta llamada picture-demo. Usa un editor de código de texto sin formato para crear los dos archivos siguientes dentro de ella, conservando exactamente sus nombres y extensiones. Cada bloque delimitado contiene el archivo completo; copia el contenido sin los marcadores Markdown del bloque.

Guarda esto como shapes-square.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <rect width="600" height="600" fill="#fff5df"/>
  <circle cx="300" cy="180" r="100" fill="#de7b35"/>
  <rect x="150" y="340" width="300" height="160" rx="40" fill="#247d83"/>
</svg>

Guarda esto como shapes-wide.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <rect width="1200" height="600" fill="#fff5df"/>
  <circle cx="320" cy="300" r="180" fill="#de7b35"/>
  <rect x="650" y="150" width="400" height="300" rx="60" fill="#247d83"/>
</svg>

Guarda la página HTML

Crea index.html en la misma carpeta. Si usas TextEdit, elige Archivo > Nuevo y luego Formato > Convertir en texto sin formato antes de pegar el código. Guarda el archivo con la extensión .html y elige Usar .html si se te solicita. Apple documenta este flujo para crear archivos HTML. Apple: Trabajar con documentos HTML en TextEdit en Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape study</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { width: calc(100% - 32px); max-width: 960px; margin: 24px auto; }
    picture { display: block; }
    .study-image { display: block; width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Shape study</h1>
    <picture>
      <source media="(min-width: 700px)" srcset="shapes-wide.svg"
              width="1200" height="600">
      <img class="study-image" src="shapes-square.svg"
           width="600" height="600"
           alt="An orange circle and a teal rounded rectangle on cream.">
    </picture>
    <p>Resize the viewport to compare the two arrangements.</p>
  </main>
</body>
</html>

Abre index.html en Safari. Con un viewport lo bastante ancho, las formas deberían aparecer una al lado de la otra. Con un viewport más estrecho, deberían apilarse. Mantén juntos los tres archivos: las URL de recursos relativas se resuelven desde la ubicación del archivo HTML.

La fuente panorámica usa srcset, aunque contiene una sola URL. Dentro de picture, source requiere srcset; su atributo src no está permitido. Los atributos de dimensiones son números enteros sin unidades, así que usa width="1200", no width="1200px". MDN: El elemento source

¿Por qué declarar dimensiones tanto en la fuente como en el elemento de respaldo?

Las dimensiones de respaldo 600 × 600 describen el recurso cuadrado. Las dimensiones de la fuente panorámica 1200 × 600 describen el recurso panorámico. Proporcionar ambos pares permite que un navegador compatible establezca las proporciones de la imagen seleccionada antes de descargarla. Reutilizar las dimensiones cuadradas para la fuente panorámica proporcionaría una relación inicial incorrecta. Estándar HTML: Atributos de dimensiones de source

Luego, el CSS establece el ancho de la imagen para que ocupe el ancho disponible del contenido y mantiene la altura en automático. Esa dimensión automática permite que las proporciones de la imagen determinen su altura. El borrador sobre dimensionamiento de CSS describe cómo participa una relación de aspecto preferida en el dimensionamiento automático; fijar explícitamente ambas dimensiones elimina esa flexibilidad. Módulo de dimensionamiento de cajas CSS de nivel 4

Para este ejemplo, el diseño se puede comprobar con un cálculo sencillo:

ancho de imagen = min(ancho del viewport - 32, 960)
alto cuadrado = ancho de imagen
alto panorámico = ancho de imagen / 2
Ancho del viewport en píxeles CSS Recurso seleccionado Tamaño calculado de la imagen
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

Estos son valores calculados esperados para el CSS proporcionado, suponiendo que el ancho de la barra de desplazamiento no reduzca el área de contenido disponible. La sintaxis SVG, los nombres de los recursos, las dimensiones declaradas y los cálculos se comprobaron mediante programación; el ejemplo no se mostró en un navegador durante la preparación.

Observa el gran cambio de altura entre 699px y 700px. Se debe directamente al cambio de una composición cuadrada a una panorámica. Es lo esperado al cambiar el tamaño. Si se produce otro salto tras la carga mientras el viewport permanece fijo, conviene revisar las dimensiones declaradas y cualquier CSS que las sobrescriba.

Prueba con precisión el punto de interrupción en Safari

El modo de diseño adaptable de Safari permite cambiar el tamaño del viewport de la página independientemente de la ventana del escritorio. En los ajustes Avanzado de Safari, activa Mostrar funciones para desarrolladores web. Abre el ejemplo y luego elige Desarrollo > Entrar en el modo de diseño adaptable o pulsa Control-Comando-R. WebKit documenta el ajuste, el atajo y la vista previa redimensionable. WebKit: Modo de diseño adaptable simplificado

Prueba primero 699px y 700px, y luego un viewport bastante estrecho y otro ancho. Comprueba que la composición cambie en el límite previsto, que la forma naranja siga siendo circular y que el párrafo debajo de la imagen se ajuste a la altura cambiante de esta. Recarga a cada lado del punto de interrupción para comprobar tanto el diseño inicial como el cambio de tamaño.

Para comprobar directamente qué archivo seleccionó Safari, ejecuta este fragmento de diagnóstico opcional en la consola del Inspector Web mientras ves el ejemplo:

const studyImage = document.querySelector('.study-image');
if (!studyImage) {
  throw new Error('Open the Shape study example before running this snippet.');
}
const studyBox = studyImage.getBoundingClientRect();
console.table({
  selectedURL: studyImage.currentSrc,
  displayedWidth: studyBox.width,
  displayedHeight: studyBox.height
});

Vuelve a ejecutar el fragmento después de cruzar el punto de interrupción. La URL seleccionada debería terminar con el nombre de archivo cuadrado o panorámico correspondiente. La propiedad currentSrc informa la URL elegida por el navegador; su valor por sí solo no demuestra que el recurso se haya cargado correctamente. MDN: Propiedad currentSrc de HTMLImageElement

¿Qué debes comprobar si el cambio no funciona como esperas?

Revisa la selección, las dimensiones de los recursos y la presentación en ese orden. Así evitarás confundir un problema de tamaño en CSS con uno de selección de recursos.

  1. El archivo cuadrado sigue seleccionado en anchos grandes. Confirma que el viewport alcance 700px, que source aparezca antes de img y que la fuente use srcset. Si hay varias fuentes, comprueba su orden: una fuente anterior cuya condición coincida puede tener prioridad. Estándar HTML: Selección por dirección artística
  2. No aparece un recurso. Compara los nombres de archivo del marcado con los archivos de la carpeta, incluidas las extensiones. En este ejemplo, los dos archivos SVG deben estar junto a index.html.
  3. El recurso correcto aparece con una forma incorrecta. Inspecciona el CSS aplicado al img real, sobre todo las reglas que asignan una altura fija. Restablece height: auto para conservar las proporciones.
  4. La imagen salta después de cargarse. Compara cada par de dimensiones declarado con la relación de aspecto real de su recurso. Comprueba también si un aspect-ratio explícito de CSS está sobrescribiendo las proporciones previstas.

Si tu diseño requiere un marco fijo, elige deliberadamente el comportamiento de ajuste. object-fit: contain conserva todo el recurso y puede dejar espacio vacío; cover llena el marco y puede recortar el contenido; fill puede estirarlo. Aplica las propiedades de ajuste a img. El ejemplo proporcionado no necesita un marco fijo porque su diseño sigue las proporciones del recurso seleccionado. MDN: object-fit

¿Cuáles son los límites de compatibilidad con los navegadores?

La compatibilidad con picture y la compatibilidad con las dimensiones específicas de cada fuente son consideraciones distintas. El resumen de compatibilidad del estándar HTML enumera picture en los motores de navegador actuales. MDN indica que la propiedad width de source, que refleja su atributo de dimensiones, está disponible en los navegadores desde diciembre de 2022. No se debe asumir que los navegadores antiguos reservan correctamente el espacio según las dimensiones específicas de cada fuente. Estándar HTML: El elemento picture, MDN: Propiedad width de HTMLSourceElement

Cuando ninguna fuente coincide, o el navegador no admite picture, la imagen la proporciona el elemento de respaldo img. En este ejemplo, corresponde a la composición cuadrada. Un navegador que cambia de recurso, pero no admite las dimensiones específicas de cada fuente, quizá solo pueda establecer las proporciones finales de la imagen panorámica después de cargarla. MDN: El elemento picture

Para un navegador de destino que admita CSS aspect-ratio pero necesite una regla de dimensionamiento explícita, añade el siguiente fragmento CSS a la hoja de estilos existente. Reproduce el punto de interrupción de HTML y proporciona relaciones de aspecto provisionales, a la vez que permite que la relación natural de la imagen cargada prevalezca:

.study-image {
  aspect-ratio: auto 1 / 1;
}

@media (min-width: 700px) {
  .study-image {
    aspect-ratio: auto 2 / 1;
  }
}

MDN documenta esta combinación de auto y una relación de aspecto, e indica que CSS aspect-ratio está disponible en todos los navegadores desde septiembre de 2021. Por lo tanto, el fragmento también tiene su propio límite de compatibilidad. Mantén su punto de interrupción sincronizado con la condición de la fuente y prueba las versiones de navegador que realmente necesitas admitir. MDN: aspect-ratio

Cuando el ejemplo funcione correctamente, sustituye los archivos de muestra por tus propias composiciones y actualiza las dimensiones en conjunto. Mantén coherentes la condición de la fuente, las proporciones de los recursos y el dimensionamiento de CSS, y repite las comprobaciones justo por debajo y por encima del punto de interrupción.

Fuentes