Skip to content

Guide

Come ridimensionare le immagini senza perdita di qualità

Il ridimensionamento verso il basso è in gran parte sicuro. Quello verso l’alto non lo è. Tutto il resto è scelta di interpolazione e selezione del formato.

By Published

“Senza perdita di qualità” è asimmetrico. Il ridimensionamento verso il basso — rendere un’immagine più piccola — perde informazioni per definizione (hai meno pixel della sorgente), ma la perdita è di solito invisibile se usi un buon algoritmo. Il ridimensionamento verso l’alto — renderla più grande — inventa dettagli che non c’erano, e il risultato appare sempre più morbido di una sorgente a risoluzione nativa. Questa guida spiega quali flussi di lavoro preservano la qualità visibile e quali no.

Ridimensionamento verso il basso: in gran parte sicuro

Se la sorgente è di 3000×2000 pixel e hai bisogno di 600×400 per il web, stai scartando il 96% dei pixel. Finché l’algoritmo di ridimensionamento verso il basso calcola la media dei pixel scartati in quelli mantenuti (invece di campionare solo ogni Nesimo pixel), il risultato appare corretto.

I browser moderni, Photoshop e gli strumenti dedicati usano l’interpolazione bilineare o bicubicaper impostazione predefinita. Per ridimensionamenti aggressivi (> 4× riduzione), concatenano più passaggi per evitare l’aliasing.

Quando il ridimensionamento verso il basso va storto: il campionamento nearest-neighbour (che conserva la pixel-art ma produce fotografie frastagliate) o il ridimensionamento verso il basso con un singolo passaggio a rapporti estremi (che causa pattern di moiré). Quasi nessuno strumento consumer usa il nearest-neighbour per impostazione predefinita; dovresti richiederlo esplicitamente.

Ridimensionamento verso l’alto: perde sempre

Un’immagine di 100×100 pixel ha 10.000 informazioni. Il ridimensionamento verso l’alto a 400×400 produce 160.000 pixel — 150.000 dei quali l’algoritmo ha inventato interpolando tra i vicini. Il risultato è matematicamente un’ipotesi.

Tre tipi di upscale:

  • Bilineare / bicubico. Interpolazione standard. Risultati morbidi, leggermente sfocati. Il default quando cambi la dimensione di <img> in CSS.
  • Lanczos. Più nitido del bicubico, preserva meglio i bordi. Alcuni strumenti lo usano per impostazione predefinita per upscale 2×.
  • Upscaling AI.Topaz Gigapixel, Super Resolution di Adobe, strumenti basati su ESRGAN. Addestrati su milioni di esempi ad alta risoluzione; allucinano dettagli plausibili. I risultati sembrano migliori dell’interpolazione ma non sono effettivamente accurati — il “dettaglio” è inventato.

Regola pratica: non ridimensionare mai verso l’alto un asset finale. Trova una sorgente a più alta risoluzione. Se la sorgente genuinamente non esiste (una vecchia fotografia, un logo minuscolo), l’upscaling AI è la migliore delle opzioni scadenti.

Il formato influisce sulla qualità visibile

Anche con un ridimensionamento perfetto, il formato in cui salvi determina cosa sopravvive. Vedi la nostra guida PNG vs JPG vs WebP per la panoramica completa; la versione breve:

  • PNG — lossless. Il ridimensionamento e il salvataggio come PNG preserva esattamente l’immagine ridimensionata. Usa per loghi, illustrazioni, screenshot con testo nitido.
  • JPEG @ 90% — visivamente indistinguibile da PNG per le fotografie alle dimensioni di visualizzazione tipiche. I cali di qualità non riguardano il ridimensionamento, riguardano la codifica JPEG.
  • WebP @ 80% — dal 25 al 35% più piccolo di JPEG a qualità equivalente. Il default web per le fotografie dal 2020.
  • GIF — limitato a 256 colori; le GIF ridimensionate delle fotografie sembrano posterizzate. Converti in PNG o WebP.

Il flusso di lavoro di protezione della sorgente

Una volta che ridimensioni e salvi, non puoi recuperare il dettaglio originale. Quindi:

  1. Archivia la sorgente. PNG o RAW a risoluzione originale. Taggalo/mettilo in una cartella in modo che tu possa trovarlo in futuro.
  2. Genera derivati. Dimensioni web dalla sorgente, non da una copia precedentemente ridimensionata. Ogni ciclo di ridimensionamento e salvataggio accumula artefatti di compressione; ripartire dalla sorgente lo evita.
  3. Genera le dimensioni di cui hai effettivamente bisogno. Comuni: @1× per i display tradizionali, @2× per Retina, @3× per i telefoni di fascia alta. Servile tramite <img srcset> o <picture>.
  4. Non ri-modificare un JPEG. Ogni salvataggio elimina più informazioni. Se hai bisogno di correggere il colore dopo il fatto, fallo sulla sorgente, poi ri-esporta.

Ridimensionamento lato browser vs lato desktop

I browser moderni eseguono il ridimensionamento di alta qualità in Canvas2D — ciò che usa il nostro strumento di ridimensionamento immagini. I risultati sono visivamente identici al bilineare/bicubico di Photoshop nella maggior parte dei casi. Per ridimensionamenti aggressivi verso il basso (> 8× riduzione), “Dimensione immagine” di Photoshop con bicubico-più-nitido ha ancora un leggero vantaggio nel preservare i dettagli fini.

Per l’elaborazione batch o esigenze di interpolazione insolite, gli strumenti desktop (ImageMagick, GraphicsMagick, oxipng) offrono un controllo più preciso rispetto agli strumenti browser. La maggior parte dei flussi di lavoro non ha bisogno di questo controllo; il browser è sufficiente.

