商品やサービスの紹介に【画像】は無くてはならない存在ですが、今やその画像もデジタルの技術無しには成り立たないと思われるぐらい使われています。しかしデジタル画像のことをちゃんと理解して使っているという人はどれくらいいるのでしょうか。ネットショップなどの商品画像でも「これが良い画像ならもっと売れるだろうに…」というものもよく見かけます。非常にもったいない。
今回は「デジタル画像」の特性を理解していただことで、あなたがもっと効果的に画像を扱えるようになっていただきます。
- 商品やサービスをより魅力的に見せられるようになる
- 画像関連のトラブルをいち早く発見し、修正ができるようになる
- 適切な活用でウェブサイトのパフォーマンスを上げることができるようになる
- あなたが画像から伝えたいことを、ちゃんと伝えられるようになる
基本1画像の形式と特性を知る
「JPEG形式でファイルを送ってください」と言われて、あなたが困るということは少ないと思いますが、なぜそのファイル形式なのか理解して使っていますか?画像ファイル形式ごとの特性を知っておくことは、デジタル画像を扱うのであれば知っておきたいものです。
それ以前に「ファイル形式」について理解しておく必要がありますので、最初に簡単に説明します。PCを扱う人の意識・無意識に関係なく、ファイル形式は必ず知っておかなくてはならないことです。もし私の説明で足りないようであれば、参考になるサイトを紹介しますので、そちらもご覧になってみてください。
☆ファイル形式とは
※ファイル形式のことを「ファイルフォーマット」とも言うこともあります。同じ意味と捉えて良いでしょう。ここでは表記を「ファイル形式」で統一します。
ファイルは大きく「プログラムファイル」と「データフィアル」に分かれています。プログラムファイルとは、OS(オペレーティングシステムの略称。windows10やmac osⅩのこと)やワープロソフト、表計算ソフトなどを動かすためのファイルです。「ソフト」というとイメージがしやすいかもしれませんね。このファイル形式はプログラミングの勉強したいとか、ソフトを作る仕事をしたいという人でなければ形式を知っておく必要性は低いでしょう。
その一方で、データファイルはワープロソフトで作った文書や今回のテーマである画像自体のことをいいます。「データ」と一般的には言っているかもしれません。当然このデータファイルにもいろいろなファイル形式があります。そのファイル形式を識別するのがファイル名の後ろに付いている「.jpeg」や「.png」であり、総称して「拡張子」といいます。この拡張子があることで、PCはそのファイルが何のファイルなのかがわかるようになっています。お使いのPCによっては初期状態で拡張子が表示されていないものもありますので、業務としてPCを使うのであれば表示させるように設定しておくと、何かと便利でしょう。
※画像以外のファイル形式も紹介するとなると数が膨大になってしまいますので、あくまでも画像形式(のそのまた一部)のみご紹介とします。
では、前置きが長くなりましたが画像のファイル形式の代表的なものと、各ファイル形式の特性についてご説明いたしましょう。
JPEG(.jpeg)
PNG(.png)
このファイル形式もフルカラーで画像を表示できるものの、比較的ファイルサイズが大きくなってしまうというところがウィークポイントともいえます。なお、PNGは可逆圧縮という技術を採用していますが、詳細は省略しておきます。
GIF(.gif)
その他
ウェブサイトで使われるファイル形式として、上記の3つをおさえておけば最低限の運用は可能ですが、それ以外にも最近多く使われるようになってきたものなど、多数の画像ファイル形式が存在します。簡単に特徴を説明した一覧を作りましたので、目を通しておいてください。
拡張子 | 読み方 | 特徴 | 主な用途 |
.bmp | ビットマップ | 圧縮されず高画質、歴史のある形式 | 現在は使用されることが少ない |
.pict | ピクト | mac OSが標準でサポートしていた形式 | 現在は使用されることが少ない |
.psd | ピーエスディー | Photoshopの基本形式。レイヤーを保持することができる | 完成前のデザインで修正が再度入ることが予想される場合 |
.svg | エスブイジー | 大きくしても画像が乱れない | ロゴ・アイコン |
.tiff | ティフ | 高画質・非圧縮 | プリント写真 |
基本2解像度を理解して適切な配置をする
あなたがもしECサイトの担当者であれば、必ず商品やサービスの画像をサイト上に掲載していると思います。その時「商品画像を載せてみたものの、なんかボヤッとして見えるなぁ」なんて思ったことはないでしょうか?それがまさしく解像度の不理解による弊害です。
「解像度」といういうと、難しいイメージをお持ちかもしれません。「サイズ(大きさ)」と同じような意味と思われることが多いですが、実際には違います。解像度を理解することで、あなたの画像表現力は格段に上がりますから、ぜひ理解しておいてください。
「解像度」あえて言葉で可能な限り端的に説明すると
といえます。やはりイメージがしづらいと思いますので、イラストでも説明しておきましょう。
左(もしくは上)の図が画像の細かさ、つまり解像度です。1インチあたりにどれくらいのピクセルが入っているかを表しており、イラストでは1インチに100個のピクセル(10px × 10px)が入っているので、「100ppi」と表示します。ppiとは「pixle per inch」の省略形です。ppiに似た表現に「dpi(dot per inch)」がありますが、こちらは1インチの中に1ドット(ひとつの点)がいくつ打てるかを表しているものであり、主にプリンターの性能表現に使われます。なお、PCのスクリーン(画面)は72ppiですが、紙などへの印刷で美しく見せる為に必要な解像度は350ppi(※)が基準となっています。
※350ppiはひとつの目安であり、絶対に必要というものではありません。遠くから見ることを目的とした大きいポスターなどは150ppiということもあります。
そして間違えやすいのが右(もしくは下)の図です。「画素数」というとなじみ深いですね。このイラストでは縦に48列、横に64列ありますので、3072画素です。イラストでの表現をするために48px × 64pxと少ない数字にしましたが、例えば約800万画素のデジタルカメラの場合は3456px × 2304pxと、性能向上と共に大きい数字になっていきますので、1枚の画像のサイズも当然大きくなります。
解像度について理解できたでしょうか。先述した「何となくボヤッと見える」という原因は、画像の細かさ、もしくはサイズの設定が自分が表示したいサイズより小さい(粗い)からということがわかると思います。必要とする解像度と大きさを明確にし、設定してください。
では、そろそろ長くなってきたので、ここで小休止。ページを分けたいと思います。
次回は残りの3つの解説をいたします。