Calcolatore Dimensione Immagine Responsive
Calcolatore Dimensione Immagine Responsive
Inserisci la larghezza massima a cui la tua immagine verrà visualizzata in pixel CSS (la sua dimensione di layout, non la dimensione del file). Questo calcola le larghezze effettive in pixel che devi esportare per ogni densità di pixel dello schermo comune.
- Formula: Larghezza Sorgente = Larghezza di Visualizzazione × Rapporto Pixel del Dispositivo, calcolata per i quattro rapporti più comuni: 1x, 1.5x, 2x e 3x.
- Perché più dimensioni contano: uno schermo ad alta densità ("retina") comprime più pixel fisici nello stesso spazio, quindi un'immagine 1x appare sfocata.
- 1x, 2x e 3x sono i più importanti: la maggior parte dei dispositivi rientra in queste tre categorie di densità; 1.5x è una categoria più piccola ma comunque rilevante per alcuni dispositivi Android.
Ho bisogno di tutte e quattro le dimensioni per ogni immagine?
Non necessariamente — 1x, 2x e 3x coprono la stragrande maggioranza dei dispositivi; aggiungere 1.5x è un'ottimizzazione minore che alcuni siti saltano.
Come uso queste larghezze in HTML?
Elencale nell'attributo srcset di un tag img insieme a un attributo sizes che descrive il tuo layout, e il browser scaricherà automaticamente quella più adatta.
Calcolatore Dimensione Immagine Responsive
Inserisci la larghezza massima a cui la tua immagine verrà visualizzata in pixel CSS (la sua dimensione di layout, non la dimensione del file). Questo calcola le larghezze effettive in pixel che devi esportare per ogni densità di pixel dello schermo comune.
- Formula: Larghezza Sorgente = Larghezza di Visualizzazione × Rapporto Pixel del Dispositivo, calcolata per i quattro rapporti più comuni: 1x, 1.5x, 2x e 3x.
- Perché più dimensioni contano: uno schermo ad alta densità ("retina") comprime più pixel fisici nello stesso spazio, quindi un'immagine 1x appare sfocata.
- 1x, 2x e 3x sono i più importanti: la maggior parte dei dispositivi rientra in queste tre categorie di densità; 1.5x è una categoria più piccola ma comunque rilevante per alcuni dispositivi Android.
Ho bisogno di tutte e quattro le dimensioni per ogni immagine?
Non necessariamente — 1x, 2x e 3x coprono la stragrande maggioranza dei dispositivi; aggiungere 1.5x è un'ottimizzazione minore che alcuni siti saltano.
Come uso queste larghezze in HTML?
Elencale nell'attributo srcset di un tag img insieme a un attributo sizes che descrive il tuo layout, e il browser scaricherà automaticamente quella più adatta.