仕組み
縮小では元画像の複数ピクセルを出力の1セルにまとめます。面積平均（Box）は広い色と明暗を保ち、中央値は細い輪郭を残しやすい場合がありますが、広い領域の色が変わることもあります。ニアレストは1点だけを選び、小さな特徴を見落とす場合があります。縮小前に構図を決めます。
パレット削減は指定数以下の色を選びます。Pixel Studioの初期値は16色のWu分散パレットです。Floyd–SteinbergとAtkinsonは誤差を隣のセルに配り、Bayerとブルーノイズは位置ごとに閾値を変えます。ディザリングは模様も増やすため、単純なアイコンではオフとも比べてください。
- ネイティブグリッド
- PNGそのものの寸法です。大きなニアレスト表示で細部は増えません。
- 共通パレット
- GIF/APNG入力の全フレームが一つの色表を共有し、フレームごとの色変化を抑えます。
具体例
CC0の花の写真1024 × 768を、ディザリングなしで32 × 24・16色にしました。PNGを別のプログラムで開き、Box縮小の参照画像と比較しました:
1024 × 768 元画像 → 32 × 24 出力 = 768セル
16色Wuパレット、Boxサンプリング、ディザリングなし
Box参照に対するRGB RMSE: Nerulio 6.30
ImagePixel Originalパレット 7.97、Pixel Art Village自動 6.76
同じ写真・寸法で比較した一例で、芸術的な品質順位ではありません。コンタクトシートではBoxは広い明暗を保ちますが、細い茎は柔らかくなりました。別のCC0人物写真32 × 21では同じBox参照に対しBox/Wuは5.25、Median/Wuは14.73でした。輪郭は別に確認してください。
何がどこに対応するか
| 決めること | 設定 | 結果 |
|---|
| 画面比率 | 簡易変換: 正方形8–512; Studio: 幅と高さを個別に最大512 | 4:3写真を32 × 32に伸ばさず32 × 24にできます |
|---|
| セルのサンプリング | StudioのBox・中央値・ニアレスト・最頻値・k中心 | Boxは領域を平均し、中央値は一部の輪郭を保ちます |
|---|
| 色数 | 自動または固定パレット; Studioで2–256色 | 色を減らすと単純になりますが、物体が背景に溶けることもあります |
|---|
| 表示と保存寸法 | ニアレストの表示; Studioで2–16倍のPNG出力 | 元のセルは同じで表示または保存するブロックだけ大きくなります |
|---|
出力されるファイル
まず最小のネイティブ出力を保存します。Studioには次の形式もあります:
| ファイル | 用途 |
|---|
PNG | 実際のグリッドのフルカラー画像; 開き直して寸法と画素を確認 |
|---|
PNG-8 | 有効時にインデックスパレットで保存; 透過にはパレットの制約があります |
|---|
.aseprite | 編集可能なアニメーション; 6フレームの試験ファイルをAseprite 1.3.18.6で再読み込み |
|---|
GIF | 共通パレットと有限ループの選択があるアニメーション; 透過は1ビットで色数に制約があります |
|---|
写真からゲーム用スプライトまで
- ここでJPGまたはPNGを開きます。長方形やアニメーションには上のStudioリンクを使います。
- 被写体が32 × 24または32 × 32の枠を満たすよう構図を調整し、色数より先に幅と高さを決めます。
- Box・Wu・16色・ディザリングなしから始め、細部を確認します。消える場合は中央値や大きなグリッドと比べます。
- 新しいスプライトとして適用し元画像を残してネイティブPNGを書き出します。大きなブロック画像が必要な時だけ2–16倍のニアレストPNGを選びます。
結果の確認
データと見た目を両方確認します:
- PNGを開き直し、実際の寸法と色数を確認します。32 × 24は拡大表示ではなく768画素です。
- 1倍と整数倍率で目・輪郭・細い茎を元画像と比較します。必要な部分が消えたら元に戻し、構図・サンプラー・グリッドを変えます。
- GIF/APNGでは全フレーム、時間、書き出したループ回数を確認します。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|
| 顔や細い線が消える | 出力セルが少ない、または構図が広い | 1倍画像と元画像を比べ特徴が何セルに収まるか数える | 構図を狭めるか幅と高さを増やし、中央値も試す |
|---|
| 色が濁る | 色数が少ないかBoxが隣接色を混ぜる | ディザリングなしで1倍表示を確認 | 色数を増やすか場面に合う固定パレットを選ぶ |
|---|
| 点が多すぎる | 目標寸法に対してディザリングが強い | オフにして比較 | 強度を下げるかオフにする |
|---|
| アニメーションの色がちらつく | フレームごとに選ばれた色が異なる | 連続フレームと出力パレットを確認 | Studioで全フレームを一つの共通パレットで変換 |
|---|
ほかの方法
| 方法 | こんなときに向いています |
|---|
| ドット絵エディタで描く・手直しする | キャラクターの形や輪郭を自分で決めたい場合 |
|---|
| 拡大ドット絵の修復 | 写真ではなく、すでにドット絵だった画像の不揃いなブロックやアンチエイリアスを直す場合 |
|---|
この方法の限界
- 自動変換は失われた細部を描き足せず、好みのドット絵表現も保証しません。構図の選択や手作業が必要なことがあります。
- 4K変換時間はデスクトップChromiumでの測定です。幅390pxの仮想画面は実機スマートフォンの性能証明ではありません。Studioには別のモバイル入力制限があります。
- ブラウザの色管理、メタデータ、プロファイルの保存は保証しません。GIFはパレット制約により書き出し後に色が変わる場合があります。
バージョンと出典
2026年9月にCC0写真を使ってChromium 153とFirefox 155のPixel Studioを確認しました。PNG-8・GIF・.asepriteはChromium試験で別のプログラムから再読み込みし、Firefoxでは写真PNGと元画像の保持を確認しました。CC0写真2種類とドット修復69例も測定しました。形式の説明はPNG・GIFの公式仕様とAsepriteの文書に基づきます。
参照した公式ドキュメント
寸法・パレット・アニメーションを指定して Pixel Studio を開く
画像をドット素材に
画像を実際のN×N PNG素材に変換。
使い方
- 画像を開く
- グリッド・色数・ディザを選ぶ
- 生成して実寸のPNGを保存
対応形式
PNG / JPG / WebP / AVIF / HEIC → PNG — 読み込み・書き出しはブラウザの対応状況によります。 アニメーション入力は非対応です。静止フレームを選択してください。
このツールでできること
実際のN×N素材を作り、透明余白の整理や輪郭線を追加できます。
処理方式と検証状況
advanced · browser Pixel Studio: area-average cells / Wu palette / ordered, error-diffusion and blue-noise dithers / indexed and animation export. 品質検証中です。Pro・Flagship水準はまだ実証されていません。
書き出す前に
小さなグリッドでは細部が失われます。手描きではなく自動変換です。
よくある質問
大きなプレビューと同じ解像度で保存されますか？
いいえ。表示だけをくっきり拡大しています。実寸は選んだ8〜512のグリッドです。
ファイルはアップロードされますか？
このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。
作業は自動保存されますか？
いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。
