
✓この記事でわかること
- 1モノクロで色の違いが失われても、明暗やラベルが残るか比較する
- 2セピアの演出色と、商品の実物の色を伝える用途を分ける
- 3全体フィルターと範囲加工を使い分け、ぼかし・モザイク・黒塗りの強さと出力後の見え方を確認する
モノクロ・セピアは色を変え、ぼかしは輪郭や文字の見え方を変えます。同じ素材で、どの情報が残るかを比べます。写真全体のぼかしと、範囲を指定する加工も区別します。
1. 同じ人工素材で表示を比較する
元画像はこの記事用に作成した1200×800pxのJPEGです。赤・緑・青の色面、文字、白黒の段階を配置し、実在の人物や商品は使っていません。4枚は同じ画像へCSSフィルターを適用した表示例で、ツールから保存したファイルや画質・容量の測定結果ではありません。
元画像

モノクロ100%

セピア100%

表示上のぼかし5px

100%は変化を見分けるための比較条件で、推奨する強度ではありません。ぼかし5pxはこのページの表示サイズに対する値です。元の1200px画像へ5pxをかけて保存する場合と、ぼけ方の比率は一致しません。
同じ比較用JPEGを保存すると、画像フィルターツールでも同じ入力を使えます。
2. 残したい情報から加工を選ぶ
色で区別する資料
赤・緑・青だけで区分した図は、モノクロ後に区別しにくくなる場合があります。番号やラベルも残して確認します。
形や明暗を見る画像
色を外しても輪郭が分かるかを比べます。モノクロにするだけで明暗の差が必ず強くなるわけではありません。
商品の色を伝える写真
セピアの色を実物の色として示さないよう、色確認用の写真は元画像を使い、演出画像とは用途を分けます。
プリセットは複数の設定をまとめて変えるため、1種類の効果の比較とは分けます。例えば現行のWarmはセピア20%・明るさ+5・彩度+20、Cinematicはコントラスト+20・彩度−15・明るさ−5・ビネット40です。これらは実装にある初期設定で、すべての写真に適した強度や、品質が改善する測定結果ではありません。色を合わせたい商品写真では、プリセット後の色を元画像と比較し、必要な補正だけを残します。
ツールの「ぼかし」は画像全体へかかります。背景だけをぼかして主役を鮮明に残す処理とは違い、比較素材でも文字までぼけます。元画像を見せる目的と、加工後に残したい情報が一致しているか確認します。
3. 住所や番号を隠す場合は範囲加工へ
ぼかしやモザイクの見え方は、文字の大きさ・対象範囲・元画像の寸法で変わります。固定の強度で読めなくなるとは判断できません。公開しない文字は、不透明な塗りつぶしや対象を含むトリミングを選び、保存した画像で範囲外へのはみ出しや反射も確認します。
4. 保存後は形式と見え方を別に確認する
このサイトのフィルターツールは、設定に従ってCanvasへ描画し、画像を新しく保存します。元形式維持でもBMP・GIFはJPEGへ保存され、GIFの動きは保持されません。元画像と別名で保存し、結果に表示された実際の形式と、保存した画像の色・文字・寸法を照合します。
PNG・WebP・AVIFは元形式維持の候補ですが、指定した形式をブラウザが書き出せない場合は、実際に返されたBlobの形式で保存します。AVIF指定でもPNGになる場合があり、結果の形式表示と拡張子を確認してください。AVIFが必ず最小容量になるという比較ではありません。
元ファイルのEXIFをそのままコピーする処理はありませんが、写り込んだ住所や看板は画像の一部として残ります。メタデータの扱いと、画像内の情報を隠す加工は別に確認します。
参考情報
- W3C Filter Effects Module Level 1:6.1 Filter Functions(Working Draft。grayscale・sepia・blurの定義、2026年10月4日確認)
- MDN:HTMLCanvasElement.toBlob()/未対応の出力形式とPNGへのフォールバック(2026年10月4日確認)
