🫥

画像の差分検出でimageMagickを使ってみた

2022/09/04に公開

はじめに

web制作ではデザインに合わせてマークアップを行うため、最終的にブラウザに表示される画面がデザイン通りになっているか確認する必要があります。
また、既存サイトのデザイン修正を行う場合でもデザインのどこが変更されたのかを確認する必要があります。

このようにデザインを比較する場合、目視で変更点を確認するのは辛いのでimageMagickを試してみます。

imageMagickインストール

インストール方法は公式サイトにいくつか記載されていますが、Homebrewでインストールします。

brew install imagemagick

一応インストールされたことを確認。

convert -version

compositeで画像の差分を試す

composieで画像の比較ができます。

composite -compose difference {比較画像A} {比較画像B} {出力結果}

差分がない場合

比較箇所が同じ色であるほど黒色に近づくように出色されるため、差分がない場合は出力される画像が真っ黒になります。
試しに同じ画像同士を比較させます。

composite -compose difference imageA.jpeg imageA.jpeg diff.jpg

比較画像 imageA.jpeg

出力結果 diff.jpeg

差分がある場合

比較箇所で色に差分がある箇所は黒色以外で出力されます。

比較画像 imageA.jpeg

比較画像 imageB.jpeg

出力結果 diff.jpeg

実際のサイトで試してみる

実際にサイトの画像で試してみます。
サンプル画像にZennのプロフィール画面を使用します。

※Webページ全体をキャプチャするためにChromeの拡張機能のGoWebPageを使用します

マージンなどは変わらず文字や画像のみ変更がある場合

文字や絵文字の一部を変更して比較してみます。

composite -compose difference Zenn_A.jpeg Zenn_B.jpeg diff.jpg

比較画像 Zenn_A.jpeg

比較画像 Zenn_B.jpeg 絵文字部分や文字を少しだけ変更したもの

出力結果 diff.jpeg

文字や絵文字の変更部分のみが出力されるので変更箇所が一目でわかります。

マージンに変更がある場合

文字などはそのままでページ上部の要素のマージンのみを変更してみます。

composite -compose difference Zenn_A.jpeg Zenn_C.jpeg diff.jpg

比較画像 Zenn_A.jpeg

比較画像 Zenn_C.jpeg

出力結果 diff.jpeg

マージンなどが変更されている場合は差分箇所が多く出力されてしまい、ずれを検出する方法としては実用的ではないですね。

おわりに

デザインの比較という目的ではimageMagickが使える機会はそんなに多くなさそう。。。
そもそも軽微なデザイン修正とか文言修正はコミュニケーションでなんとかなる気がします。

結局は目視の確認が必要なので画像で比較するとかよりもvisual-inspectorみたいなChromeの拡張を利用するのが良い気がしますね。
と思って調べてたらvisual-inspectorがChromeのポリシー違反で消されてた。。。

参考記事

https://tektektech.com/mac-imagemagick-install/
https://blog.mirakui.com/entry/20110326/1301111196
https://ics.media/entry/220331/
https://docodoor.co.jp/staffblog/chrome_extensions/

Discussion