Usa picture per passare da file immagine quadrati a file panoramici in corrispondenza di un breakpoint del viewport. Assegna dimensioni proprie a ciascuna sorgente e lascia che il CSS ridimensioni proporzionalmente l’immagine selezionata. Questa guida crea e testa un esempio locale su Mac.

In che modo picture passa da una proporzione all’altra?

Inserisci un elemento source con una condizione media prima dell’elemento di fallback img all’interno di picture. Il browser seleziona la prima sorgente idonea la cui condizione corrisponde, quindi seleziona un’immagine da srcset di quella sorgente. Questa tecnica è chiamata art direction: fornire composizioni diverse per layout diversi. Lo standard HTML supporta esplicitamente questo approccio. Standard HTML: Images

Tre elementi lavorano insieme: la sorgente sceglie la risorsa, gli attributi dimensionali ne descrivono le proporzioni e il CSS ne controlla le dimensioni visualizzate. width e height della sorgente selezionata possono fornire la proporzione usata dall’immagine contenuta. L’elemento picture non disegna l’immagine; lo fa il suo img. Standard HTML: Embedded content

Scegli il meccanismo in base al risultato che ti serve:

Requisito Meccanismo appropriato
Cambiare composizione o proporzione in corrispondenza di un breakpoint picture con un source che usa media
Offrire risoluzioni diverse della stessa composizione srcset, con sizes quando si usano descrittori di larghezza
Mantenere un solo file ma ritagliarlo all’interno di una cornice fissa Ridimensionamento CSS e object-fit: cover

Questi meccanismi riguardano decisioni diverse. L’art direction determina quale composizione viene mostrata. La selezione della risoluzione consente al browser di scegliere un candidato adatto all’interno di una composizione. L’adattamento CSS determina come la risorsa selezionata occupa la cornice. MDN documenta questi usi di picture e il suo rapporto con srcset e le proprietà di adattamento. MDN: The picture element

Crea un esempio locale completo sul tuo Mac

L’esempio usa due risorse SVG originali che contengono un cerchio arancione e un rettangolo arrotondato color verde petrolio. La versione quadrata li dispone in verticale; quella panoramica li affianca. Tutto si trova in un’unica cartella, senza risorse esterne né JavaScript per il cambio.

Il contratto delle risorse definite è semplice: sotto una larghezza del viewport di 700px, usa una risorsa quadrata di 600 × 600. Da 700px in su, usa una risorsa panoramica di 1200 × 600. L’immagine visualizzata riempie un’area di contenuto con 16px su ciascun lato, fino a una larghezza massima di 960px. Queste dimensioni e il breakpoint sono scelte progettuali a scopo illustrativo.

Salva le due risorse con le forme

Crea una cartella denominata picture-demo. Usa un editor di codice in testo semplice per creare al suo interno i due file seguenti, mantenendo esattamente i nomi e le estensioni indicati. Ogni blocco delimitato contiene il file completo; copia il contenuto senza i delimitatori Markdown.

Salvalo come 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>

Salvalo come 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>

Salva la pagina HTML

Crea index.html nella stessa cartella. Se usi TextEdit, scegli File > Nuovo, poi Formato > Converti in testo semplice prima di incollare il codice. Salva il file con l’estensione .html e scegli Usa .html se richiesto. Apple documenta questa procedura per creare file HTML. Apple: Lavorare con documenti HTML in TextEdit su 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>

Apri index.html in Safari. Con un viewport abbastanza ampio, le forme dovrebbero apparire affiancate. Con un viewport più stretto, dovrebbero disporsi in verticale. Tieni insieme tutti e tre i file: gli URL relativi delle risorse vengono risolti a partire dalla posizione del file HTML.

La sorgente panoramica usa srcset, anche se contiene un solo URL. All’interno di picture, source richiede srcset; il suo attributo src non è consentito. Gli attributi dimensionali sono numeri interi senza unità: usa quindi width="1200", non width="1200px". MDN: The source element

Perché dichiarare le dimensioni sia sulla sorgente sia sul fallback?

Le dimensioni 600 × 600 del fallback descrivono la risorsa quadrata. Le dimensioni 1200 × 600 della sorgente panoramica descrivono la risorsa panoramica. Fornire entrambe le coppie consente a un browser compatibile di stabilire le proporzioni dell’immagine selezionata prima di scaricarla. Riutilizzare le dimensioni quadrate per la sorgente panoramica fornirebbe una proporzione iniziale errata. Standard HTML: attributi dimensionali di source

Il CSS imposta quindi la larghezza dell’immagine sulla larghezza disponibile dell’area di contenuto, lasciando automatica l’altezza. Questa dimensione automatica consente alle proporzioni dell’immagine di determinarne l’altezza. La bozza sulle dimensioni CSS descrive come una proporzione preferita intervenga nel dimensionamento automatico; impostare esplicitamente entrambe le dimensioni elimina questa flessibilità. CSS Box Sizing Module Level 4

Per questo esempio, il layout si può verificare con un semplice calcolo:

larghezza immagine = min(larghezza viewport - 32, 960)
altezza quadrata = larghezza immagine
altezza panoramica = larghezza immagine / 2
Larghezza viewport in pixel CSS Risorsa selezionata Dimensioni calcolate dell’immagine
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

Queste sono aspettative calcolate per il CSS fornito, assumendo che la larghezza della barra di scorrimento non riduca l’area di contenuto disponibile. La sintassi SVG, i nomi delle risorse, le dimensioni dichiarate e i calcoli sono stati verificati a livello programmatico; durante la preparazione l’esempio non è stato visualizzato in un browser.

