画像フィルター＆エフェクト

「画像フィルター」が実際にピクセルに何をするか

画像フィルターは、すべてのピクセルに適用される数学的操作です。このツールの各フィルターは、特定の変換に対応しています。明るさ150%は各カラーチャンネルを1.5倍 (最大値でクランプ) し、画像全体を明るくします。コントラスト150%は中間点周辺の値を引き伸ばし、暗いピクセルをより暗く、明るいピクセルをより明るくします。彩度は全体的な明るさを保ちながら、色をグレーに近づけたり遠ざけたりします。色相回転は選択した角度で各色を色相環の周りで回転させます。セピアはRGBを暖かい茶色がかったパレットにマップする固定の3x3マトリックスを適用します (R' = 0.393R + 0.769G + 0.189B、およびG'とB'の類似の式) 。グレースケールはITU-R BT.601係数 (0.299、0.587、0.114) を使用して各ピクセルを輝度加重平均に折りたたみます。これは人間の視覚が明るさを知覚するために使用するのと同じ重みです。ぼかしはガウシアン畳み込みです: 各出力ピクセルは周囲のピクセルの加重平均になります。反転は各チャンネルを反転します: c' = 1からc。

このツールの各プリセットは、これらの操作の名前付きの組み合わせです。「鮮やか」はコントラストと彩度を上げて重ねます; 「B&W」はグレースケールを100%に設定します; 「セピア」はセピアを100%に設定し彩度を下げます; 「暖かい」はセピアの色合いと穏やかな彩度を追加します; 「冷たい」は色相を青に回転させます; 「ビンテージ」はコントラストと彩度を下げ、わずかに暖めます; 「ドラマチック」はコントラストと彩度を強く押し上げます; 「フェード」はコントラストを和らげ、わずかに明るくします。裏側では、各プリセットは異なるCSSフィルター文字列を書くだけです。任意のプリセットから始めて、個々のスライダーを調整して、希望する正確な見た目を見つけることができます。

ここでのすべてのフィルターは、ブラウザの標準化されたCSSフィルター関数 (W3C Filter Effects Module Level 1) を通じて適用され、2016-2019年以降のすべての現代のブラウザでGPUを介して実装されています。スライダーを動かすとプレビューがリアルタイムで更新されます。これは、操作がCPUではなくグラフィックカードで計算されるからです。ダウンロード手順は、フィルター結果を元の画像寸法で新しいPNG、JPEG、またはWebPに焼き付けるので、エクスポートされたファイルはすでに見た目が適用されています; 別のレンダリング手順は必要ありません。

このツールがフードの下でどう動作するか

フィルターエンジンは、ブラウザのCanvas APIとCSSフィルター関数の組み合わせです。画像をドロップすると、ブラウザの組み込みデコーダーがファイル (JPEG、PNG、WebP、GIF、BMP、AVIF、またはSVG) をメモリ内のHTMLImageElement上の生のピクセルに変換します。ピクセルは要素に描画されます。フィルターを適用するために、ツールはctx.filter = "brightness(150%) contrast(110%) saturate(120%) sepia(20%) ..."を設定し、ソース画像を再描画します; ブラウザはGPUでフィルターチェーンを適用し、canvasは結果を表示します。

プリセットは、スクリプトに保存された事前定義のフィルター文字列です。「B&W」はgrayscale(100%) contrast(105%)です。「ビンテージ」はsepia(35%) saturate(75%) contrast(95%) brightness(102%)かもしれません。プリセットを選択すると、これらの文字列の1つがcanvasフィルターに書き込まれます; 個々のスライダーはそれに合わせて更新されるので、そこから微調整できます。「比較するために保持」は一時的にctx.filter = "none"を設定し、元の画像を再描画し、離すと選択したフィルターを復元します。

ダウンロード手順は、元の寸法 (画面上のプレビューサイズではない) で現在のフィルターが適用された新しいcanvasにソース画像を再描画し、canvas.toBlob()が結果を新しいPNG、JPEG、またはWebPとしてエクスポートします。出力はピクセルデータにフィルター効果が焼き付けられているので、受信者はツールの状態を必要とせずに同じ見た目を見ます。この間、何もタブを離れません; フィルタリング自体のためにライブラリはロードされません。

写真フィルターの簡単な歴史

• 暗室トーニング、1860年代-1920年代。 ソフトウェアのずっと前に、写真家は化学で「フィルター」を適用していました: セピアトーニング、ゴールドトーニング、セレントーニング、染色プリントの手彩色。Polaroid SX-70 (1976) はインスタント写真に認識可能な色シフトを焼き付けました。すべての現代のプリセットの概念的祖先。
• Photoshop 1.0、1990年。 Adobeは調整ダイアログを備えたPhotoshopの最初のバージョンを出荷しました: 明るさ/コントラスト、色相/彩度、カラーバランス、バリエーション。フィルターはソフトウェアカテゴリーになりました; 写真家は今や非物理的な変換を適用し、元に戻すことができます。
• 調整レイヤー、1994年。 Photoshop 3.0は調整レイヤーを導入し、フィルターを非破壊的にスタックできるようにしました。すべての現代のプリセットスタックの概念的祖先: 各「フィルター」は、破壊的な焼き付けではなく、並べ替え可能で個別に調整可能な変換になりました。
• Instagramが名前付きプリセットでローンチ、2010年10月。 Instagramは11 (後に17) の名前付きプリセットでローンチしました: Amaro、Rise、Hudson、Valencia、X-Pro II、Sierra、Willow、Lo-Fi、Earlybird、Sutro、Toaster、Brannan、Inkwell、Walden、Hefe、そして必須の「ノーマル」。各プリセットは、このツールが公開しているものに概念的に類似したピクセル数学操作の特定の組み合わせでした。文化的影響は巨大でした: 「フィルター」は動詞として日常言語に入り、モバイル写真編集は大衆市場カテゴリーになりました。
• モバイルフィルターの爆発、2011-2015年。 VSCO (2011) 、Snapseed (2011) 、Afterlight (2012) 、Lightroom Mobile (2014) 。各アプリは独自のプリセットライブラリを追加し、特定のフィルムストック (Kodak Portra、Fuji Velvia、Kodachrome) をエミュレートしたり、新しいビジュアルスタイルを定義しようとしたりしました。写真編集はデスクトップを去りました。
• ブラウザのCSSフィルター、2016-2026年。 W3C Filter Effects Module Level 1は2014年にCSSフィルター関数を標準化し、主要なブラウザはChrome 52 (2016) 、Firefox 49 (2016) 、Safari 13 (2019) でサポートを出荷しました。2026年までに、すべてのブラウザにGPU加速のCSSフィルターが普遍的に存在します。これがこのツールをリアルタイムでライブラリフリーにしているものです。

画像フィルターの仕組み

画像フィルターは、写真のピクセル値を変更してその外観を変えます。明るさは全体的な明るさを調整し、コントラストは明るい部分と暗い部分の差を制御し、彩度は色の強度を決定します。色相回転はすべての色をカラーホイール上で移動し、セピアとグレースケールは画像をクラシックな色調に変換します。ぼかしはガウシアンスムージングを適用し、反転はすべての色を反転します。

このツールは、リアルタイムパフォーマンスのためにGPUアクセラレーションされたブラウザのネイティブCanvas CSSフィルターエンジンを使用します。すべての処理はローカルです · 画像がサーバーに送信されることはありません。

一般的な用途

• ソーシャルメディアで共有する前に写真を編集
• クラシックな外観のために画像を白黒またはセピアに変換
• Web対応の製品写真のために明るさとコントラストを調整
• ブランドアイデンティティに合わせるために暖色または寒色を適用
• 画像のバッチ全体で一貫した視覚スタイルを作成
• ソフトウェアをインストールせずに迅速な写真補正

実世界のフィルターワークフロー

• ソーシャルメディアのためのスナップショット磨き。 カメラから直接の電話スナップショットは、カメラが審美的なパンチではなく忠実度を最適化するため、プロフェッショナルな投稿と比較して平坦に見えます。コントラストと彩度の10-15%の増加、時には暖かい色合いのタッチが、普通の写真をフィードに対応したものに変えます。Instagramの最初の10年で最も使用されたプリセットはValencia、Mayfair、Inkwellで、すべてこれらの操作を組み合わせています。
• ブランドに一貫したビジュアルスタイル。 あなたのブランドが認識可能な外観 (ホスピタリティブランドのための一貫して暖かいトーン、テクノロジー出版物のための冷たい彩度を下げたトーン、ジャーナリズム媒体のための高コントラストB&W) で出版する場合、スライダーの正確な値を個人のプリセットとして保存することで、その外観を新しい写真ごとに数秒で適用できます。スライダーを一度設定し、値を記録し、開始テンプレートとして再適用します。
• クラシックなモノクロ変換。 ポートレート、ジャーナリズム、または色がポイントではなく注意散漫である主題の場合、B&Wプリセット (グレースケール100%プラス小さなコントラスト増加) はクラシックなモノクロの外観を生成します。暗室時代の写真家は、選択的な焼き込みと覆い焼きでB&Wの色調を洗練するためにキャリア全体を費やしました; あなたは、迅速なコントラスト増加と明るさによるシャドウのわずかな持ち上げでパンチを近似できます。
• Web準備の明るさ補正。 屋内または混合光で撮影された電話の写真は、校正されたモニターで暗く見えることがよくあります。小さな明るさの増加 (105-115%) とコントラストの増加 (110-115%) は、画像を不自然に明るくすることなくパンチを回復します。暗い領域がつぶれている低光の写真の場合、コントラストの減少 (90-95%) プラス明るさの上昇はシャドウの詳細を回復します。
• ビンテージとレトロのエミュレーション。 1970年代から90年代のフィルムの外観は共通のDNAを共有しています: わずかに減少したコントラスト、暖かいホワイトバランス、穏やかにミュートされた彩度、時にはグレインを和らげるための小さなぼかし。ここに公開されているビンテージとフェードプリセットは、これらの外観のレシピです。クロスプロセス効果 (Instagramの用語ではX-Pro II) は、高コントラストと特定の彩度カーブを持つ色相回転の組み合わせから来ます。
• アクセシビリティとコントラストチェック。 デザイナーは時折これらのスライダーを使用して、低視力または色覚異常シミュレーションのユーザーにレイアウトがどのように見えるかを確認します。グレースケールを100%にクランクすると、デザインが情報を伝えるために色のみに依存しているかどうかが明らかになります; コントラストを押すことで、低視力の視聴条件で細いテキストが読みやすいままであることを確認します。適切なアクセシビリティツールの代替ではありませんが、迅速な健全性チェックとして便利です。

よくある落とし穴とその意味

• フィルターは複合する、やり過ぎが簡単。 明るさ、コントラスト、彩度をそれぞれ150%に押し上げても、1つの150%設定の3倍の効果は生まれません; 巨大で派手な効果が生まれ、しばしばクリップされたハイライトとつぶれたシャドウで画像を視覚的に劣化させます。1つのスライダーから始め、評価し、必要な場合のみ2つ目を追加します。控えめさが極端主義よりも良い結果を生みます。
• ほとんどのフィルターは交換可能ですが、ぼかしはそうではありません。 数学的には、明るさからコントラストはコントラストから明るさと同じ結果を与えます; ほとんどのCSSフィルター関数の順序は出力を変えません。ぼかしは例外です: 色調整の前に適用されたぼかしは元の画像のエッジを拡散し、色調整の後のぼかしはすでに色シフトされた画像のエッジを拡散し、これは視覚的に異なる結果を生む可能性があります。心の順序でぼかしを最後に設定するか、色調整が設定された後にします。
• JPEGエクスポートは損失のある再エンコードを追加します。 品質92でJPEGとしてダウンロードすると、フィルター結果の上に新しいDCT量子化ノイズが導入されます。最大品質のためにはPNG (ロスレス) をエクスポートしてください; 知覚できない損失で小さなファイルのためには、JPEG 92で大丈夫です。ダウンロードしたJPEGで反復しないでください (再インポート、調整、再エクスポート) ; 各ラウンドが別の世代の損失を追加します。
• EXIFおよびICCメタデータはエクスポート時に削除されます。 Canvasの再エンコードは、EXIF (カメラ、GPS、キャプチャ日) 、XMP、IPTC、および埋め込まれたICCカラープロファイルを削除します。ソーシャルメディア共有の場合、これは通常プライバシーの利得です (GPS座標とカメラのシリアル番号は漏れません) 。メタデータが重要なアーカイブまたは印刷ワークフローの場合、それらを明示的に保持するデスクトップツールを使用してください。
• 非常に大きな画像はモバイルGPUに負担をかけます。 24メガピクセルの写真 (6000x4000) でのリアルタイムGPUフィルターは、ソース画像のためだけに〜96 MBのテクスチャメモリと、フィルターパスのための作業スペースを必要とします。古いモバイルデバイスは、ぎくしゃくしたり、フレームを落としたり、GPUメモリが不足したりする可能性があります。プレビューが遅い場合、フィルタリングする前にまず画像のサイズを変更してください (Image Resizerを使用) 。
• フィルターはグローバルで、選択的ではありません。 このツールのすべてのフィルターは画像全体に適用されます。前景だけを明るくしたり、空だけを彩度を上げたりする方法はありません。選択的な編集には、マスキングを使用したPhotoshop、Affinity Photo、またはGIMPなどのレイヤーベースのエディタを使用してください。このツールは画像全体の調整とプリセット用で、ローカル編集用ではありません。

プライバシー: 画像はあなたのデバイスを離れません

クラウドベースの写真フィルターサービス (Pixlr、Fotor、BeFunky、オンライン「Instagramフィルター」サイト) はすべて、写真をオペレーターのサーバーにアップロードし、そのハードウェアでフィルターを適用し、フィルタリングされた画像をダウンロードとして返します。写真は、フィルタリング後でもセンシティブなメタデータを日常的に埋め込みます: 写真が撮られた場所のGPS座標、カメラとデバイスの情報、キャプチャ日時、そして写真の内容自体、これにはしばしば顔、場所、内部インターフェースのスクリーンショット、またはその他の識別可能な素材が含まれます。ほとんどのオペレーターは、1〜2時間以内にアップロードを削除し、転送中に暗号化することを約束するプライバシーポリシーを公開しており、大手はISO/IEC 27001認証を保持しています。彼らはそれらのポリシーを尊重する強力な商業的理由があります。しかし「1時間以内に削除」は「決して見られない」ではありません。その1時間の間、画像の内容はオペレーターのインフラストラクチャに存在し、適切な権限を持つ任意のプロセスまたは人物がアクセス可能であり、オペレーターの保持ポリシーに従ってログとバックアップに見えます。

このフィルターツールは何もアップロードしません。パイプライン全体 (ファイルピック、ブラウザの組み込みデコーダーによるデコード、GPUによるCanvasフィルター、ブラウザのエンコーダーによるオプションのダウンロード) は、JavaScriptと標準化されたCSS Filter Effects APIを使用してブラウザタブ内で実行されます。アップロードなし、画像データを運ぶネットワークリクエストなし、ログエントリなし。フィルタリング前にネットワークタブにブラウザの開発者ツールを開いて確認できます: 画像コンテンツでリクエストは発火しません。唯一のネットワークトラフィックは初期ページロード自体です; フィルタリング操作のためにライブラリはダウンロードされません。ページがロードされた後にブラウザを飛行機モードに切り替えると、フィルターツールはローカル画像で動作し続けます。

別のツールが正しい選択である場合

• 適切なカラーサイエンスを備えたRAWワークフロー。 本物のカメラからの.CR2、.NEF、.ARW、.DNG、またはその他のRAWファイルで作業している場合、Adobe Lightroom、Capture One、RawTherapee、またはdarktableを使用してください。RAW変換には、ブラウザ側のCSSフィルターでは行えないカメラ固有のカラープロファイル、ホワイトバランス処理、およびダイナミックレンジマッピングが必要です。このツールはすでにデコードされたRGBピクセルで動作します。
• マスキングによる選択的編集。 被写体のみを明るくしたり、1つのオブジェクトの色を変更したり、画像の異なる部分に異なるフィルターを適用したりする必要がある場合、レイヤーマスクを備えたPhotoshop、Affinity Photo、またはGIMPを使用してください。CSSフィルターはグローバルで、レンダリングと再インポートなしではローカル編集はできません。
• プロフェッショナルなカラーグレーディング。 商業写真、ブランドキャンペーンワーク、または映画/ビデオグレーディングには、DaVinci Resolve (静止画と動画は無料) 、カスタムプリセットを備えたLightroom、またはスタイルパックを備えたCapture Oneを使用してください。これらはLUTサポート、ソフトプルーフィング、校正済みディスプレイ、プロフェッショナルなカラリストが期待するツールセットを提供します。
• 数百または数千のファイルにわたるバッチ自動化。 ImageMagickの-modulateと関連演算子、またはNode.jsのSharp/libvips、またはImageEnhanceモジュールを備えたPillowを使用してください。CLIツールはブラウザのメモリ制限なしに数千のファイルに同一の調整を適用し、CI、デプロイフック、またはcronタスクから実行されます。

よくある質問

フィルターは画像品質を低下させますか?

フィルターはフル解像度で適用されるため、品質の低下はありません。ダウンロード時、画像はフィルターが組み込まれた元の寸法でエクスポートされます。JPEGエクスポートは優れた忠実度のために92%の品質を使用します。

複数のフィルターを組み合わせることができますか?

はい。8つの調整スライダーは同時に動作します。また、プリセットから始めて、必要な正確なルックを得るために特定のスライダーを微調整することもできます。

「押し続けて比較」は何をしますか?

「押し続けて比較」ボタンを押している間、プレビューは一時的にフィルターなしの元の画像を表示します。離すとフィルター済みのバージョンに戻ります。前後の素早い比較に便利です。

画像はどこかに送信されますか?

いいえ。すべてのフィルター処理はブラウザに組み込まれたCanvas APIを使用します。画像はデバイスに完全に残り、サーバーに送信されることはありません。

その他のよくある質問

なぜ私の画像は極端な設定でポスタライズされて見えるのですか?

数学にヘッドルームが不足するからです。各カラーチャンネルは256の可能な値 (8ビットRGBで0から255) のみを持ちます。明るさやコントラストを元の範囲をはるかに超えて押し上げると、優雅なグラデーションを保つ代わりに0または255でクリップされます。結果はバンディング (滑らかな遷移であるべきものの目に見えるステップ) とポスタライゼーション (単一の色に折りたたまれた領域) です。解決策: 最も極端なスライダーを引き戻すか、より高いビット深度のソースから始めてください (RAWまたは16ビットTIFF、ビット深度を保持するデスクトップツールで編集) 。

カスタムプリセットを保存できますか?

このツールのUIで直接ではありません。しかし、スライダーの値自体があなたの「プリセット」です: 8つの数字 (明るさ、コントラスト、彩度、セピア、グレースケール、色相回転、ぼかし、反転) を記録すれば、将来のどの写真でも数秒で見た目を再現できます。バッチ全体で同じ見た目が欲しいマルチ写真ワークフローの場合、この手動アプローチは約5-10枚の写真までスケールします; それを超える場合、Photoshop、Lightroom、Capture One、または保存されたプリセットパックを備えたVSCOが正しいツールです。

フィルターの順序は重要ですか?

ほとんどのフィルターでは、いいえ: 明るさからコントラストはコントラストから明るさと同じ出力を生成します。明るさ、コントラスト、彩度、セピア、グレースケール、色相回転、反転のCSSフィルター関数はすべて互いに交換可能です。ぼかしは例外です: 色変更の前に適用されたぼかしは元のエッジに影響を与えます; 後に適用されたぼかしは色シフトされたエッジに影響を与え、2つの出力は視覚的に異なります。実際にはこのツールはすべてのフィルターを固定された順序で適用するため、異なる順序を使用する別のツールの正確な効果を再現しようとしている場合にのみ問題になります。

このツールはオフラインで動作しますか?

はい。CSSフィルターエンジン、Canvas API、およびJPEG、PNG、WebP、GIF、BMP、AVIFのデコーダー/エンコーダーはすべて、すべての現代のブラウザに組み込まれています。フィルタリングのために外部ライブラリはダウンロードされません。ページ自体が一度ロードされると、ページがブラウザキャッシュに残っている限り、後続の訪問は完全にオフラインで動作します。最初の訪問後に飛行機モードを有効にし、ローカル画像にフィルターを適用することで確認します。

EXIFメタデータはダウンロードされた画像で保持されますか?

いいえ。Canvasベースの再エンコードは、EXIF (カメラ、レンズ、露出、GPS、キャプチャ日) 、XMP、IPTCメタデータブロック、および埋め込まれたICCカラープロファイルを破棄します。ダウンロードされた画像はピクセルデータのみを運びます。ソーシャルメディア共有の場合、これは通常望ましいです (GPS座標とデバイスのシリアル番号は漏れません) 。メタデータが重要なアーカイブまたは写真ワークフローの場合、エクスポート全体でメタデータを保持するPhotoshopやLightroomなどのデスクトップエディタを使用してください。

デスクトップまたはコマンドラインの同等品はありますか?

いくつか。バッチ自動化の場合、ImageMagickの-brightness-contrast、-modulateおよび関連演算子は、任意のシェルから同じ変換を適用します。Node.jsのSharpには完全な調整APIがあります。PythonのPillowはImageEnhance.Brightness、ImageEnhance.Contrast、ImageEnhance.Colorおよび類似のクラスを提供します。インタラクティブなデスクトップ作業のためには、Photoshop、Lightroom (プロフェッショナル標準) 、Affinity Photo、GIMP、およびPixelmator Proがすべて同じ操作と選択的編集のためのレイヤーマスクを提供します。

関連ツール