画像比較

以前試したけれど挫折していた画像比較スライダー、再びトライしました。今回試したのは Image Compare Viewer です。
　https://image-compare-viewer.netlify.app/

これまで画像のbefore/afterを比較表示するときは、2枚の画像を上下に配置していました。例えば「JPEG現像／爺の時悠空間」
　https://saitoy05.hatenablog.jp/entry/2021/07/25/161430

当然、2枚の画像を同時に比較表示できません。かといって横配置にすると画像が小さくなってしまいます。
こんなときは、2枚の画像を重ね合わせておいて、上下面それぞれの画像の表示範囲を変えればいい、つまり、画像比較スライダーです。

今回使用した画像は前述の記事に載せたものと同じです。
　　R8 オリジナル：Ricoh R8 JPEGオリジナル
　　JP10：SILKYPIX JPEG Photography 10 による調整

（R8 オリジナル）（JP10 自動調整）

R8 オリジナルJP10 自動調整

 

（R8 オリジナル）（JP10 自動調整）

 

（R8 オリジナル）（JP10 テイスト：ディティール強調）

 

（JP10 テイスト：ソフト）（R8 オリジナル）

画像比較ツールを試してみたよ、という例でした。疲れました。
みなさまの環境でそれなりに見えていればいいのですが...

（参照：https://image-compare-viewer.netlify.app/）
<link rel="stylesheet" type="text/css" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">
<script src="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js"></script>