Nota il forte cambiamento di altezza tra 699px e 700px. È una conseguenza diretta del passaggio da una composizione quadrata a una panoramica. È normale durante il ridimensionamento. Se si verifica un secondo salto dopo il caricamento, mentre il viewport rimane invariato, controlla le dimensioni dichiarate e le eventuali regole CSS sovrascritte.

Verifica con precisione il breakpoint in Safari

La modalità Design responsivo di Safari consente di ridimensionare il viewport della pagina indipendentemente dalla finestra del desktop. Nelle impostazioni Avanzate di Safari, abilita Mostra funzionalità per gli sviluppatori web. Apri l’esempio, poi scegli Sviluppo > Accedi alla modalità Design responsivo oppure premi Control-Command-R. WebKit documenta l’impostazione, la scorciatoia e l’anteprima ridimensionabile. WebKit: modalità Design responsivo semplificata

Prova prima 699px e 700px, poi un viewport decisamente stretto e uno ampio. Controlla che la composizione cambi al confine previsto, che la forma arancione rimanga circolare e che il paragrafo sotto l’immagine segua la variazione della sua altezza. Ricarica la pagina su entrambi i lati del breakpoint per controllare il layout iniziale oltre al ridimensionamento.

Per controllare direttamente quale file ha selezionato Safari, esegui questo snippet diagnostico facoltativo nella console di Web Inspector mentre visualizzi l’esempio:

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

Esegui di nuovo lo snippet dopo aver superato il breakpoint. L’URL selezionato dovrebbe terminare con il nome file quadrato o panoramico corrispondente. La proprietà currentSrc riporta l’URL scelto dal browser; il suo valore, da solo, non dimostra che la risorsa sia stata caricata correttamente. MDN: proprietà currentSrc di HTMLImageElement

Cosa controllare se il cambio non funziona come previsto?

Controlla nell’ordine la selezione, le dimensioni della risorsa e la presentazione. In questo modo eviterai di confondere un problema di dimensionamento CSS con un problema di selezione della risorsa.

  1. Il file quadrato rimane selezionato alle larghezze maggiori. Verifica che il viewport raggiunga 700px, che source preceda img e che la sorgente usi srcset. In presenza di più sorgenti, controllane l’ordine: una sorgente precedente la cui condizione corrisponde può avere la precedenza. Standard HTML: selezione delle art direction
  2. Una risorsa non viene visualizzata. Confronta i nomi file nel markup con quelli dei file nella cartella, comprese le estensioni. Per questo esempio, entrambi i file SVG devono trovarsi accanto a index.html.
  3. La risorsa corretta viene visualizzata con una forma errata. Controlla il CSS applicato all’elemento img effettivo, in particolare le regole che assegnano un’altezza fissa. Ripristina height: auto per mantenere le proporzioni.
  4. L’immagine salta dopo il caricamento. Confronta ogni coppia di dimensioni dichiarate con la proporzione effettiva della risorsa. Controlla anche se un valore CSS esplicito aspect-ratio sovrascrive le proporzioni desiderate.

Se il tuo design richiede una cornice fissa, scegli con attenzione il comportamento di adattamento. object-fit: contain preserva l’intera risorsa e può lasciare spazio vuoto; cover riempie la cornice e può ritagliare il contenuto; fill può deformarla. Applica le proprietà di adattamento a img. L’esempio fornito non richiede una cornice fissa, perché il layout segue le proporzioni della risorsa selezionata. MDN: object-fit

Quali sono i limiti del supporto dei browser?

Il supporto di picture e quello delle dimensioni specifiche per sorgente sono aspetti distinti. La panoramica della compatibilità dello Standard HTML elenca picture nei motori dei browser attuali. MDN indica che la proprietà sorgente width, che riflette il suo attributo dimensionale, è disponibile nei browser da dicembre 2022. Non si dovrebbe presumere che i browser meno recenti riservino correttamente le dimensioni specifiche della sorgente. Standard HTML: The picture element, MDN: proprietà width di HTMLSourceElement

Quando nessuna sorgente corrisponde, o il browser non supporta picture, l’elemento di fallback img fornisce l’immagine. In questo esempio, si tratta della composizione quadrata. Un browser che cambia risorsa ma non supporta le dimensioni della sorgente potrebbe stabilire le proporzioni definitive dell’immagine panoramica solo dopo averla caricata. MDN: The picture element

Per un browser di destinazione che supporta aspect-ratio di CSS ma richiede una regola di dimensionamento esplicita, aggiungi il seguente frammento CSS al foglio di stile esistente. Riproduce il breakpoint HTML e fornisce proporzioni provvisorie, consentendo al tempo stesso alle proporzioni naturali dell’immagine caricata di subentrare:

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

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

MDN documenta questa combinazione di auto e una proporzione, e indica che aspect-ratio di CSS è disponibile nei browser da settembre 2021. Anche questo frammento ha quindi un proprio limite di compatibilità. Mantieni il suo breakpoint sincronizzato con la condizione della sorgente e verifica le versioni dei browser che devi effettivamente supportare. MDN: aspect-ratio

Quando l’esempio funziona correttamente, sostituisci i file dimostrativi con le tue composizioni e aggiorna insieme le loro dimensioni. Mantieni coerenti la condizione della sorgente, le proporzioni delle risorse e il dimensionamento CSS, poi ripeti i controlli subito sotto e subito sopra il breakpoint.

Fonti