ピクセルアート拡大
ピクセルアートをぼかさず拡大 — 整数倍率で、1ピクセルが1つの単色ブロックに
ここにスプライトをドロップ
またはクリックしてファイルを選択。最大 20 ずつ
元の各ピクセルを、単色の正方形ブロックへコピーします。アップロードも色の混合も行いません。
倍率
整数のみです。1.5×のような倍率では、ピクセルによって2×2ブロックと1×1ブロックができるため、「最近傍」でも不自然に見えます。
ファイルが、より小さいオリジナルを整数倍率で拡大したものと判明した場合に利用できます。
img.pixel-art,
canvas.pixel-art {
image-rendering: pixelated;
}これがなければ、ブラウザーは表示のためにリサイズするたびスプライトをぼかします。
次を使い始める前に ピクセルアート拡大
整数倍率の最近傍でピクセルアートやスプライトを拡大し、縁をぼかさず硬く保ちます。
最適な用途
- ピクセルアートのスプライト、タイル、アイコン、小さなゲーム素材の拡大
- 元のすべてのピクセルを、くっきりしたブロックとして保持
- 同程度の倍率のPNG出力を、1回最大20個処理
開始前に知っておくこと
- 既存ピクセルを複製するツールであり、新しい細部の生成や写真の高解像度化は行いません
- 倍率は2×〜32×の整数です
- 出力はPNGなので、鮮明な縁と透明度を維持します
使い方
1. スプライトをドロップ
一度に最大20ファイルをブラウザーでデコードし、アップロードはしません。各画像をピクセルごとに読み戻して判定します。本当の 1×の原画像 拡大の準備ができています； すでにN× 小さい原本の正確なブロック複製であることを意味し、パネルでは先に復元することを提案します； 柔らかい縁 ピクセルアートにはパレットが大きすぎ、以前のリサイズで境界がすでに混ざっていることを意味します。確認は保証ではなくピクセルの読み取りです。ファイルの状態を示して判断に役立て、できない修復を主張しません。
2. 整数の倍率を選択
いずれかの選択ボタンを押すか、2〜32の整数を入力してください。各ファイルの行には、実行前に処理全体が表示されます — 32×32 → 8× → 256×256、または 256×256 → restore to 32×32 → 8× → 256×256 復元をオンにした場合です。復元では検出ブロックごとに左上の代表ピクセル1つを取り、小さい画像へ指定倍率を適用します。整数拡大と実際に検出された場合だけ使えます。キャンバスには上限があり、各辺約16,384ピクセルまたは合計2億5600万ピクセルを超える倍率は拒否し、使える最大倍率を示します。警告なく空白画像を渡すことはありません。
3. プレビューを確認してダウンロード
変更前と変更後のパネルは、どちらも次を使って描画されます： image-rendering: pixelated、そのため、表示されるのはブラウザーによる平滑化ではなく、ファイルの内容そのものです。結果を1つずつダウンロードするか、すべての結果をZIPでまとめて取得できます。出力は常にPNGです。非可逆形式では、輪郭がくっきりしていることが重要な画像に、ぼやけやリンギングが再び加わってしまいます。パネル内のCSSコードも作業のもう半分にあたります。スタイルシートにコピーして、ブラウザーが表示用にスプライトを拡大縮小する際に、ここでの処理を台無しにしないようにしてください。
倍率が整数でなければならない理由
最近傍の拡大縮小では、出力の各ピクセルが最も近い元ピクセルの色をコピーします。平均化しないため、新しい色は現れず、端も柔らかくなりません。ただし、それだけでは不十分です。倍率も整数である必要があり、多くのツールがひそかに間違えるのがこの点です。
3×では、元の各ピクセルが同じ3×3の正方形になります。グリッドは均一で、元のすべてのピクセルが出力画像内でまったく同じ面積を占めます。1.5×では、サンプリングのグリッドを均等に割れなくなります。元の2ピクセルが出力の3ピクセルを分けるため、片方は幅2、隣は幅1のブロックとなり、画像全体で交互に並びます。色は混ざらず、技術的には最近傍ですが、ピクセルの大きさは目に見えて不揃いです。直線に不均一な段差が付き、斜線には元の絵になかった階段が現れ、市松模様のディザは縞になります。明らかなぼけではなく、漠然とした違和感として見えるため、確認をすり抜けがちです。
実用上は、必要な寸法から逆算して目標を選びます。48×48のスプライトをレイアウト内で約150ピクセルにしたいなら、3×（144）か4×（192）で書き出し、差はCSSやグリッドで吸収してください。リサイズツールに正確な150を求めないでください。このツールが目標幅ではなく倍率を入力するのも同じ理由です。ピクセルアートで任意のピクセル寸法を正しく達成する方法はないため、その選択肢を提供していません。
質問
すでにぼやけているスプライトを、これで修正できますか？
いいえ。他の方法でもできません。バイリニアやバイキュービックが隣の色を平均して新しい中間ピクセルを作ると、元のくっきりした境界はなくなります。どこで色が終わり、次が始まったかという情報は、中間ピクセルを書いた時点で捨てられています。鮮鋭化は端のコントラストを上げますが、離散的な色のグリッドを戻さず、AI拡大は実物を復元せず細部を作ります。ツールはこの場合を次として示します 柔らかい縁 時間を使う前にわかります。対策はぼけていない原本へ戻り、それを拡大することです。
PNGだけなのはなぜですか？
PNGは可逆なので、ファイルのピクセルは計算結果そのものです。JPGは写真用で高周波の細部を捨てます。単色同士の鋭い境界は画像で最も高周波なので、端すべてにリンギングや色にじみが出ます。それはこのツールが避けるためにある劣化そのものです。非可逆WebPにも弱い形で同じ問題があります。どちらかを提供するのは、作業を台無しにする方法を提供することになります。
hqx、xBRZ、scale2xはどうですか？
これらのアルゴリズムは各ピクセルの隣を見て、ぼかさず斜線や曲線の段差を滑らかにしようとします。きれいな輪郭のスプライトでは非常に良くても、ディザやノイズの多い絵では明らかに悪くなる場合があります。パターン照合がディザを縁として扱い、作者が意図した細部を平滑化するからです。このツールは実装していません。単純な整数倍率の最近傍が予測可能で、標準で選ぶべき方法だからです。当ガイドの ピクセルアート拡大ガイド 各方法が実際に何をし、いつ使う価値があるかを説明します。
ダウンロード後、ブラウザーで画像がぼけるのはなぜですか？
ブラウザーが描画時に、デフォルトの平滑化を使って再度リサイズしたためです。ファイルがすでに意図した表示サイズでも、レスポンシブなコンテナー、ページのズーム、高DPI画面によって起こります。次を追加してください image-rendering: pixelated 次へ <img> またはcanvas要素に設定します。ツールパネルのコードはまさにこれで、ブラウザーは最近傍を使います。ゲームエンジンでは同じ設定がテクスチャにあり、PointまたはNearestを出力倍率とは別に指定します。
写真にも使えますか？
動作はしますが、写真には最近傍は不適切です。写真は連続した場面を標本化したものなので、グラデーションは本来滑らかであるべきです。近隣の標本を混ぜると、高解像度で撮影した場合に近いものを再構成できます。代わりに各ピクセルを硬い正方形へ複製すると、細部は増えず、目立つブロックだけが現れます。写真には通常のリサイズを使い、この方法はピクセルグリッドに描いた画像に使ってください。
関連
バイリニアのリサイズがピクセルアートを崩す理由、Unity・Godotのポイントフィルターの働き、hqx・xBRZの位置づけなど、背景の詳しい説明はこちら： ピクセルアートをぼかさず拡大する方法。画像が単独のスプライトではなく、フレームを並べたシートの場合は、先に切り分けてください。 スプライトシートスライサー シートを正しい境界の個別PNGへ分割し、その後各フレームを拡大すると、全フレームが同じグリッドを維持します。