Come ingrandire la pixel art senza sfocarla

Perché un ridimensionamento normale sfoca la pixel art

Ogni ridimensionatore di immagini generico, da quello nel browser al visualizzatore di miniature del sistema operativo, dalle impostazioni predefinite di Photoshop all’ottimizzazione automatica della maggior parte dei framework web, usa una forma di interpolazione. La più comune è bilineare, e le varianti più costose (bicubica, Lanczos) perfezionano la stessa idea: per calcolare un nuovo pixel, osservare i pixel vicini nell’immagine originale e combinarli in base alla distanza.

È l’approccio corretto per una fotografia. Non ha davvero bordi netti a livello di pixel: una sfumatura sulla guancia o sfondo sfocato devono essere uniformi e mescolare campioni ricostruisce qualcosa di vicino a un’acquisizione più dettagliata. Il calcolo presume una scena continua campionata.

La pixel art non è una fotografia campionata. Ogni pixel è una decisione discreta e intenzionale: questo colore esatto, in questa cella esatta, con un confine netto. Un ridimensionatore bilineare inventa pixel sfumati tra colori che non dovevano mescolarsi, perché non sa che il confine è intenzionale. Il risultato è il familiare aspetto morbido e velato: contorni neri netti diventano aloni grigi e campi uniformi acquisiscono sfumature assenti nella sorgente.

Vicino più prossimo: la correzione di base

Vicino più prossimo ridimensionamento pone una domanda diversa. Per ogni pixel dell’immagine di uscita non mescola nulla: copia soltanto il colore del pixel sorgente più vicino. Ridimensionare uno sprite 16×16 a 64×64 con il vicino più prossimo significa che ogni pixel sorgente diventa un blocco pieno 4×4 di colore identico. Non vengono inventati nuovi colori e i bordi non si ammorbidiscono. È il requisito minimo perché la pixel art resti tale dopo il ridimensionamento.

Molti strumenti espongono questa scelta come opzione esplicita, non predefinita, perché il vicino più prossimo è inadatto alle fotografie e produce blocchi e seghettature. Devi attivarlo:

• Photoshop / GIMP: imposta il metodo di ricampionamento su «Nearest Neighbor» in Photoshop o «None» in GIMP prima di ridimensionare.
• ImageMagick: -filter point prima -resize.
• API Canvas (browser/JS): ctx.imageSmoothingEnabled = false prima di disegnare l’immagine ridimensionata.
• Python / Pillow: Image.resize(size, Image.NEAREST).

Perché il fattore di scala deve essere intero

Il solo vicino più prossimo non basta. Il secondo requisito è che il fattore di scala sia intero, 2x, 3x, 4x, non 1.5x né una larghezza arbitraria tra multipli corretti.

A una scala intera, ogni pixel sorgente corrisponde a un blocco di pixel di output delle stesse dimensioni: 3x significa che ogni pixel diventa un quadrato pulito di 3×3. La griglia rimane uniforme e ogni pixel originale riceve una rappresentazione uguale e coerente.

A una scala non intera come 1.5x, alcuni pixel sorgente vengono rappresentati da blocchi di 2×2 pixel di output e altri da 1×1 o da blocchi asimmetrici di 2×1, perché la griglia di campionamento non si divide uniformemente. L’immagine usa ancora tecnicamente il “vicino più prossimo”, quindi i colori non si mescolano, ma le dimensioni dei pixel diventano visibilmente incoerenti: alcuni blocchi sembrano più massicci e le linee diagonali rette dell’originale acquisiscono un andamento irregolare prima assente. Appare come una sottile anomalia difficile da individuare, anziché un ingrandimento pulito.

In pratica scegli le dimensioni partendo a ritroso da un multiplo intero della sorgente, non da una destinazione fissa. Se la sorgente è 48×48 e deve apparire a circa 150px, usa 3x (144px) o 4x (192px) e lascia al CSS o alla disposizione la differenza, anziché chiedere esattamente 150px.

Mantenere la nitidezza nel CSS

Ridimensionare il file è solo metà del problema sul web. Anche un PNG con vicino più prossimo verrà sfocato di nuovo se il browser lo ridimensiona durante il rendering con la smussatura predefinita. La soluzione è una proprietà CSS applicata all’elemento visualizzato <img> o elemento canvas:

image-rendering: pixelated;

Questo indica al browser di usare il campionamento al vicino più prossimo ogni volta che deve ridimensionare l’immagine per visualizzarla, inclusi casi che non controlli direttamente, come lo zoom della pagina da parte dell’utente o un’immagine in un contenitore adattivo che cambia dimensione con la finestra. È supportato da tutti i principali browser attuali. Un’alternativa più vecchia e meno uniformemente supportata è image-rendering: crisp-edges;, che alcuni browser trattano allo stesso modo e altri come un algoritmo di nitidezza leggermente diverso; per la pixel art in particolare, pixelated è la scelta più prevedibile.

Filtraggio puntuale nei motori di gioco

I motori di gioco hanno lo stesso problema a un livello inferiore, perché gli sprite vengono ridimensionati dallo zoom della fotocamera, dalla risoluzione dello schermo e dalle impostazioni pixel per unità durante l’esecuzione, non solo all’esportazione. Ogni motore espone un’impostazione di filtro della texture e la scelta sicura per pixel art viene sempre chiamata con una variante di “point” o “nearest”:

