JPEG、PNG、GIF、Webサイトで使う画像ファイル形式の違いをサクッと復習。方へオンライン講座PR記事についてお問い合わせ複数の「スマホ決済(QRコード決済)」を一括導入できる店舗向けサービスまとめホームWEB担当者ハックJPEG、PNG、GIF、Webサイトで使う画像ファイル形式の違いをサクッと復習。10スポンサーリンクWeb担当者として、当たり前になっている画像フォーマット。WebサイトやSNSなど画像を使わない日はありません。それぞれのファイル形式をテキトウに使ってしまったり、そういえば、どんな特徴があるんだっけと忘れてしまうこともあるかもしれません。一般的によく使われる「JPEG」「PNG」「GIF」の3つに絞って、復習がてらアウトプットしたいと思います。必要に応じてフォーマットを選ぼうJPEGまずはJPEG(ジェイペグ)です。ファイル拡張子は.jpgです。.jpegも同じですが、一般的には.jpgが使われています。JPEGはフルカラー(1670万画素)まで使うことができます。JPEGの良いところフルカラーが使えるので、写真やグラデーションに向いています(デジカメの画像データは.jpgが多い)また画像のファイルサイズを小さくしたい(軽くしたい)ときに便利なフォーマットです。使用する色が多い画像JPEGの注意点JPEGは、非可逆圧縮の画像形式で、データを圧縮する(保存する)際に、データを捨ててしまいます。そのため一度、圧縮してしまうと、圧縮前の状態には戻せません。画像サイズを小さくして保存をしたあとで、元のサイズに戻すと、画質がかなり悪くなります。繰り返すと、そのたびに画像が劣化します。圧縮率が高くなるほど、ファイルサイズが小さくなりますが、画像が劣化(↓の劣化テストの右側の画像)が大きくなります。写真でも試してみましょう。右側の画像が粗くなっているのがわかりますね。PNG続いてPNG(ピング)です。ファイル拡張子は.pngです。PNGは、JPEGとGIFの特徴を持つフォーマットで、フルカラー(PNG-24)にも、8bit(PNG-8/256色)にも対応しています。PNGの良いところPNGは可逆圧縮の画像形式です。画像を圧縮してもデータが残るので、JPEGのように保存するたびに画像が劣化することはありません。画像の一部を透過させる(透過度の調整も可能)ことができます。ロゴ画像で背景を透明にしたいような場合に適しています。PNGに適した画像ロゴイラスト透過画像PNGの注意点JPEGよりも高品質の画像を作ることができますが、そのぶんJPEGよりもファイルサイズが、大きく(重く)なりやすいです。同じ画像の場合、GIFよりもファイルサイズが小さくなります。GIF最後にGIF(ジフまたはギフ)です。