制作・運用ミニTIPS

seedポイント！

・WEBサイトで使われる画像フォーマットはgif、jpg、pngの3種
・特徴は「容量」「カラー数」「透過」「アニメーション」の4つをチェック
・用途を検討して適した箇所に各画像フォーマットを利用

日常的に当たり前に利用しているこの画像形式、全て画像圧縮フォーマットの種類になります。

あらためて特徴は？と聞かれると正しい情報を答えられる方が意外と少ない印象を受けます。

ポイントはこの「容量」「カラー数」「透過」「アニメーション」の4つ。

jpgは、容量が少なく、カラーは滑らか、ただし透過とアニメーションは不可。

「容量」○「カラー数」○「透過」×「アニメーション」×

pngは、容量が大きく、カラーは滑らかで背景が透明の処理、透過が可能でアニメーションは不可。

「容量」△「カラー数」○「透過」○「アニメーション」×

gifは、容量が少なく、カラー数（256色）も少ないのでグラデーションなどには不向き、ただし透過と画像を何枚も切り替えるアニメーションが可能。

※jpg、pngは16,777,216色

「容量」○「カラー数」△「透過」○「アニメーション」○

このような特徴があるので、WEBサイトの表示する箇所で画像を使い分けます。

たとえば、背景の透過処理ができるpngは、アイコンに利用したり、大きな背景画像には容量が軽いjpgを利用。

イラストレーションを少し動かしてキャッチーにとあればgiアニメーションに。

運営時、ブログ投稿、SNS投稿に使用する画像も用途を考え画像形式を選択してみてはいかがでしょうか。

シードでは、WEBサイト制作の基本～プロスキルまで様々なアドバイスでサポートします。

興味がありましたらぜひお問い合わせください。