Ingranditore pixel art
Ingrandisci la pixel art senza sfocarla: scala intera, un blocco uniforme per pixel
Trascina qui gli sprite
oppure fai clic per scegliere file — fino a 20 alla volta
Ogni pixel sorgente viene copiato in un blocco quadrato uniforme. Non viene caricato nulla e non vengono mescolati pixel.
Scala
Solo numeri interi. Un fattore come 1,5× darebbe ad alcuni pixel un blocco 2×2 e ad altri uno 1×1, facendo sembrare sbagliato anche un risultato «al vicino più prossimo».
Disponibile quando un file risulta essere un ingrandimento intero di un originale più piccolo.
img.pixel-art,
canvas.pixel-art {
image-rendering: pixelated;
}Senza questo, il browser sfoca nuovamente lo sprite ogni volta che lo ridimensiona per visualizzarlo.
Prima di iniziare con Ingranditore pixel art
Ingrandisci pixel art e sprite con il ridimensionamento al vicino più prossimo a fattori interi, così i bordi restano netti anziché sfocati.
Ideale per
- Ingrandimento di sprite pixel art, tasselli, icone e piccole risorse di gioco
- Mantenere ogni pixel sorgente come blocco dai bordi netti
- Elaborazione in un lotto di fino a 20 output PNG con scala simile
Da sapere prima di iniziare
- Lo strumento replica i pixel esistenti; non inventa nuovi dettagli né ingrandisce le fotografie
- I fattori di scala sono interi da 2× a 32×
- L’output è PNG per conservare bordi netti e trasparenza
Continua il flusso di lavoro
Come usarlo
1. Trascina qui i tuoi sprite
Fino a venti file alla volta, decodificati dal browser e mai caricati. Ciascuno viene letto pixel per pixel e riceve una valutazione: un vero Sorgente 1× è pronto per essere ridimensionato; già N× significa che il file è un’esatta replica a blocchi di un originale più piccolo e il pannello propone di ripristinarlo prima; bordi morbidi significa che la palette è troppo grande per la pixel art e che i bordi sono già stati mescolati da un precedente ridimensionamento. Il controllo è una lettura dei pixel, non una garanzia: indica l’aspetto del file per permetterti di decidere e non dichiara mai di correggere ciò che non può.
2. Scegli un fattore intero
Scegli uno dei pulsanti oppure inserisci un numero intero da 2 a 32. La riga di ogni file mostra l’intero flusso prima di confermare — 32×32 → 8× → 256×256, oppure 256×256 → restore to 32×32 → 8× → 256×256 quando l’opzione di ripristino è attiva. Il ripristino preleva un pixel rappresentativo per ogni blocco rilevato, quello in alto a sinistra, poi applica il fattore a quell’immagine più piccola; è disponibile solo quando un file è stato effettivamente rilevato come ingrandimento intero. I browser limitano le dimensioni della tela, quindi un fattore che produrrebbe un risultato oltre circa 16.384 pixel per lato o 256 megapixel totali viene rifiutato, indicando il fattore massimo consentito anziché restituire senza avviso un’immagine vuota.
3. Controlla l’anteprima, poi scarica
Entrambi i pannelli prima/dopo vengono renderizzati con image-rendering: pixelated, quindi ciò che vedi è ciò che contiene il file, non una sua versione smussata dal browser. Scarica un singolo risultato oppure tutti i risultati in uno ZIP. L’output è sempre PNG: un formato con perdita reintrodurrebbe bordi morbidi e aloni in un’immagine il cui scopo è proprio mantenere bordi netti. Il frammento CSS nel pannello è l’altra metà del lavoro: copialo nel tuo foglio di stile affinché il browser non annulli il lavoro quando ridimensiona lo sprite per visualizzarlo.
Perché il fattore di scala deve essere un numero intero
Ridimensionare con il vicino più prossimo significa che ogni pixel di output copia semplicemente il colore del pixel sorgente più vicino: non si fanno medie, quindi non compaiono colori nuovi né bordi morbidi. Da solo non basta. Anche il fattore deve essere intero, e questo è ciò che molti strumenti sbagliano senza avvisare.
A 3×, ogni pixel sorgente diventa un quadrato identico di 3×3. La griglia rimane uniforme e ogni pixel originale riceve esattamente la stessa porzione dell’immagine finale. A 1.5×, la griglia di campionamento non si divide più uniformemente: due pixel sorgente devono condividere tre pixel di output, quindi uno diventa un blocco largo 2 e il vicino largo 1, con un’alternanza in tutta l’immagine. Non c’è comunque fusione: tecnicamente il risultato usa il vicino più prossimo, ma le dimensioni dei pixel sono visibilmente incoerenti. Le linee rette acquisiscono un andamento irregolare, le diagonali sviluppano scalini assenti nell’originale e un dithering a scacchiera diventa a strisce. Si percepisce come una vaga anomalia anziché una sfocatura evidente: per questo sfugge così spesso al controllo.
In pratica scegli a ritroso. Per uno sprite 48×48 a circa 150 pixel, esporta 3× (144) o 4× (192) e lascia a CSS o griglia la differenza, non chiedere esattamente 150. Per questo lo strumento usa un fattore: non può raggiungere onestamente obiettivi arbitrari nella pixel art e non li offre.
Domande
Può correggere uno sprite già sfocato?
No, e neppure altri strumenti possono farlo. Dopo che un ridimensionamento bilineare o bicubico ha mediato colori vicini in nuovi pixel intermedi, i confini netti originali sono persi: l’informazione su dove finiva un colore e iniziava l’altro è stata eliminata scrivendo quei pixel. La nitidezza aumenta il contrasto ai bordi ma non ripristina la griglia discreta dei colori, e un ingranditore IA inventa dettagli plausibili invece di recuperarli davvero. Lo strumento segnala questo caso come bordi morbidi così lo sai prima di perderci tempo. La soluzione è tornare all’originale non sfocato e ridimensionare quello.
Perché solo PNG?
PNG è senza perdita, quindi i pixel del file sono esattamente quelli calcolati. JPG è progettato per fotografie: elimina dettagli ad alta frequenza e un confine netto tra colori uniformi è l’informazione a frequenza più alta possibile, quindi produce aloni e contaminazione cromatica su ogni bordo, proprio gli artefatti che questo strumento evita. WebP con perdita ha lo stesso problema in forma più lieve. Offrirli significherebbe permettere di annullare il lavoro.
E hqx, xBRZ e scale2x?
Questi algoritmi osservano i pixel vicini a ciascun pixel e cercano di attenuare le scalettature su diagonali e curve senza introdurre sfocatura. Possono dare ottimi risultati su sprite dai contorni puliti e risultati nettamente peggiori su grafica con dithering o rumore, dove il riconoscimento dei motivi interpreta il dithering come bordi e smussa dettagli inseriti intenzionalmente dall’artista. Questo strumento non li implementa, perché il semplice vicino più prossimo con fattore intero è la scelta prevedibile e quella da preferire normalmente. Il nostro guida all’ingrandimento della pixel art spiega cosa fa realmente ciascuno e quando vale la pena utilizzarlo.
Perché l’immagine appare sfocata nel browser dopo il download?
Perché il browser l’ha ridimensionata di nuovo durante il rendering con la propria smussatura predefinita. Qualsiasi contenitore adattivo, zoom di pagina o schermo ad alta densità può attivarla, anche quando il file ha già le dimensioni di visualizzazione volute. Aggiungi image-rendering: pixelated al <img> o elemento canvas — il frammento nel pannello dello strumento è proprio questo — e il browser usa invece il campionamento al vicino più prossimo. In un motore di gioco la stessa impostazione si trova sulla texture: filtraggio Point o Nearest, impostato separatamente dalla scala di esportazione.
Funziona sulle foto?
Funziona, ma il vicino più prossimo è lo strumento sbagliato per una fotografia. Una foto è un campionamento di una scena continua, quindi le sfumature devono davvero essere uniformi e mescolare campioni vicini ricostruisce qualcosa di simile a un’acquisizione a risoluzione maggiore. Replicare ogni pixel in un quadrato netto produce invece blocchi visibili senza aggiungere dettagli. Usa un normale ridimensionamento per fotografie e conserva questo per grafica disegnata su una griglia di pixel.
Correlati
La spiegazione completa di ridimensionamento bilineare, filtri puntuali Unity/Godot e hqx/xBRZ è in come ingrandire la pixel art senza sfocarla. Se la tua grafica arriva come un foglio di fotogrammi anziché sprite singoli, ritagliala prima: Ritagliatore di fogli di sprite divide un foglio di sprite in PNG singoli con limiti corretti e il successivo ridimensionamento di ogni fotogramma mantiene tutti sulla stessa griglia.