Use picture para alternar entre arquivos de imagem quadrados e largos em um ponto de quebra da viewport. Dê a cada fonte suas próprias dimensões e deixe o CSS escalar a imagem selecionada proporcionalmente. Este guia cria e testa um exemplo local em um Mac.

Como o picture alterna entre diferentes proporções?

Coloque um elemento source com uma condição media antes do img de fallback dentro do picture. O navegador seleciona a primeira fonte elegível cuja condição corresponde, depois seleciona uma imagem do srcset dessa fonte. Isso é chamado de direção de arte: fornecer diferentes composições para diferentes layouts. O HTML Standard suporta explicitamente esta abordagem. HTML Standard: Images

Três partes trabalham juntas: a fonte escolhe o recurso, atributos de dimensão descrevem as proporções desse recurso, e o CSS controla seu tamanho exibido. O width e o height da fonte selecionada podem fornecer a proporção usada pela imagem contida. O próprio elemento picture não pinta a imagem; seu img o faz. HTML Standard: Embedded content

Escolha o mecanismo de acordo com o resultado necessário:

Seu requisito Mecanismo apropriado
Alterar a composição ou proporção em um ponto de quebra picture com um source usando media
Oferecer diferentes resoluções da mesma composição srcset, com sizes ao usar descritores de largura
Manter um arquivo mas recortá-lo dentro de um quadro fixo Dimensionamento CSS e object-fit: cover

Estes mecanismos abordam decisões diferentes. A direção de arte determina qual composição aparece. A seleção de resolução deixa o navegador escolher um candidato apropriado dentro de uma composição. O ajuste CSS determina como o recurso selecionado ocupa seu quadro. A MDN documenta estes usos do picture e sua relação com srcset e propriedades de ajuste. MDN: The picture element

Criar um exemplo local completo no seu Mac

O exemplo usa dois recursos SVG originais contendo um círculo laranja e um retângulo arredondado azul-petróleo. A versão quadrada os empilha; a versão larga os coloca lado a lado. Tudo vive em uma pasta, sem assets externos ou JavaScript necessários para a alternância.

O contrato do recurso autorado é simples: abaixo de uma largura de viewport de 700px, use um recurso quadrado de 600 × 600. Em 700px e acima, use um recurso largo de 1200 × 600. A imagem exibida preenche uma área de conteúdo com 16px de cada lado, até uma largura máxima de 960px. Estas dimensões e o ponto de quebra são escolhas de design ilustrativas.

Salvar os dois recursos de forma

Crie uma pasta chamada picture-demo. Use um editor de código de texto simples para criar os dois arquivos a seguir dentro dela, preservando seus nomes e extensões exatos. Cada bloco cercado contém o arquivo completo; copie o conteúdo sem os marcadores de cerca Markdown.

Salve isto 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>

Salve isto 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>

Salvar a página HTML

Crie index.html na mesma pasta. Se você usar o TextEdit, escolha Arquivo > Novo, depois Formato > Tornar Texto Simples antes de colar o código. Salve o arquivo com a extensão .html e escolha Usar .html se solicitado. A Apple documenta este fluxo de trabalho para criar arquivos HTML. Apple: Work with HTML documents in TextEdit on 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>

Abra index.html no Safari. Com uma viewport suficientemente larga, as formas devem aparecer lado a lado. Com uma viewport mais estreita, elas devem empilhar. Mantenha os três arquivos juntos: as duas URLs de recurso relativas resolvem a partir da localização do arquivo HTML.

A fonte larga usa srcset, mesmo que contenha apenas uma URL. Dentro do picture, o source requer srcset; seu atributo src não é permitido. Atributos de dimensão são inteiros sem unidades, então use width="1200", não width="1200px". MDN: The source element

Por que declarar dimensões tanto na fonte quanto no fallback?

As dimensões 600 × 600 do fallback descrevem o recurso quadrado. As dimensões 1200 × 600 da fonte larga descrevem o recurso largo. Fornecer ambos os pares permite que um navegador compatível estabeleça as proporções da imagem selecionada antes de baixá-la. Reutilizar as dimensões quadradas para a fonte larga forneceria a proporção inicial errada. HTML Standard: Source dimension attributes

O CSS então define a largura da imagem para a largura de conteúdo disponível, deixando a altura automática. Essa dimensão automática permite que as proporções da imagem determinem sua altura. O rascunho de dimensionamento CSS descreve como uma proporção preferida participa do dimensionamento automático; fixar explicitamente ambas as dimensões remove essa flexibilidade. CSS Box Sizing Module Level 4

Para este exemplo, o layout pode ser verificado com um pequeno cálculo:

largura da imagem = min(largura da viewport - 32, 960)
altura quadrada = largura da imagem
altura larga = largura da imagem / 2
Largura da viewport em pixels CSS Recurso selecionado Tamanho calculado da imagem
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

Estas são expectativas calculadas para o CSS fornecido, assumindo que nenhuma largura de barra de rolagem reduza a área de conteúdo disponível. A sintaxe SVG, nomes de recursos, dimensões declaradas e aritmética foram verificadas programaticamente; o exemplo não foi renderizado em um navegador durante a preparação.

