Invia il
candidato immagine giusto.
Un'analisi privata, eseguita solo nel browser, per rivedere metadati di base dell'immagine insieme a domande di delivery. Non carica, conserva, ottimizza né ispeziona un file oltre i metadati e le dimensioni locali.
USALO PER: Usalo per preparare una discussione su posizionamento dell'immagine, candidati responsive, testo alternativo accessibile e compromessi di consegna.
Ispeziona il punto di partenza.
Scegli un'immagine locale per vedere i metadati e le dimensioni di base riportati dal browser. SIU non carica, invia, conserva, ottimizza o memorizza il file selezionato.
SELEZIONA IMMAGINE LOCALE — Nessuna immagine selezionata. Nulla è stato caricato o memorizzato.
Nulla esce da qui.
Un'immagine selezionata mostrerà il suo nome, il tipo MIME riportato dal browser, la dimensione in byte, l'ora dell'ultima modifica e le dimensioni locali decodificabili.
Nessuna anteprima viene generata. Seleziona un'immagine solo se i metadati locali sono utili per la tua revisione.
Esegui il prossimo passo noto.
- Seleziona un'immagine locale. Il browser legge nome, tipo MIME, dimensione in byte, timestamp di ultima modifica e — dove decodificabile — le dimensioni in pixel solo in memoria.
- Metti in relazione le dimensioni con la larghezza renderizzata prevista e la densità del dispositivo; quindi decidi se la pagina necessita di più candidati immagine o di art direction.
- Rivedi il contesto di markup: testo alternativo significativo, dimensioni dichiarate quando appropriate, selezione sorgenti responsive e priorità di caricamento sono decisioni separate.
- Mantieni la risorsa sorgente originale secondo il processo stabilito dal team per asset e licenze. Questa pagina non crea file derivati.
Ispeziona la pagina renderizzata ai breakpoint previsti con il browser e gli strumenti di performance approvati dal team.
Conferma il testo alternativo dell'immagine e il markup responsive effettivo in code review.
Misura la consegna nell'ambiente reale prima di affermare un miglioramento.
Note sulla fonte, non certezza presa in prestito.
Base di pianificazione: linee guida responsive-image di web.dev e documentazione MDN File API
- web.dev — Responsive images ↗web.dev spiega che i byte delle immagini possono essere significativi e descrive candidati responsive, srcset, sizes e picture per i casi d'uso appropriati.
- MDN — Using files from web applications ↗MDN documenta gli oggetti File selezionati dall'utente e i metadati locali disponibili come name, type e size.
Autore: Bozza editoriale di SIU Enablement; guida operativa vincolata alle fonti. Revisionato da: I responsabili di design, accessibilità, prestazioni e diritti esaminano le immagini nel loro contesto di distribuzione. Rivalida: Rivalidare quando cambiano posizionamento, regole responsive, origine della risorsa o provider di distribuzione.