変更前のと変更後の画像や動画は見る目を引くものです。何が変わったのか、どう変わったのか分かると、どこに工夫がこらされているのか分かります。ビフォーアフターのようなリフォーム番組でも、前後の動画を効果的に使っています。 今回紹介するImage Compare Viewerもそんな比較を効果的に行えるライブラリです。二つの画像を用意して、ぜひ試してみましょう。

Image Compare Viewerの使い方

水平方向。

垂直も可。

Image Compare Viewerでは滑る量を設定したり、ドラッグできるバーの形をカスタマイズする、マウスオーバーで有効にするなど細かなオプションが用意されています。写真の加工前後を比べたり、間違い探しのような使い方もできるでしょう。依存ライブラリがないのも嬉しいポイントです。

Image Compare ViewerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Image Compare Viewer kylewetton/image-compare-viewer: Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.