画像ぼかしフィルターとは？

ぼかしフィルターは、各ピクセルを周囲のピクセルと混ぜ合わせて、画像を柔らかく見せます。ここで使われているガウスぼかしは、遠くのピクセルより近くのピクセルを強く反映するため、にじんだコピーではなく、ピントの合っていないレンズで撮影したような仕上がりになります。写真をスライドやWebサイトのヘッダー、スマートフォンの壁紙に使える柔らかな背景にしたり、情報量の多い画像に重ねたテキストを読みやすくしたり、レイアウトを判別できる状態に保ちながらスクリーンショットの詳細を隠したりできます。

ツールの説明

画像を開き、半径をドラッグして調整します。半径を小さくすると細部の輪郭が和らぎ、大きくすると色の柔らかなかたまりだけが残ります。ドラッグに合わせてプレビューが更新され、比較スライダーで元の画像と結果を並べて確認できます。ダウンロードした画像は、PNG、JPG、WebPのいずれかの形式で元のサイズが保たれます。

特長

  • 半径を1つ設定するだけで使えるガウスぼかし
  • 光と同じように色を混ぜるため、明るい部分は自然に広がり、色の境目が濁りません
  • 透明な画像も、輪郭をきれいで滑らかな状態に保ちます
  • ブラウザー上で処理するため、画像が端末の外に送信されることはありません

仕組み

半径はガウス分布の標準偏差で、CSSのblur()で使われるものと同じ指標です。ぼかしでは、ファイルに保存されている数値ではなく、光の量として色を混ぜ合わせます。そのため、細かな白黒の縞模様をぼかすと、光が半分になったときの灰色になります。これは、簡易的なぼかしで生じるくすんだ中間色の灰色よりも明るい色です。画像の端より外側では端のピクセルを繰り返すため、境界が暗くなりません。また、透明なピクセルに隠れた色が画像ににじみ出ることもありません。

ヒント

  • テキストの背景に使う場合は、形は判別できるものの、視線を引きつけるものがなくなる半径を選びましょう。
  • ぼかした画像は圧縮効率が非常に高いため、JPGまたはWebPでダウンロードすると、元の画像より大幅にファイルサイズが小さくなることがよくあります。
  • 機密性の高いテキストを完全に隠すには、大きな半径を使いましょう。大きな文字は、ぼかしが弱いと読めてしまうことがあります。