2つの画像を読み込み、ドラッグスライダーまたは並べた表示で比較します。ビフォー/アフターの編集に最適。アップロード不要。
画像比較スライダーでは2つの画像を並べて読み込み、縦の区切り線をドラッグして一方の画像をより多く、もう一方をより少なく表示できます。このビフォーアフターのレイアウトは、2つのバージョンの違いを直接、低摩擦で示す方法です。両方の画像はFile APIを使ってローカルディスクから読み込まれ、ブラウザによって画面に表示されます。サーバーには何もアップロードされません。
スライダーはCSSのclip-pathアプローチを使用するため、2つの画像の間の遷移は常にピクセルに整列し、境界でのブレンドや補間はありません。2つの画像を固定した左右のパネルで表示するスプリットビューに切り替えることもできます。このツールは写真の編集結果、圧縮結果、デザインの反復、または違いをはっきりと確認する必要がある2つの画像を比較するのに役立ちます。
スライダーが正確に重ね合わせるため、両方の画像が同じ寸法の場合に最適に機能します。画像のサイズが異なる場合、ツールは共通の表示サイズにスケールします。アスペクト比が異なる場合は、端にずれが生じる場合があります。
いいえ。両方の画像はFile APIを通じてファイルシステムから読み込まれ、ブラウザ内のCanvas要素に描画されます。比較はクライアントサイドのレンダリング操作です。どちらの画像もデバイスの外に出ることはありません。
現在のツールはローカルファイルのみを受け付けます。リモートURLから画像を読み込むには、ブラウザがフェッチする必要があり、多くの画像ホストが許可しないCORS制限の対象となります。
制限はブラウザのCanvasメモリです。各画像が約2000万ピクセルまでであれば、ほとんどのデスクトップデバイスで問題なく処理されます。非常に大きな画像はレンダリングを遅くしたり、ローエンドハードウェアではメモリエラーを引き起こす可能性があります。
OSのスクリーンショットツール（またはDevToolsのブラウザスクリーンショット機能）が特定のスライダー位置をキャプチャする最も簡単な方法です。比較ビュー自体にはマージされた画像の組み込みエクスポートボタンはありません。