1. 画像を選ぶ
端末内の写真やイラストを読み込みます。画像は変換のために外部サーバーへ送信しません。
How to use
基本の使い方
2. 大きさを決める
縦20〜100pxなど、用途に合う出力寸法を選びます。
3. 色と見え方を調整する
色数、明るさ、コントラスト、彩度、ディザリングを変えて、低画素でも特徴が残る設定を探します。
4. PNGで保存する
実寸または拡大表示用のPNGとして端末へ保存します。
Tips
うまく使うためのポイント
- 顔やロゴは輪郭が残る程度の解像度から試すと調整しやすくなります。
- 色数を減らすほどドット絵らしくなりますが、陰影や細部は失われます。
- ディザリングは限られた色の点を並べて中間色を表現する処理です。写真には有効ですが、平坦なロゴでは不要な場合があります。
Engineering
裏側で起きていること
操作を単純に見せるために、ブラウザやバックエンドでは複数の処理を組み合わせています。
端末内処理
画像の読み込み、縮小、色調補正、減色、PNG生成までをブラウザ内で行います。アップロード待ちをなくし、元画像を外部へ渡さない構成です。
縮小と減色
まず目的のピクセル寸法へ縮小し、その後に使用色を制限します。順序を固定することで、元の高解像度画像に引きずられず最終表示に適したパレットを作ります。
ディザリング
使用できない中間色の誤差を周囲のピクセルへ分配し、少ない色でも階調を感じられるようにします。結果は被写体によって異なるため、利用者がオン・オフを比較できます。
FAQ
よくある質問
画像はアップロードされますか？
いいえ。変換はブラウザ内で完結します。
色数は少ないほど良いですか？
用途次第です。記号的な画像は少色、写真らしさを残す場合は多めの色が向きます。
実寸と拡大PNGの違いは？
実寸は1ピクセルを1ピクセルで保存し、拡大版はドットを崩さず見やすい大きさへ整数倍します。
体験の背景
この体験をどう設計したか
解像度を落としても、絵にはならない。
小さな画像が欲しいのではなく、素材として使える雰囲気のある絵が欲しい。低解像度化と抽象化の違いから、Pixel Displayで残したかった調整の余地を考えます。