知っておくと便利な基礎知識 画像データ編
パンフレットの制作やWEB制作する際に、必要となる画像データ。その拡張子について意識したことはありますか？「〇〇.jpg」「〇〇.png」などが身近ですかね。今回はそういったよく使うものからあまり聞き馴染みのないものまでをざっくり説明していきます。
拡張子とは…
ファイルの種類を示すための文字列で、コンピューターはどのプログラムを使用してファイルを開くかを判断します。例えば、「〇〇.docx」というファイルを開くと、コンピューターがWordを開きます。
JPEG（ジェイペグ）
拡張子：.jpg
一般的によく使われる画像形式ですね。汎用性が高いので迷ったらこれ。データ容量を軽く押さえることができるので取り回しもしやすいです。ただし圧縮し過ぎると、画像内にブロックノイズやモスキートノイズなどと呼ばれるノイズが発生してします。色数が多い写真などでは周りの色に誤魔化されてノイズが目立ちにくいですが、圧縮率が高すぎたり、単色のイラストなどの色数が少ないデータではノイズが目立つので注意です。
GIF（ジフ）※1
拡張子：.gif
イラスト向きの拡張子。1枚の画像に使える色数が256色までで、どれか1色だけを透明化することもできます。複数の画像を束ねてアニメーションにすることも可能。注意点としては、グラデーションの表現が難しく、また透明度を調整すること（半透明等にする）ができません。
png（ピング）※1
拡張子：.png
256色以内であればGIFよりも軽いデータにすることが可能。256色以上（色数に制限なし）を扱うこともできますが、jpegよりも重くなりがちに。webサイトで使う場合は注意したいです。透明度の調整も可能なので、うちのスタジオ撮影では背景に会社ロゴを入れる際によく使われます。GIFと同様こちらもグラデーション表現は向いていないので、色ベタで使う方が良いと思います！
余談
…知らなかったのですが、APNGというPNG画像をアニメーションする技術がありました。古いブラウザが駆逐されたことによって使えるブラウザが増えてきたため、利用が増えてくるそうです。gifでのアニメーションよりも色数を多く扱え、さらに背景透過も得意、解像度も高いので、品質の高いアニメーション画像を表示できます。
→gifアニメーションとpngアニメーションのわかりやすい比較記事（ページ下の方に載っていたので、下記参考に貼っておきます！）
webp（ウェッピー）※1
拡張子：.webp
WEB向きの拡張子。googleが開発した画像形式で、jpeg・gif・pngなど、どの形式よりも軽量で解像度も申し分ないです。まだ完全に浸透しているわけではないですが、「WEBの画像は全てwebpを使いましょう！」という流れが来るかもしれません…。
svg（エスブイジー）※1
拡張子：.svg
WEB向きの拡張子。画像を表示するためのコードがファイルにまとめられている形式なので、ブラウザが処理することによって画面に表示できるようになっています。画面幅に応じてブラウザがサイズ調整してくれるので、いくら拡大しても画質の劣化が生じない形式です。主にHPにアイコンやロゴを表示する際に使われます。
TIFF（ティフ）
拡張子：.tif
高画質なデータを取り扱いたい際に使われます。無圧縮のデータとして保存できるため、画像を編集するたびに画質の劣化が起こることがありません。ただし、ファイルサイズが重くなりやすいのでwebでの使用やデータ転送などには向いていません。また、汎用性が高くないため、最終的にjpgやpngに変換して使用することが多い印象です。
画像の送信方法について
画像データをまとめて送るときにエクセルやパワーポイント※2を使った経験がある人もいるかもしれませんが、その方法はおすすめできません。なぜなら元データがさらに圧縮されてしまうからです。解像度が保たれたもので制作を進めたい場合は、できるかぎり画像データ単体で送りましょう。ファイル数が多い場合は、ギガファイル便やグーグルドライブなどのクラウドストレージを使うと便利です。セキュリティの問題もあると思いますので、場面ごとににあった方法で試してみてください！
おわりに
なんとなく、画像データを送ったり貰ったりしているけど、実際どういう違いがあるのかなぁという動機で調べてみましたが、目的にあった拡張子選びをするべきだなと実感しました。他にもRAW形式やPSD形式など色々ありますが、今回はよく使われる画像形式をピクアップして紹介してみました！
※1印刷で使用する場合は、CMYKと呼ばれる色情報で制作するため、jpegかpsdが推奨されます。png、gif等はCMYKモードを使えないので印刷物には適さないのでご注意ください。（psdについてはまた後日紹介しようと思います）
※2パワーポイントの場合は、設定で画像の解像度を落とさない設定がありますが、設定を忘れることもあると思うので、やはり画像データは画像データとして送る方が良いと思います。
この記事が気に入ったらサポートをしてみませんか？