画像ファイル形式の使い分け

 


キャストの写真を撮影したけど、保存する画像形式は何がいいのかな?
イベント用の宣伝画像を作ったけど、どの形式で保存したらいいんだろう?
写真の編集作業をして保存したら、なんか画質が荒くなった気がする…

こんな経験はありませんか?

普段なにげなく保存やコピーするファイル形式ですが、その種類ごとに適した分野があるのです。
せっかく手間をかけて編集したのに保存してみたら台無しになったら悲しいですよね。
今回の記事では一般的なHPで使用する画像のファイル形式について簡単にまとめてみます。

「〇〇の形式は可逆圧縮だからうんぬん~~」などの説明は使う側にとっては必要ない部分ですし、ここではWEB上で画像を表示するのに知っておきたい要点だけを紹介しています。

面倒な説明とかいいから結論だけ知りたい場合は下にまとめがありますので、そちらへどうぞ。

よく使われるファイル形式ってなんだろう?

画像を保存した時に、名前の後ろにファイルの形式を表すアルファベットが並びますよね。

「alsystem.jpg」「alsystem.mp3」などなど。これらは拡張子と言われています。

ファイルの種類を表す品番のようなイメージで考えてもらえればいいと思います。
車のエンジン形式のようなイメージが近いかもしれませんね。
似た品番だけど微妙な違いがあるような。

たくさんの種類がある拡張子ですが、一般的なHP制作でよく使われる画像の拡張子は数種類です。

具体的には GIF・JPG・PNG の3種類が主に使われています。

みなさんが作業をする時に画像のファイル形式で悩むのも上の3つではないでしょうか?
この代表的な3種類の使い分けを簡単にまとめていきます。

GIF

現在はほとんど使われていません。

使用できる色数が少なく、写真の表示には適しません。
その反面、データ容量が非常に軽いので簡単なアニメーション等の表示に適しています。

もし使う機会があるとすれば…イベントページ内でまねき猫の画像を動かしたり、夏をイメージさせる画像で花火を打ち上げたりといった用途でしょうか。

JPG(JPEG)

写真や色数の多い画像の表示に適しています。

携帯カメラなどで写真を撮影した場合、ほとんどの機種はJPG形式で保存されるはずです。
JPGは画質の操作ができるので、他の形式では大き過ぎる場合に意図的に容量を軽くする事が可能です。

しかし、JPGでの保存を繰り返すと画質が劣化してしまうので注意しましょう。

PNG

HP上の画像・写真の表示に適しています。

フルカラー表示・透過処理ができるなどの特徴があります。
加工や編集を繰り返しても基本的には画質が落ちることはありません。
GIF・JPGに比べてデータ量が多くなりがちですが、逆に言えばデータ容量を気にしなくてもいいような環境では、PNG形式を選べば閲覧者にキレイな画像を提供できるという事です。

またPNGにはpng-8とpng-24という種類があります。
png-8はデータ量が少ない劣化版ですが、256色で表現するため、当然画質が落ちます。

現在のスマホやPC環境でpng-8を使う機会はほぼ無いと言っていいのではないでしょうか。

下の画像は加工前の写真単体はJPGで撮影されています。
それをPSで加工した後、HP上で使う為に書き出すファイル形式はPNGを使用しています。

つまり店舗HPで使う画像形式は何を選べばいいの?

PNG(png-24)です。

HP上で使う画像や広告画像を保存する時に、迷ったらPNGで保存しておけば間違いありません。

一般的なスマホやPCで自店舗のHPを表示した時に、あまりにも重くて表示が重いようならデータを軽くする為に、他の形式を使う事を検討してもいいかもしれませんが、そういった特別な状況がない限りはPNGを選択すれば問題ないでしょう。

要点をまとめると…写真はJPG・加工してHPにあげる時はPNGです。