透過PNG画像について

「透過PNG画像」をご存知でしょうか？
透過PNG画像とは、画像の一部を透明または半透明にした画像のことをいいます。
この画像を白色以外の背景画像の上に重ねると、透明な部分は後ろの背景が透けて見えます。
通常の画像では、白くなってしまう部分が、透過して後ろの背景が見えるのです。

透過PNG画像は、背景に馴染ませることができるという特徴から、社名やブランドのロゴ画像で使用されることが多くなっています。
しかし、問題点もあります。

不思議現象１．文字が細く見えてしまう

「透過PNG画像」をWindows10のフォトビューアーで見ると、半透明が表現されないという現象が発生します。下記の比較図を見てください。
Web上では太字（ボールド）で文字の境界線が半透明に見えますが、フォトビューアーだと細い線であり、境界線が表現されていません。
透過PNGではこのような現象が起こるので、ご注意ください。

フォトビューアーでの確認方法は以下通りです。

Windows10のフォトビューアー

不思議現象２．黒塗りの画像になってしまう

同じく「透過PNG画像」の問題ですが、真っ黒な画像になってしまうことがあります。
PRワイヤーのプレスリリース配信サービスは、50サイトを超える提携メディアにも転載されますが、画像付きのプレスリリースの場合、各提携メディアでは、画像を複製して保存しています。
この過程で、透明色の背景に対して、黒色の背景をあてられてしまうことがあるのです。
黒色の背景をあてられてしまうとどうなるか。下記の図をご覧ください。

透過PNG画像だと、このようなトラブルがありますので、PRワイヤーでは推奨しておりません。
背景に白色を指定しておくか、JPEG画像に変換することをお勧めいたします。

不思議現象３．勝手に回転している？

最後に、一番よく利用されている画像形式であるJPEG画像について。
PC上で見ていた画像が、Web上では上下が逆になる、という現象が起こることがあります。

下のサンプル画像をご覧ください。
PC上だと「怒っている」ように見える画像が、Web上にアップロードして見ると180度回転して「笑っている」ように見えます。
もし、急ぎの入稿作業時にこのような現象が発生すると、焦ってしまいます。

なぜ、このような現象が起こるのでしょうか？
画像ファイルには、Exchangeable image file format（エクスチェンジャブル・イメージ・ファイル・フォーマット）と呼ばれる、カメラの機種や撮影時の条件情報を画像に埋め込んで記録する仕組みがあります。略称はExif（イグジフ）。

例えば、スマートフォンで撮影した写真に位置情報が記録されているのをご存知でしょうか。この情報もExifに記載されています。
実は、Web上で画像の上下が逆になってしまう現象は、このExif情報が原因で発生します。

Windowsのフォトビューアーでは、画像を回転することができるようになっています。
非常に便利な機能です。

この仕組みはExifに「90度左回転」という情報を記録することで実現しています。
PC上ではExifの情報を読み取って回転させたうえでプレビューしています。
この場合は問題ないのですが、Web上にアップロードした際に、Exif情報を無視して表示する場合があります。
そうすると、PC上とWeb上で画像の向きが異なるという現象が起こるのです。

対策方法は、画像の「編集ソフト」を使用することをお勧めします。
編集ソフトで回転させた場合は、Exif情報ではなく、画像自体を回転させるで、PC上で見たままのものがWeb上でも表現させることができます。

ちなみに、編集ソフトで回転する場合の画面は以下のような操作方法になります。

Windowsの写真編集ソフトの画面

番外編を挟みましたが、次回はサムネイル画像がトリミングされることも含めて、SNSで画像が表示される際の注意点についてお話します。