Una grande immagine compressa resta una grande scelta
Uno spazio piccolo non riduce il file scaricato. Se ogni visitatore riceve la stessa foto intera, un telefono può comunque scaricare pixel inutili al layout. Compressione e selezione adattiva risolvono aspetti diversi del problema.
Il flusso per i siti spiega la preparazione, mentre la guida alla distribuzione delle immagini la collega alla diagnostica delle prestazioni. Qui seguiamo una foto fino alla scelta reale del browser, senza confondere un punteggio con il risultato.
Prepara le varianti, osserva il browser
Abbiamo creato copie proporzionali in un editor esterno prima di comprimerle; Bitinz non le ha ridimensionate. Il 2026-10-29 ogni copia è stata elaborata localmente con Bilanciato. Dimensioni, byte e impronta identificano la variante usata nel browser.
La pagina locale offriva le varianti con srcset e una regola sizes coerente. Le osservazioni registrano larghezza della finestra, densità e risorsa selezionata. Misurano i dati dell’immagine, non una pagina completa o una rete mobile simulata. La politica editoriale descrive le prove.
I file preparati fra cui scegliere
Confronta qui i pesi delle varianti, poi consulta il registro del browser collegato nelle fonti. Può scegliere solo i file realmente offerti dalla pagina.
| Immagine | Pixel | Uscita | Livello | Prima | Dopo | Risparmio |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Bilanciato | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Bilanciato | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Bilanciato | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Bilanciato | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB equivale a 1000 byte.
Che cosa ha scaricato davvero il browser
| Finestra (CSS px) | Densità di pixel | Larghezza visibile (CSS px) | Larghezza scelta (px) | Dati dell’immagine |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Ogni riga ha usato un contesto nuovo del browser con cache disattivata. Il caso più largo ad alta densità ha scelto la variante maggiore perché le opzioni disponibili avevano un ampio salto in quel punto. Vale la pena provare una misura intermedia; il browser può scegliere solo i file presenti nella lista.
Osserva l’immagine scelta alla scala utile
Dettaglio della foto originale
Dettaglio della foto compressa
Esamina la foto su uno schermo piccolo e su uno ad alta densità. La variante minima non è la migliore se appare sfocata. Allo stesso modo, un buon rapporto di compressione non giustifica da solo una variante grande.
Il registro fotografa l’ambiente dichiarato. Cache e decisioni del browser possono influire sulle visite successive. Per ripetere l’osservazione, usa un contesto nuovo e ispeziona il file richiesto invece di dedurlo dalle dimensioni visibili.
Collega preparazione e distribuzione
Usa il compressore di immagini sulle copie preparate, poi lascia che sito o CMS offrano varianti appropriate. Se il codice generato manda ogni schermo a un solo file grande, la compressione non cambia quella scelta.
Mantieni sizes allineato al layout CSS. Il browser usa l’indizio insieme a varianti disponibili e densità dello schermo; il nome del file non rivela le tue intenzioni. Controlla la risorsa scelta dopo ogni modifica del layout.
Per un flusso ripetuto, l’API per sviluppatori può comprimere i file preparati durante la pubblicazione. Il ridimensionamento resta un passaggio preliminare separato. La guida alla qualità spiega come confrontare i dettagli prima di sostituire un’immagine.
Controlla uno spazio immagine nella pagina
- Misura lo spazio e decidi le larghezze proporzionali necessarie.
- Prepara e comprimi le copie mantenendo l’originale modificabile.
- Offri le varianti con una regola
sizescoerente con il layout. - Ispeziona risorsa selezionata e foto visibile su schermi diversi.
Domande frequenti
- Ridurre la larghezza visibile riduce anche il download?
- La larghezza CSS cambia il layout, non i byte di un singolo file. Offri varianti adatte e controlla quale sceglie il browser.
- Perché un telefono ad alta densità sceglie un’immagine più larga?
- Uno schermo ad alta densità può usare più pixel nello stesso spazio visibile. Contano sia le dimensioni delle varianti sia l’indicazione della pagina.
- L’esperimento misura la velocità della pagina?
- Registra compressione e selezione delle immagini. Il caricamento completo dipende anche dalle altre risorse, dalla rete e dal lavoro di rendering.