スタッフブログ

もう 夏ですか?

こんにちは!木村です!

本日は、前回の記事に書いていた通り、画像のファイル形式についてまとめていきたいと思っています。
しかし、実はこの記事take2なんです…(´・ω・`)

前回の記事を書き終わってすぐ材料を準備して色々と試行錯誤して記事を書き進めていたのですが、1ヶ月ほど業務につかまり、「記事書いてる場合じゃねぇ!Σ(´∀`;)」状態になりまして、もう 夏ですか?ってくらいの暑さの中、梅雨前のお話なんて書いてあるものですから全消去です(´;ω;`)

しかし、せっかくなので用意していた画像も一新して夏気分全開で行くことにしました(笑)

 

今回の記事の最大のポイントは「JPEG形式」と「PNG形式」の違いです。
その違いが分かりやすいように簡略化してまとめていきます!

まずはこちらの画像をご覧ください。

犬の写真と猫の写真です。
どちらも、海の近くで撮られた写真で、背景に海が映っていますね。
この画像はどちらもJPEG形式です。

こちらの画像はPNG形式です。
上のJEPG形式の画像と特に変わりはありませんね。

違いがはっきりわかるようにするためには、背景をなくす必要があります。
なのでそれぞれの写真から、斜線の入っている部分を消去します。

消去した余白部分は不要なのでサイズを調整して、JPEG形式とPNG形式でそれぞれ画像を保存します。
そうするとこんな風に変わります。
左がJPEG形式で右がPNG形式です。

画像の背景色がサイトの背景色と同じ白なので、特に違いはないように見えています。
なので背景の色を変えて確かめてみたいと思います。

どうでしょうか?
PNG形式の画像は猫や犬の部分だけになっていますね。
この対象の形のまま保存できる形式がPNG形式です。
一番最初のような背景がある写真をそのまま使用する場合は、JEPG形式でもPNG形式でもいいですが、背景があるときはJPEG形式で十分だと思います。

 

PNG形式について、もう一つ注目してほしいところがあります。
それは、画像の透過部分です。
しれっと、猫の画像の方に影をつけていましたが、お気づきでしたでしょうか?
この影の部分、実は不透明度を落として透過させています。
背景が単色だとあまり違いが出ないので背景を写真にしてみたいと思います。

砂浜に巨大な猫が現れたような感じになっていますが、透過部分をご覧ください。
砂浜の画像が透けて見えているので本物の影のような感じになっていると思います。
PNG形式はこのように、透過状態も保持したまま保存できます。

PNG形式の画像は他の画像と重ねたときも同じようになるので、今回は写真を切り抜きましたが、イラストを切り抜けいて背景に手の平の写真を使えば、イラストが手の平の上にあるように編集することも可能です。
他にも、クラス集合写真撮影日に欠席したクラスメイトがいたときの集合写真風の画像や、空や海底を歩いているような画像など・・・
PNG形式の画像があれば色々な画像をつくれます。

しかし、動く画像はJPEG形式やPNG形式では作れません。
動く画像をつくるにはGIF形式を使います。

GIF形式については、私もあまり熟知できていないので詳しい説明は遠慮させていただきますが、アイコンなどの小さな画像などに適していて、パラパラアニメのように、少しづつ違う絵を連続して表示させる「GIFアニメ」という画像も作ることができます。

いつか詳しく説明できるくらい使い倒してみたいと思います。(笑)

それでは今回はこの辺で切り上げたいと思います。
ここまで読んでくださりありがとうございました!

2:47 PM 2017.07.13

新潟ホームページ制作はSEO対策・スマートフォン対応で低価格の
「63パックホームページ」におまかせ下さい