「JPG」「PNG」「GIF」の画像形式による違い

web

ウェブサイトに使用される画像形式には「Jpeg形式」「PNG形式」「GIF形式」の3種類があります。各形式に特徴があるので、用途に合わせて使い分けましょう。

各画像形式の特徴

JPEG形式

フルカラーが使用でき画像サイズも小さめです。しかし画像を上書き保存する度に画質が劣化していきます。特に画像サイズを小さくした場合はサイズに適した画質まで劣化します。画像を編集を多用する場合は、元画像を別にとっておくかPNG形式を使った方がいいでしょう。

用途:写真など

PNG形式

フルカラーが使用でき上書き保存しても画質は劣化しません。しかしファイル容量はJPEGに比べて大きくなります。編集が必要な画像の画質を落としたくない場合によく使います。また背景に透過処理を施せるため、サイトに画像を溶け込ませ易いのも特徴です。

用途:イラスト、写真など

GIF形式

使用できる色数が他に比べて落ちる反面、ファイル容量が小さいです。透過処理も施せるためアイコンやボタンなどによく使われます。また複数の静止画像を繋げて結合したパラパラ漫画式のGIFアニメを作れるのも特徴です。

用途:デザインパーツ、GIFアニメ


適切な画像フォーマットの選択はサイトの軽量化に繋がり、ユーザービリティの向上に繋がります。 用途に合わせた画像形式を使用しましょう。

eyecatch

PCサイトとスマホサイトの違い

eyecatch

windows環境でファイルの拡張子を表示させる方法

ウェブサイトの記事

eyecatch

デバイスのビューエリアや解像度でスタイルを切り替える方法

eyecatch

パーマリンク形式は「サイト名/記事名」に設定しよう

eyecatch

サイトのPV数を増やす3つの基本

eyecatch

絶対URLと相対URL

eyecatch

SSL/TLS・SSL証明書・認証局とは

eyecatch

robots.txtと書き方

ウェブサイトの記事一覧HOME