Observe a grande mudança de altura entre 699px e 700px. Isso decorre diretamente da mudança de uma composição quadrada para uma larga. É esperado durante o redimensionamento. Um segundo salto após o carregamento, enquanto a viewport permanece fixa, pede para verificar as dimensões declaradas e qualquer CSS que as sobrescreva.

Testar o ponto de quebra precisamente no Safari

O Modo de Design Responsivo do Safari permite redimensionar a viewport da página independentemente da janela da área de trabalho. Nas configurações Avançadas do Safari, ative Mostrar recursos para desenvolvedores web. Abra o exemplo, depois escolha Desenvolvedor > Entrar no Modo de Design Responsivo, ou pressione Control-Command-R. O WebKit documenta a configuração, atalho e visualização redimensionável. WebKit: Simplified Responsive Design Mode

Teste 699px e 700px primeiro, depois uma viewport confortavelmente estreita e larga. Verifique se a composição muda no limite pretendido, a forma laranja permanece circular, e o parágrafo abaixo da imagem acompanha sua altura variável. Recarregue em cada lado do ponto de quebra para verificar o layout inicial assim como o redimensionamento.

Para uma verificação direta de qual arquivo o Safari selecionou, execute este snippet de diagnóstico opcional no console do Web Inspector enquanto visualiza o exemplo:

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
});

Execute o snippet novamente após cruzar o ponto de quebra. A URL selecionada deve terminar no nome de arquivo quadrado ou largo correspondente. A propriedade currentSrc relata a URL escolhida pelo navegador; seu valor por si só não prova que o recurso carregou com sucesso. MDN: HTMLImageElement currentSrc property

O que verificar quando a alternância parece errada?

Trabalhe pela seleção, dimensões do recurso e apresentação, nessa ordem. Isso evita que um problema de dimensionamento CSS seja confundido com um problema de seleção de recurso.

  1. O arquivo quadrado permanece selecionado em larguras largas. Confirme que a viewport atinge 700px, que source precede img, e que a fonte usa srcset. Com múltiplas fontes, inspecione sua ordem: uma fonte correspondente anterior pode ter precedência. HTML Standard: Art direction selection
  2. Um recurso não aparece. Compare os nomes de arquivos na marcação com os arquivos na pasta, incluindo extensões. Para este exemplo, ambos os arquivos SVG devem ficar ao lado de index.html.
  3. O recurso certo aparece no formato errado. Inspecione o CSS aplicado ao img real, especialmente regras que atribuem uma altura fixa. Restaure height: auto para dimensionamento proporcional.
  4. A imagem pula após o carregamento. Compare cada par de dimensões declaradas com a proporção real do recurso. Também verifique se um aspect-ratio CSS explícito está sobrescrevendo as proporções pretendidas.

Se seu design real requer um quadro fixo, escolha o comportamento de ajuste deliberadamente. object-fit: contain preserva o recurso inteiro e pode deixar espaço vazio; cover preenche o quadro e pode cortar conteúdo; fill pode esticá-lo. Aplique propriedades de ajuste ao img. O exemplo fornecido não precisa de quadro fixo porque seu layout segue as proporções do recurso selecionado. MDN: object-fit

Quais são os limites de suporte do navegador?

O suporte para picture e o suporte para dimensões específicas da fonte são considerações separadas. O resumo de compatibilidade do HTML Standard lista picture nos motores de navegador atuais. A MDN marca a propriedade width da fonte, que reflete seu atributo de dimensão, como disponível entre navegadores desde dezembro de 2022. Navegadores mais antigos não devem ser assumidos como reservando dimensões específicas da fonte corretamente. HTML Standard: The picture element, MDN: HTMLSourceElement width property

Quando nenhuma fonte corresponde, ou o navegador não suporta picture, o img de fallback fornece a imagem. Neste exemplo, essa é a composição quadrada. Um navegador que alterna recursos mas carece de suporte a dimensões de fonte pode estabelecer as proporções finais da imagem larga apenas após o carregamento. MDN: The picture element

Para um navegador-alvo que suporta CSS aspect-ratio mas precisa de uma regra de dimensionamento explícita, adicione o seguinte fragmento CSS à folha de estilos existente. Ele espelha o ponto de quebra HTML e fornece proporções provisórias enquanto permite que a proporção natural da imagem carregada assuma o controle:

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

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

A MDN documenta esta combinação de auto e uma proporção, e lista o CSS aspect-ratio como disponível entre navegadores desde setembro de 2021. O fragmento portanto tem sua própria fronteira de suporte. Mantenha seu ponto de quebra sincronizado com a condição da fonte, e teste as versões do navegador que você realmente precisa acomodar. MDN: aspect-ratio

Uma vez que o exemplo se comporte corretamente, substitua os arquivos sintéticos por suas próprias composições e atualize suas dimensões em conjunto. Mantenha a condição da fonte, proporções do recurso e dimensionamento CSS consistentes, depois repita as verificações imediatamente abaixo e acima do ponto de quebra.

Fontes