写真投稿とモアレ干渉

極稀ですが、サムネイル等で縮小表示した時に モアレ模様 が出て びっくり します。
写真の投稿を考える場合、綺麗に見せたいので、なるべく大きなサイズでアップして置いたりします。
普通は、それで、いいのですが、　一応、モアレ が出ていないか、気を付ける癖を着けて置いた方がいいかも知れません。
厄介な問題、それが、 モアレ干渉　です。


先ず、モアレ干渉とは。　　仏：moiré　英：moire, a moire interference

　　規則正しい繰り返し模様を複数重ね合わせた時に、それらの周期のずれにより視覚的に発生する縞模様のこと。

出典：　 http://ja.wikipedia.org/wiki/モアレ　　　　　

普通は 余り お目に掛かりません。

私達が撮影する絵は、一見、規則正しい模様に見えても、実際には、そうではないからなのでしょうか。
... そう言えば、画像編集等で、色域を指定すると、思ったより小さい範囲を指定されたりしますから。
単色に見えてはいても、 細かい模様が隠れていたり ... 、　　う～ん、脱線。

でも、極稀に登場して、慌てさせます。

例を示しましょう。

これは、１枚の画像をアップして、その表示サイズを 小 と 特大 で貼り付けたものです。
　　　　大元の投稿は　こちらです。　　リンク ：　http://shiroyuki-mot-graphics-trial.blogspot.com/2014/08/mgt0019.html
上のサムネイルの花火の線を見て下さい。　　破線になってしまっています。
いやぁ、良く見ると、下の絵も 破線が ... 。
この時は、止む無く、サムネイル部分の タイトル テキスト に　Wow, a moire interference.　と入れて逃げました。

写真の場合、縮小する事によって、モアレ が顕著になります。　　倍率が下がれば下がる程。


対策としては、　アップする画像と表示する画像の大きさを揃える　　のが一番です。

しかし、場合によって、その対応は難しいかも知れません。
ブログの様に、画像の拡大表示機能があると、大きく綺麗な状態でアップしておきたいのが 人情ってものですから。
私は、こういう場合には、　モアレが出ますので　拡大して見て下さい 　といった感じのコメントを付けて対応しています。

因みに、画像の参照コードを提示しておきます。
３つあって、上から、　冒頭の１番目・サムネイル　/　冒頭の２番目　/　後続・サムネイル　です。
上の２画面に対し、標準的な s1600 部分を s400 と書き換えたのが 後続 の画面です。　　何もしないと、 s1600 で指定されています。
但し、この様に指定した場合、画像クリックで得られる拡大時にも、下の画面も別の大きさで再掲されています。
　　　（薄いグレーの部分は省略してもいい場合もあります。　例えば、同一投稿内で画像参照があり重複して利用する場合。）
　　　（今回の例では、省略せず、参照を し直して います。）
　　　（単に、画像を貼り付け、それにモアレが出ている場合には、HTML で、 赤い部分 元は s1600 を ２箇所 直して下さい。）

 <img alt="" border="0" src="http://2.bp.blogspot.com/-1LXWWNZ_***/U8_P-6ZD***/AAAAAAAA***/lCDqSQRG***/s1600/MGT0019_1_FireWorksFake.jpg" height="133" title="Thumbnail does not allow you to expand!  Wow, a moire interference." width="200" /></div>

<a href="http://2.bp.blogspot.com/-1LXWWNZ_***/U8_P-6ZD***/AAAAAAAA***/lCDqSQRG***/s1600/MGT0019_1_FireWorksFake.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img alt="" border="0" src="http://2.bp.blogspot.com/-1LXWWNZ_***/U8_P-6ZD***/AAAAAAAA***/lCDqSQRG***/s1600/MGT0019_1_FireWorksFake.jpg" height="425" title="MGT#0019-1 FireWorks Fakes type-1" width="640" /></a>

<a href="http://2.bp.blogspot.com/-1LXWWNZ_***/U8_P-6ZD***/AAAAAAAA***/lCDqSQRG***/s400/MGT0019_1_FireWorksFake.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img alt="" border="0" src="http://2.bp.blogspot.com/-1LXWWNZ_***/U8_P-6ZD***/AAAAAAAA***/lCDqSQRG***/s400/MGT0019_1_FireWorksFake.jpg" height="132" title="MGT#0019-1 FireWorks Fakes type-1" width="200" /></a>

どうでしょうか、最後のサムネイルは 画像サイズを辺基準で 1/4 に縮めた訳ですが、モアレが減少しているのがお分かり戴けましたか。
本当は、表示サイズと同一の s200 がベストとは思いますが、一応、試み という事で ... 。


尚、Blogger の場合、不思議な事が起きます。
当初、画像が転送されて来てモアレだらけの図が 暫く経つと モアレが低減されたものに変わります。　（公開後）
しかし、画面をスクロールして一旦隠して再びスクロールし直すと また モアレだらけ の図に逆戻りして それ以降変化はない様です。
公開前の編集画面やプレビューでは 最初の モアレだらけ のまま 変わりません。
これは、採用しているテンプレートや利用機器環境との関係もあるのかも知れませんが、　... 不思議です。


それにしても、悩ましい問題です。　　モアレ。