New Dimensions
--
File Size
--
Scale
--
Ridimensiona le immagini a dimensioni precise con blocco del rapporto d'aspetto e preset comuni. Tutto il processo avviene nel tuo browser – nulla viene caricato su alcun server.
Immagini dimensionate correttamente sono fondamentali per la velocità della pagina e i Core Web Vitals. OneStepToRank monitora le tue classifiche, traccia i concorrenti e ottimizza automaticamente la tua strategia SEO locale.
IniziaOgni piattaforma ha requisiti specifici per le dimensioni delle immagini. Usare la dimensione sbagliata significa che i tuoi visual accuratamente progettati vengono ritagliati, allungati o sottocampionati in modi che compromettono il tuo brand. Facebook consiglia 1200x630 per le anteprime dei link e 1080x1080 per i post del feed. Instagram utilizza 1080x1080 per i post quadrati, 1080x1350 per i ritratti e 1080x608 per il paesaggio. Le immagini su Twitter/X si visualizzano al meglio a 1200x675 pixel. Ottenere queste dimensioni corrette non è opzionale – è la differenza tra una presenza professionale e una amatoriale.
Per i siti web, il principio chiave è fornire le immagini esattamente nella dimensione in cui verranno visualizzate. Un'immagine mostrata a 600 px di larghezza in CSS non dovrebbe essere un originale da 3000 px – il browser scarica comunque il file completo prima di ridimensionarlo, sprecando larghezza di banda e rallentando il caricamento della pagina. L'eccezione sono i display retina, dove dovresti fornire immagini a 2× la dimensione di visualizzazione CSS (quindi 1200 px per uno slot da 600 px) per mantenere la nitidezza su schermi ad alta densità.
Lo sviluppo web moderno richiede di fornire diverse dimensioni di immagine a dispositivi differenti. Un utente desktop con monitor da 1920 px di larghezza necessita di un'immagine diversa rispetto a un utente mobile con schermo da 375 px. L'attributo HTML srcset e l'attributo sizes ti permettono di definire più versioni dell'immagine affinché il browser scelga in base alla larghezza del viewport e al rapporto pixel del dispositivo. Ciò significa creare diverse versioni di ogni immagine – tipicamente a larghezze di 400 px, 800 px, 1200 px e 1600 px.
I display Retina (densità 2x e 3x) contengono due o tre volte più pixel fisici nella stessa area dello schermo. Senza immagini ottimizzate per Retina, le foto appaiono morbide e sfocate su iPhone, iPad, MacBook e sulla maggior parte dei dispositivi Android moderni. La soluzione è semplice: ridimensiona le tue immagini a 2× la dimensione di visualizzazione e lascia che il CSS le limiti. Uno slot immagine da 600x400 richiede un'immagine sorgente da 1200x800. Usa questo strumento per creare ogni variante di dimensione, poi comprimile con il nostro Compressore di Immagini per mantenere le dimensioni dei file gestibili.
L'immagine più veloce è la più piccola che mantenga comunque una buona qualità. Per le sezioni hero, punta a immagini compressi sotto i 200 KB. Per le immagini nel contenuto in linea, mantienile sotto i 100 KB. Le miniature dovrebbero essere sotto i 30 KB. Questi obiettivi presumono l'uso di formati moderni come WebP – se sei costretto a JPEG, le dimensioni saranno dal 25 % al 35 % più grandi per una qualità equivalente. Ridimensiona sempre le immagini alla loro dimensione di visualizzazione prima di comprimere. Una fotografia 4000x3000 compressa a 150 KB avrà un aspetto peggiore rispetto a una versione correttamente ridimensionata 1200x900 compressa alla stessa dimensione, perché la compressione deve lavorare molto di più per inserire più pixel nello stesso budget di dimensione del file.
Ridimensionare verso il basso preserva bene la qualità poiché si consolidano i pixel. Ridimensionare verso l'alto (ingrandire) riduce la qualità perché il browser deve interpolare nuovi pixel che non esistevano nell'originale, causando sfocatura. Per ottenere i migliori risultati, parti sempre dalla sorgente a massima risoluzione e ridimensiona verso il basso. Non ingrandire mai un'immagine piccola aspettandoti risultati nitidi.
Il rapporto d'aspetto è la relazione proporzionale tra larghezza e altezza. I rapporti comuni includono 16:9 (wide screen), 4:3 (standard) e 1:1 (quadrato). Bloccare il rapporto d'aspetto garantisce che modificando una dimensione l'altra si adatti automaticamente per mantenere le proporzioni, evitando stiramenti o schiacciamenti. Sbloccalo solo quando desideri intenzionalmente uno scaling non proporzionale.
Post su Facebook: 1200x630. Feed Instagram: 1080x1080 (quadrato) o 1080x1350 (ritratto). Twitter/X: 1200x675. LinkedIn: 1200x627. Pinterest: 1000x1500. Le foto profilo su tutte le piattaforme sono tipicamente 400x400 o più grandi. Usare le dimensioni corrette garantisce che le tue immagini vengano visualizzate senza ritagli inattesi o degradazione della qualità.
I display Retina e HiDPI hanno una densità di pixel 2‑3 volte superiore rispetto agli schermi standard. Un'immagine mostrata a 300x200 pixel CSS su un display Retina 2x utilizza in realtà 600x400 pixel fisici. Se la tua immagine è solo 300x200, appare sfocata su questi schermi. La soluzione è fornire immagini a 2× la dimensione di visualizzazione prevista e usare larghezza/altezza CSS per limitarle.