Errori comuni

  • Ridimensionamento in CSS invece che nel codice. Un’immagine di 4000×3000 servita a width=400in CSS è ancora di 4000×3000 byte in rete. Il browser può ridimensionare, ma la rete ha già pagato. Ridimensiona al momento dell’esportazione, non al momento della visualizzazione.
  • Dimenticare il Retina.Un’immagine 200×200 su un display @2× appare sfocata. Esporta a 400×400, visualizza come 200×200 pixel CSS.
  • Ritagliare ridimensionando verso l’alto.Se ritaglia nel 25% di un’immagine, hai un’immagine a un quarto della risoluzione. Il ridimensionamento verso l’alto alla dimensione originale ingrandisce solo gli artefatti. Ritaglia prima, poi accetta la risoluzione inferiore come nuovo soffitto.

Per lo strumento live, vedi il nostro ridimensionatore di immagini solo browser e il complementare compressore di immagini. Entrambi funzionano interamente nel tuo browser — i file non lasciano la pagina.

Esempio pratico: un’immagine hero per un laptop Retina

Slot target nel design: 1200 × 600 pixel CSS. Sorgente: una foto DSLR da 24 megapixel, 6000 × 4000 pixel, JPEG sRGB.

  • Scegli le dimensioni di output. Per Retina @2×, esporta 2400 × 1200 pixel del dispositivo. Per telefoni con DPR @3×, esporta 3600 × 1800. Usa <picture> con srcset per servire quello giusto.
  • Ritaglia, poi ricampiona. Ritaglia il 6000 × 4000 in una regione 2:1 (es. 6000 × 3000), poi ricampiona verso il basso a 2400 × 1200 usando Lanczos3 in ImageMagick: magick input.jpg -filter Lanczos -resize 2400x1200^ -gravity center -extent 2400x1200 [email protected].
  • Codifica WebP a qualità 80. cwebp -q 80 [email protected] -o [email protected]. Dimensione del file prevista: ~85-130 KB a questa risoluzione. JPEG equivalente q=85 sarebbe ~180-220 KB.
  • Aggiungi una variante AVIF per i browser che la supportano. avifenc --speed 6 -q 60 [email protected] [email protected] → un altro 25-40% più piccolo di WebP.
  • Payload totale:~95 KB AVIF per i browser moderni, ~110 KB WebP fallback, ~200 KB JPEG legacy fallback. Rispetto a servire l’originale DSLR non ridimensionato da 6 MB: 60× più piccolo.

Frequently asked questions

Posso ridimensionare un&rsquo;immagine senza perdere qualità?
Il ridimensionamento verso il basso (rendere un&rsquo;immagine più piccola) è in gran parte senza perdita se si usa un filtro di ricampionamento di alta qualità come Lanczos o Mitchell-Netravali, perché si stanno mediando i pixel esistenti. Il ridimensionamento verso l&rsquo;alto perde sempre qualità perché devono essere inventati nuovi dati sui pixel; gli strumenti di upscaling AI (Gigapixel, waifu2x) possono sintetizzare dettagli plausibili ma non possono comunque recuperare informazioni che non erano mai state lì.
Qual è il miglior algoritmo di ricampionamento per ridimensionare le foto?
Lanczos (basato su sinc) e Mitchell-Netravali producono i risultati più nitidi per il ridimensionamento verso il basso fotografico con un aliasing minimo. Il bicubico è un buon default nella maggior parte delle applicazioni. Il bilineare è più veloce ma più sfocato. Non usare mai il nearest-neighbour per le fotografie — produce l&rsquo;aspetto &ldquo;pixelato&rdquo; tipico delle immagini ridimensionate incorrettamente.
A quale risoluzione devo ridimensionare le immagini per il web?
Per i display standard, la colonna di contenuto più ampia è tipicamente 800–1200 px. Per gli schermi HiDPI (Retina) con densità di pixel 2×, fornire una versione 2× (1600–2400 px) tramite l&rsquo;attributo srcset. La maggior parte delle immagini web moderne dovrebbe essere esportata come WebP, che è del 25–35% più piccola di JPEG alla stessa qualità visiva.
Come ridimensiono le immagini in batch su Windows o macOS?
Su macOS, Strumenti > Regola dimensioni di Anteprima elabora più immagini quando sono aperti più file, oppure puoi usare Automator. Su Windows, PowerToys Image Resizer fornisce il ridimensionamento batch tramite clic destro. Per gli script, il comando mogrify di ImageMagick ridimensiona centinaia di file con un singolo comando da terminale.
Il ridimensionamento di un&rsquo;immagine ne cambia la dimensione del file?
Sì. Dimezzare entrambe le dimensioni riduce il numero di pixel del 75%, riducendo tipicamente le dimensioni del file JPEG del 60–80% a seconda del contenuto e delle impostazioni di compressione. La dimensione del file dipende anche dal formato di output e dall&rsquo;impostazione della qualità, non solo dalle dimensioni dei pixel.
Qual è la differenza tra ricampionamento e ricompressione di un&rsquo;immagine?
Il ricampionamento cambia le dimensioni dei pixel (aggiungendo o rimuovendo pixel). La ricompressione ricodifica un file esistente a un diverso livello di qualità senza cambiare le dimensioni. Ogni ricompressione lossy di un JPEG degrada la qualità, anche alla stessa impostazione di qualità — lavora sempre dall&rsquo;originale a più alta risoluzione quando si ridimensiona.

Related

Published May 16, 2026