• Unity: Filter Mode impostato su Point (no filter) nelle impostazioni di importazione della texture, trattate in dettaglio nella nostra Guida all’importazione degli sprite in Unity.
• Godot: la proprietà del filtro della texture impostata su Nearest, per ogni texture oppure come valore predefinito dell’intero progetto per progetti di pixel art 2D.
• Unreal: Texture Group o Filter impostato su Nearest Neighbor nelle texture sprite.

Lasciare attivo il filtro bilineare/lineare predefinito è la causa più comune di un gioco pixel art sfocato nel motore anche con sorgenti nitide.

Algoritmi dedicati di ridimensionamento pixel art

Il vicino più prossimo è fedele ma a blocchi: con grandi ingrandimenti, diagonali e curve originali mostrano scalini visibili, perché l’algoritmo non conosce linee ma solo singoli pixel. Una famiglia di algoritmi dedicati alla pixel art tenta di smussare quegli scalini senza sfocatura, ragionando sulle configurazioni locali dei pixel invece di considerarli isolatamente.

• Scale2x / Scale3x (chiamati anche AdvMAME2x/3x): il più semplice della famiglia. Esamina i quattro vicini diretti di ogni pixel e, quando rileva un motivo di bordo diagonale, divide il pixel ingrandito affinché il bordo sembri inclinato anziché a gradini. Rapido e una scelta predefinita ragionevole per sprite semplici dai contorni puliti.
• EPX / hqx (hq2x, hq3x, hq4x): estende la stessa idea con un insieme più ampio di motivi dei pixel vicini e più forme di uscita possibili per motivo, producendo risultati più arrotondati e curvilinei. Funziona bene sui contorni degli sprite disegnati a mano e meno bene sulla pixel art con dithering o rumore, dove il riconoscimento dei motivi individua falsi bordi.
• xBRZ: un discendente più recente e generalmente di qualità superiore della stessa famiglia, ottimizzato per produrre diagonali e curve più fluide con meno artefatti sugli sprite dettagliati. È l’algoritmo alla base dei filtri di ingrandimento presenti in molte interfacce di emulatori.

Tutti e tre condividono lo stesso limite: deducono i bordi dalle configurazioni locali dei pixel, quindi funzionano meglio su grafica con contorni puliti e intenzionali e faticano con dithering stilizzato, rumore o sfumature realizzate con pixel alternati. Sono tecniche comuni nella pixel art più vecchia, che questi algoritmi possono scambiare per bordi da smussare. Per la maggior parte degli sprite, un semplice ridimensionamento intero con vicino più prossimo è la scelta più sicura e prevedibile; usa hqx o xBRZ solo quando l’effetto a scalini sulle curve ti disturba visibilmente e hai controllato il risultato nelle aree con dithering.

Perché gli ingranditori IA sono di solito lo strumento sbagliato

Gli ingranditori IA generici, addestrati ad aggiungere dettagli fotografici a foto sfocate, risolvono il problema opposto a quello della pixel art. Sono addestrati a inventare dettagli fini plausibili, come texture della pelle, trama dei tessuti e fogliame, da un input a bassa risoluzione, supponendo che abbia perso dettagli nella riduzione o compressione e che il compito del modello sia ricostruirli per ipotesi.

La pixel art non ha perso dettagli. Ogni pixel è già esattamente ciò che l’artista voleva alla risoluzione voluta. Usare un modello progettato per inventare texture mancanti produce il risultato prevedibile: bordi smussati, sfumature inventate e piccoli dettagli stilistici, come un singolo pixel di luce o un cambio netto intenzionale, eliminati o sostituiti da qualcosa di vagamente pittorico e diverso dall’originale. Alcuni ingranditori offrono ora modalità “pixel art” o “anime” più vicine a vicino più prossimo vincolato con ripulitura, da provare caso per caso; la modalità generica per foto quasi certamente sfoca invece di conservare.

Se lo sprite proviene inizialmente da un generatore IA, anziché essere disegnato come vera pixel art, probabilmente non è affatto su una griglia pulita e nessun metodo di ridimensionamento lo correggerà; consulta la nostra guida ai prompt IA per sprite per ottenere innanzitutto un originale più pulito.

Una lista di controllo pratica

1. Conferma che la sorgente sia davvero pixel art su una griglia coerente, non un’esportazione raster con bordi morbidi.
2. Scegli un fattore intero (2x, 3x, 4x) in base alle dimensioni di destinazione, non il contrario.
3. Ridimensiona con campionamento vicino più prossimo/puntuale, non la modalità bilineare o bicubica predefinita.
4. Applica image-rendering: pixelated a qualsiasi elemento web che potrebbe ridimensionare nuovamente l’immagine.
5. Imposta il filtro della texture su Point/Nearest nel motore, separatamente dalla scala di esportazione.
6. Usa hqx/xBRZ solo se gli scalini del vicino più prossimo ti disturbano visibilmente e controlla prima le aree con dithering.

Se preferisci non configurare nulla a mano, il nostro Ingranditore pixel art esegue per te i primi tre passaggi: scegli un fattore intero tra 2x e 32x e replica ogni pixel sorgente con il campionamento al vicino più prossimo, così nulla viene mescolato, poi esporta PNG.

Domande frequenti