画像を扱うなら覚えて得する5つのこと Part1

商品やサービスの紹介に【画像】は無くてはならない存在ですが、今やその画像もデジタルの技術無しには成り立たないと思われるぐらい使われています。しかしデジタル画像のことをちゃんと理解して使っているという人はどれくらいいるのでしょうか。ネットショップなどの商品画像でも「これが良い画像ならもっと売れるだろうに…」というものもよく見かけます。非常にもったいない。

今回は「デジタル画像」の特性を理解していただことで、あなたがもっと効果的に画像を扱えるようになっていただきます。

デジタル画像のことを知っておくと、どんな良いことがあるのか

商品やサービスをより魅力的に見せられるようになる
画像関連のトラブルをいち早く発見し、修正ができるようになる
適切な活用でウェブサイトのパフォーマンスを上げることができるようになる
あなたが画像から伝えたいことを、ちゃんと伝えられるようになる

基本1画像の形式と特性を知る

「JPEG形式でファイルを送ってください」と言われて、あなたが困るということは少ないと思いますが、なぜそのファイル形式なのか理解して使っていますか？画像ファイル形式ごとの特性を知っておくことは、デジタル画像を扱うのであれば知っておきたいものです。

それ以前に「ファイル形式」について理解しておく必要がありますので、最初に簡単に説明します。PCを扱う人の意識・無意識に関係なく、ファイル形式は必ず知っておかなくてはならないことです。もし私の説明で足りないようであれば、参考になるサイトを紹介しますので、そちらもご覧になってみてください。

☆ファイル形式とは

※ファイル形式のことを「ファイルフォーマット」とも言うこともあります。同じ意味と捉えて良いでしょう。ここでは表記を「ファイル形式」で統一します。

ファイルは大きく「プログラムファイル」と「データフィアル」に分かれています。プログラムファイルとは、OS(オペレーティングシステムの略称。windows10やmac osⅩのこと)やワープロソフト、表計算ソフトなどを動かすためのファイルです。「ソフト」というとイメージがしやすいかもしれませんね。このファイル形式はプログラミングの勉強したいとか、ソフトを作る仕事をしたいという人でなければ形式を知っておく必要性は低いでしょう。

その一方で、データファイルはワープロソフトで作った文書や今回のテーマである画像自体のことをいいます。「データ」と一般的には言っているかもしれません。当然このデータファイルにもいろいろなファイル形式があります。そのファイル形式を識別するのがファイル名の後ろに付いている「.jpeg」や「.png」であり、総称して「拡張子」といいます。この拡張子があることで、PCはそのファイルが何のファイルなのかがわかるようになっています。お使いのPCによっては初期状態で拡張子が表示されていないものもありますので、業務としてPCを使うのであれば表示させるように設定しておくと、何かと便利でしょう。

※画像以外のファイル形式も紹介するとなると数が膨大になってしまいますので、あくまでも画像形式(のそのまた一部)のみご紹介とします。

では、前置きが長くなりましたが画像のファイル形式の代表的なものと、各ファイル形式の特性についてご説明いたしましょう。

JPEG(.jpeg) 　

画像のファイル形式としては一番メジャーと言えるのではないでしょうか。「ジェイペグ」と読みます。デジタルカメラの多くはこのファイル形式を採用しています。その理由としては、ファイルサイズを小さくする技術(圧縮)の性能が高いため、保存領域を有効に扱えるということと、写真の命である色をフルカラーで表示できるということが大きいでしょう。

PNG(.png)

「ピング」と読みます。透過が使えるということが一番の特徴でしょう。「透過」とは、画像は四角の枠の中すべてに情報を持ちますが、例えば商品画像のみを表示させたいというときに商品画像以外の部分、つまり背景が邪魔です。そこで、画像処理ソフトを使用し商品画像のみを切り抜き、商品以外の部分を透明にしておくことを透過させるといいます。ただし、表示されるのは商品画像のみですが、画像を囲う仮想の枠は存在しますので、注意してください。

