Controllo Rapporto d'Aspetto Immagine
Analizza frazioni esatte di aspect ratio, proporzioni decimali, compatibilità con i social network e codice CSS aspect-ratio direttamente nel tuo browser.
Trascina la tua immagine qui o clicca per sfogliare
Scopri frazioni semplificate, verifica l'adattamento sui social, ridimensiona le proporzioni e genera codice CSS senza caricare file su server
Supporta JPG, PNG, WebP, SVG, GIF, AVIF, BMP, ICO e TIFF • Incolla con Ctrl+V
Cos'è il rapporto d'aspetto di un'immagine e perché è fondamentale?
Il rapporto d'aspetto (aspect ratio) di un'immagine descrive la proporzione tra la sua larghezza e la sua altezza, espressa da due numeri separati da due punti (come 16:9, 4:3 o 1:1). A differenza delle dimensioni in pixel che quantificano la risoluzione complessiva (es. 1920 × 1080 pixel), il rapporto d'aspetto definisce la forma geometrica dell'immagine, indipendentemente dalle dimensioni con cui viene visualizzata sullo schermo.
Comprendere le proporzioni è indispensabile per grafici, fotografi e sviluppatori web. Caricare un'immagine con il formato errato causa ritagli automatici sgradevoli, distorsioni o bande nere laterali. Lo strumento di ImgFeel calcola le proporzioni e genera codice CSS istantaneamente senza caricare file su server remoti.
Rapporto e Decimali Istantanei
Calcola frazioni semplificate (16:9, 4:3, 1:1) e moltiplicatori decimali precisi.
Verifica Compatibilità Social
Controlla l'adattamento su Instagram, YouTube, TikTok, Facebook, X e LinkedIn.
Codice CSS Pronto all'Uso
Genera proprietà CSS aspect-ratio e tag HTML per immagini reattive.
100% Privato nel Browser
Tutte le elaborazioni avvengono localmente in JavaScript senza invio di dati.
Come si calcola il rapporto d'aspetto (Il metodo matematico)
Per calcolare matematicamente il rapporto d'aspetto, si trova il Massimo Comune Divisore (MCD) tra larghezza e altezza in pixel, dividendo poi entrambi i numeri per questo valore. Ad esempio, per un'immagine da 3840 × 2160 pixel, il MCD è 240. Dividendo 3840 per 240 si ottiene 16, e dividendo 2160 per 240 si ottiene 9, ricavando la proporzione 16:9.
In alternativa, dividere la larghezza per l'altezza fornisce il valore decimale (3840 ÷ 2160 = 1.778). Le formule seguenti illustrano entrambi i metodi:
Simplified Aspect Ratio = (Width ÷ GCD(Width, Height)) : (Height ÷ GCD(Width, Height)) Decimal Aspect Ratio = Width ÷ Height : 1 CSS Padding-Top Hack % = (Height ÷ Width) × 100% Example: For a 1920 × 1080 Full HD image, GCD is 120. (1920 ÷ 120) : (1080 ÷ 120) = 16:9 (1.78:1 decimal, 56.25% CSS height). Rapporto d'Aspetto vs. Risoluzione Immagine: Qual è la Differenza?
È comune confondere il rapporto d'aspetto con la risoluzione dell'immagine. La risoluzione indica il volume totale di pixel (larghezza in pixel × altezza in pixel, o Megapixel). Il rapporto d'aspetto riguarda unicamente la geometria proporzionale.
Ad esempio, immagini da 1280 × 720 (0.92 MP), 1920 × 1080 (2.07 MP) e 3840 × 2160 (8.29 MP) presentano risoluzioni e dimensioni di file notevolmente diverse, ma condividono esattamente lo stesso rapporto d'aspetto 16:9. La tabella seguente riassume tali differenze:
| Concept | What It Measures | Standard Units | Example Values |
|---|---|---|---|
| Aspect Ratio | Proportional relationship between width & height | Ratio string (W:H) or decimal | 16:9, 4:3, 1:1, 9:16, 1.78:1 |
| Image Resolution | Total number of pixels in the digital image grid | Pixels (W × H) and Megapixels | 1920 × 1080 px (2.07 MP), 3840 × 2160 px (8.29 MP) |
| Print Density (DPI) | Physical ink dots per linear inch on printed media | Dots Per Inch (DPI) | 300 DPI (Fine photo), 150 DPI (Flyer) |
| Display Density (PPI) | Physical hardware pixel density of a screen panel | Pixels Per Inch (PPI) | 460 PPI (iPhone Super Retina), 163 PPI (4K Monitor) |
Guida ai Rapporti d'Aspetto Standard Più Diffusi
I diversi display, fotocamere e social network adottano formati standard per garantire una visualizzazione ottimale dei contenuti:
| Ratio | Decimal | Standard Name | Primary Application | Common Resolutions |
|---|---|---|---|---|
| 16:9 | 1.78:1 | Widescreen (HD/4K) | YouTube videos, TVs, PC monitors, PowerPoint | 1920×1080, 2560×1440, 3840×2160 |
| 9:16 | 0.56:1 | Vertical Story / Reel | TikTok, Instagram Reels, YouTube Shorts, Snapchat | 1080×1920, 720×1280 |
| 1:1 | 1.00:1 | Square | Instagram feed, profile photos, product thumbnails | 1080×1080, 1200×1200, 500×500 |
| 4:5 | 0.80:1 | Social Portrait | Instagram feed portrait (maximum screen real estate) | 1080×1350 |
| 4:3 | 1.33:1 | Classic Standard | iPad displays, Micro Four Thirds cameras, CRT TV | 1024×768, 2048×1536 |
| 3:2 | 1.50:1 | Classic 35mm DSLR | Full-frame cameras, 4×6 photo prints, Surface laptops | 6000×4000, 3000×2000 |
| 21:9 | 2.33:1 | Ultrawide Cinema | Anamorphic cinema movies, curved ultrawide monitors | 2560×1080, 3440×1440, 5120×2160 |
| 1.91:1 | 1.91:1 | Social Landscape | Facebook feed link previews, Twitter / X summary cards | 1200×628, 1200×630 |
Guida ai Formati per i Social Network (Instagram, YouTube, TikTok e altri)
Ogni social network ottimizza i propri feed per formati precisi. Instagram predilige l'1:1 per i post quadrati, il 4:5 per i ritratti verticali e il 9:16 per Stories e Reels. YouTube utilizza il 16:9 per video orizzontali e miniature, e il 9:16 per gli Shorts. TikTok richiede il formato verticale 9:16 a schermo intero. L'uso del formato appropriato previene tagli indesiderati da parte degli algoritmi.
Sviluppo Web Moderno: Proprietà CSS aspect-ratio e Prevenzione del CLS
Nel web design moderno, la proprietà CSS `aspect-ratio` consente ai browser di riservare l'area di spazio esatta per le immagini prima ancora che il download del file sia completato. Ciò elimina gli scatti visivi nella pagina (Cumulative Layout Shift o CLS), migliorando i Core Web Vitals di Google.
In passato si utilizzava il trucco del padding-top in percentuale (`padding-top: 56.25%` per il 16:9). Oggi è sufficiente inserire `aspect-ratio: 16 / 9;` direttamente sul contenitore o sull'elemento `<img>`.
Ritaglio vs. Ridimensionamento vs. Barre Nere (Letterboxing)
Quando si adatta un'immagine a un formato diverso vi sono tre opzioni: (1) Il ritaglio elimina pixel dai bordi per far coincidere la proporzione senza perdere nitidezza; (2) Il ridimensionamento forzato senza bloccare le proporzioni deforma e schiaccia il soggetto; (3) Il letterboxing aggiunge bande laterali neutre senza modificare l'inquadratura originale.
Come Verificare il Rapporto d'Aspetto su Windows, Mac, iOS e Android
Per controllare le dimensioni e calcolare il rapporto d'aspetto direttamente sul tuo dispositivo senza software aggiuntivo:
Windows
Right-click image > Properties > Details. Check Dimensions (e.g. 1920 × 1080) and divide Width by Height.
macOS
Select image and press Cmd + I or open in Preview and press Cmd + I to inspect pixel dimensions.
iPhone / iOS
Open image in Photos app and tap the (i) Info button to inspect resolution and proportions.
Android
Open image in Google Photos or Gallery, swipe up to view technical details, dimensions, and Megapixels.
Domande Frequenti (FAQ)
Come posso verificare gratuitamente il rapporto d'aspetto di un'immagine online?
Trascina l'immagine nel riquadro ImgFeel in alto o seleziona un file. Puoi anche incollare direttamente con Ctrl+V. Lo strumento calcola subito la frazione (16:9, 4:3, 1:1), il valore decimale, la compatibilità social e il codice CSS.
Qual è il formato di proporzione più comune per foto e video?
Il 16:9 è lo standard universale per video panoramici, televisori e monitor per computer. Per gli smartphone e i feed social, il 9:16 e il 4:5 sono i più diffusi. Nella fotografia reflex, il 3:2 è il formato classico tradizionale.
Modificare il rapporto d'aspetto riduce la qualità dell'immagine?
Ritagliare un'immagine per modificarne la proporzione rimuove pixel esterni riducendo il conteggio complessivo, ma i pixel restanti rimangono perfettamente nitidi. Tirare l'immagine senza bloccare le proporzioni ne distorcerà la forma.
Come si calcola il rapporto d'aspetto da larghezza e altezza in pixel?
Dividi larghezza e altezza per il loro massimo comune divisore (MCD). Ad esempio, con 1920 × 1080, dividendo entrambi per 120 si ottiene 16:9. Puoi anche dividere la larghezza per l'altezza (1920 ÷ 1080 = 1.78) per ottenere il valore decimale.
Qual è la proporzione migliore per i post di Instagram?
Per i post verticali del feed, il 4:5 (1080 × 1350 px) offre la massima visibilità sullo schermo. I post quadrati usano l'1:1 (1080 × 1080 px) e le Stories/Reels usano il 9:16 (1080 × 1920 px).
Cos'è la proprietà CSS aspect-ratio?
È una proprietà CSS moderna che definisce il rapporto d'aspetto preferito per un elemento (es. `aspect-ratio: 16 / 9;`), evitando salti di layout durante il caricamento delle immagini.
Le mie immagini vengono caricate su server durante l'analisi?
No. Tutte le analisi delle proporzioni e delle dimensioni avvengono al 100% in locale nel tuo browser web tramite JavaScript. I tuoi file non lasciano mai il tuo dispositivo.