インターネットビジネス最新情報ポータル IBNIP

Webデザイナーなら知ってて当然!今更聞けない画像の知識と使い方

Webデザインにおいて、画像の知識は欠かせないものです。

しかし、初心者の頃から何気なく画像を扱っていて、実は画像についてよく知らないままという方もいるかもしれません。

今回はWebデザインの基礎となる、画像の保存形式や、最新のWebデザインと解像度の関係についてなど、今更聞けない画像に関する基礎知識を解説します。

Webデザインで使われる画像の種類

Webデザインでよく使われる画像の保存形式は、JPG・GIF・PNGの3種類です。

Webデザインをする上で、どの保存形式を使うのがいいか迷った経験はありませんか?

これらの保存形式はそれぞれ違った特徴があります。JPG・GIF・PNGそれぞれのメリットとデメリットについてまとめました。

写真やグラデーション画像ならJPG

JPG(JPEG)は、フルカラーで1677万色まで表現することが出来るので、写真のような色数の多い画像に向いた保存形式です。

そのため、一般的なデジカメやスマートフォンの画像の多くはこのJPG形式で保存されます。

一般的に画像に使用している色数が多ければ多いほど画像のサイズが大きくなりますが、JPGは非可逆圧縮というデータ圧縮方法が用いられているため、人間の目でとらえにくい部分を圧縮して画像のサイズを小さくすることができるのがメリットです。

しかし、JPGは色の変化が少ない画像や、色数の少ないシャープな画像の保存には向きません。画像を圧縮する事でノイズが入ってしまい、汚くなってしまうのです。

また、JPG形式で同じ画像を何度も保存するとどんどん圧縮率が上がり、画質が落ちるというのもデメリットです。

ロゴやアニメーションならGIF

GIFは、JPGと並んで古くから扱われてきた保存形式です。

モノクロ2色から最大256色までの画像を表現できるため、ロゴやアイコンのような色数が少ない画像に適しています。圧縮率も高く、画像サイズを小さくすることも可能です。

また、GIFは特定の色を透明化して透過GIFを作ることができます。

さらに、GIFはアニメーション設定ができるため、動きのある画像を作ることができます。これらのメリットから、GIFは多くのWebデザイナーに重宝されてきました。

GIFのデメリットは、最大で256色までしか表示できないため、写真やグラデーション画像が苦手なことと、完全な透明化はできても、半透明にすることができないことです。

特に、直線で構成されたイラスト以外の画像の透過はGIFにはあまり適していません。円形のような画像では、透過された画像のふちが汚くなってしまう場合があります。

イラスト画像ならPNG

PNGは、JPGやGIFと比べて比較的新しい保存形式です。

JPGと同様にフルカラーの表示が可能なことと、GIFでは対応できなかった半透明処理が行えることがメリットです。

JPGとの最大の違いは、PNGは可逆圧縮方式なので、保存しても品質が劣化しないことです。

ただし、同じ写真画像をJPGとPNGでそれぞれ保存してみると、PNGのサイズはJPGの2倍ほどに大きくなってしまいますので、写真のような細かい画像には不向きです。

また、最近ではPNGに対応しているブラウザがほとんどですが、PNGは新しい保存形式のため、古いブラウザには対応していない場合があります。

シーン別に保存形式を使い分けよう

JPG・GIF・PNGは、それぞれに得意分野があります。Webサイト制作で効果的に画像を使うには、画像のテイストに合わせた保存形式選びが大切です。

  • 写真画像を扱う時は「JPG」
  • ロゴやアイコンなど、単純な画像は「GIF」
  • 切り抜き写真や色数の多いイラストは「PNG」

このような使い分けがおすすめです。

Webサイトで使う画像の解像度とは?

Webサイト用に画像作成する上で欠かせないのが、解像度の設定です。

解像度とは、ppi(pixel per inch)もしくはdpi(Dot Per Inch)という単位で表される画像の密度のことです。

ppiもdpiも意味合いはほとんど変わらず、1インチあたり何ピクセル(何ドット)の密度があるかという事です。

一般的にはWebデザインではppi、紙媒体のデザインではdpiを単位として用いることが多いようです。

Retinaディスプレイに対応した解像度の重要性

一昔前までは、Webサイトに使う画像の解像度は72ppiといわれていました。

これは、今まで一般的に用いられていたディスプレイなら、ほとんどの場合解像度が72ppiあればそれほど見え方が変わらなかったからです。

しかし、Retinaディスプレイをはじめとした高解像度ディスプレイが登場したことで、Webサイトで使う画像の解像度にも変化の波が訪れました。

これまでのディスプレイはディスプレイの物理的なドット数と、実際に表示されるドット数は基本的に同じでした。

しかし、Retinaディスプレイをはじめとした高解像度ディスプレイは、ディスプレイの物理的な解像度に対して、実際に表示できるドット数がより小さくなります。

これがどういう効果を生むかというと、従来の1ドットで表示されていたものが、より細かいドット数で表示できるようになります。

そのため、高解像度ディスプレイは同じ画像でもより画像が鮮明に表示できるのです。

多様化するディスプレイの進化に合わせた画像作成

Retinaディスプレイをはじめとした高解像度ディスプレイは、スマートフォンだけでなくあらゆるデバイスに広がっています。

そのため、これからのWebデザイナーには多様化する高解像度ディスプレイの進化に合わせた画像作成の知識が求められます。

従来のディスプレイであればディスプレイと等倍の解像度で画像を作成すればよかったのですが、Retinaディスプレイに対応した画像を作成するには、ディスプレイに合わせた解像度が必要です。

これをデバイスピクセル比といい、デバイスピクセル比が2であれば、従来のディスプレイの2倍高精細な画像が表示できることになり、作成する画像のサイズも2倍になります。

もちろん、Webサイトを訪れるユーザーがどんなディスプレイを使っているかはわかりません。

そのため、これからのWebサイトには、様々なディスプレイに対応する画像を用意した上で、imgタグやCSSメディアクエリなどを使って、デバイスに合わせた画像を呼び出せるようなレスポンシブデザインが必須となります。

まとめ

Webデザイナーにとって、画像に関する知識は最も基本的なものです。

しかし、Web業界やデバイスが進化する事で、Webデザインで使用する画像を取り巻く環境は急激に変わりつつあります。

しっかりと画像に関する基礎知識を身につけて、新しい時代のデザインに対応したWebサイトを作れるようになるのが、これからのWebデザイナーに求められるスキルのひとつになります。

[記事公開日]2018.03.23
[最終更新日]2018.10.04
[ライター]首藤