このファイル形式もフルカラーで画像を表示できるものの、比較的ファイルサイズが大きくなってしまうというところがウィークポイントともいえます。なお、PNGは可逆圧縮という技術を採用していますが、詳細は省略しておきます。

GIF(.gif)

「ジフ」と読みます。このファイルの一番の特徴は、アニメーションが使えるということでしょう。簡単に言うと動きのある画像が扱えるということです。また、ファイルサイズが小さくて済むため、ウェブサイトにも多く使わています。ただし使える色の数が256色と少ない(フルカラーは1677万色)ため、画像には好ましいといえず、ロゴやイラストといった比較的色の使用が少ないものに使われます。圧縮の技術はJPEGと同じ非可逆圧縮です。

その他

ウェブサイトで使われるファイル形式として、上記の3つをおさえておけば最低限の運用は可能ですが、それ以外にも最近多く使われるようになってきたものなど、多数の画像ファイル形式が存在します。簡単に特徴を説明した一覧を作りましたので、目を通しておいてください。

拡張子	読み方	特徴	主な用途
.bmp	ビットマップ	圧縮されず高画質、歴史のある形式	現在は使用されることが少ない
.pict	ピクト	mac OSが標準でサポートしていた形式	現在は使用されることが少ない
.psd	ピーエスディー	Photoshopの基本形式。レイヤーを保持することができる	完成前のデザインで修正が再度入ることが予想される場合
.svg	エスブイジー	大きくしても画像が乱れない	ロゴ・アイコン
.tiff	ティフ	高画質・非圧縮	プリント写真

基本2解像度を理解して適切な配置をする

あなたがもしECサイトの担当者であれば、必ず商品やサービスの画像をサイト上に掲載していると思います。その時「商品画像を載せてみたものの、なんかボヤッとして見えるなぁ」なんて思ったことはないでしょうか？それがまさしく解像度の不理解による弊害です。

「解像度」といういうと、難しいイメージをお持ちかもしれません。「サイズ(大きさ)」と同じような意味と思われることが多いですが、実際には違います。解像度を理解することで、あなたの画像表現力は格段に上がりますから、ぜひ理解しておいてください。

「解像度」あえて言葉で可能な限り端的に説明すると

「特定の範囲内に、どれくらいの細かさの情報を表示しているか」

といえます。やはりイメージがしづらいと思いますので、イラストでも説明しておきましょう。

【解像度】

【画素数】

左(もしくは上)の図が画像の細かさ、つまり解像度です。１インチあたりにどれくらいのピクセルが入っているかを表しており、イラストでは１インチに100個のピクセル(10px × 10px)が入っているので、「100ppi」と表示します。ppiとは「pixle per inch」の省略形です。ppiに似た表現に「dpi(dot per inch)」がありますが、こちらは１インチの中に１ドット(ひとつの点)がいくつ打てるかを表しているものであり、主にプリンターの性能表現に使われます。なお、PCのスクリーン(画面)は72ppiですが、紙などへの印刷で美しく見せる為に必要な解像度は350ppi(※)が基準となっています。

※350ppiはひとつの目安であり、絶対に必要というものではありません。遠くから見ることを目的とした大きいポスターなどは150ppiということもあります。

そして間違えやすいのが右(もしくは下)の図です。「画素数」というとなじみ深いですね。このイラストでは縦に４８列、横に６４列ありますので、3072画素です。イラストでの表現をするために48px × 64pxと少ない数字にしましたが、例えば約800万画素のデジタルカメラの場合は3456px × 2304pxと、性能向上と共に大きい数字になっていきますので、1枚の画像のサイズも当然大きくなります。

解像度について理解できたでしょうか。先述した「何となくボヤッと見える」という原因は、画像の細かさ、もしくはサイズの設定が自分が表示したいサイズより小さい(粗い)からということがわかると思います。必要とする解像度と大きさを明確にし、設定してください。

では、そろそろ長くなってきたので、ここで小休止。ページを分けたいと思います。

次回は残りの3つの解説をいたします。