ここから本文です

お使いのInternet Explorerは古いバージョンのため、正しく表示されない可能性があります。最新のバージョンにアップデートするか、別のブラウザーからご利用ください。
Internet Explorerのアップデートについて

ウェブ画像はPNG? JPEG? 新人Web担当者に伝えておきたい使い分けの基本

4/17(火) 11:01配信

Web担当者Forum

今日は、新年度シリーズとして(続くのかな?)、ウェブで使う画像の基本に関する情報をお届けします。お題は「PNG? JPEG? GIF?」どんなときにどのファイルフォーマットを選ぶべきかの基本です。

結論から言うと、ウェブ画像(動画ではない静的な画像)の基本は次のとおりです。


●写真(自然物)はJPEG


●画面キャプチャ(人工物)はPNG(しかも8bit PNGにして減色する)


●次のものは様子をみながら8bit PNGとJPEGで最適なものを選ぶ

・自然物と人工物が混じったもの(写真が使われているサイトの画面キャプチャ)
・グラデーションが入っている画面キャプチャ
・写真でも色数が少なくてパターンが直線的なもの

 

Web画像は「キレイで」「大きくて」「軽い」が命

ウェブサイトに画像は付き物です。ビジュアルに魅力を訴求することで、テキストだけのコンテンツよりも効果が増します。

しかし、画像というものは、キレイで大きくしようとすると、ファイルサイズが大きくなりがちです(これを業界では「重い」と表現します)。

・画像のサイズ(縦横サイズ)が大きいほど、重くなる
・画像内で使われている色数が多いほど、重くなる
・画像が複雑であるほど、重くなる

そのためサイト運営側としては、画像の利用では次のようなことを意識しなければいけません。

●きれいで大きな画像は、重くなりがち
●重い画像がページ内にあると、
・ページ表示に時間がかかるようになります
・となると、ページ訪問者はイライラしてページを離れてしまいます
・さらにページ訪問者のギガを消費して嫌われます


そのためWeb担当者は、可能な限り「キレイで」「大きくて(縦横のサイズ)」、かつ「できるだけ軽い(ファイルサイズが小さい)」画像を実現したいところです。

 

Webの画像はPNGとJPEGが基本。理由は見栄えと軽さ

では、どうすればいいのでしょうか。

それは、「画像にあった適切な画像ファイルフォーマットを選ぶ」です。

「画像ファイルフォーマット」とは、画像の表現をファイルに保存してあとから再現する仕組みのことです。ウェブで利用する画像フォーマットはいくつかあり、多くの場合はファイル名の最後の「拡張子」で判断できます。

基本的な画像ファイルフォーマットには次のようなものがあります。

・PNG(ピーエヌジー)、拡張子は「.png」
・JPEG(ジェーペグ)、拡張子は「.jpg」や「.jpeg」
・GIF(ジフ)、拡張子は「.gif」
・TIFF(ティフ)、拡張子は「.tiff」
・BMP(ビットマップ、ビーエムピー)、拡張子は「.bmp」

現在の画像フォーマットは基本的に「できるだけ画質を落とさずにファイルサイズを小さくする」ために作られており(「圧縮」と呼ばれます)、フォーマットによって「こういうタイプの画像に向いている」「こういう性質がある」という違いがあります。その違いを理解して、合った画像フォーマットを選ぶのが大切なのです。

ではウェブではどんな画像フォーマットを使うのがいいのでしょうか。

現状では、手動で画像ファイルを扱う場合は「PNG」と「JPEG」だけに絞って問題ありません(静的な画像、つまり動画ではない場合)。

そのほかの「GIF」「TIFF」「BMP」などは、まず気にする必要がありません。ほかにも「PSD」「PSP」「PICT」「WEBP」「HEIF」などもありますが、これらも今は気にしなくてもいいです。

 

1/4ページ

最終更新:4/17(火) 11:01
Web担当者Forum