menu

画像のタイプ・特徴にあわせて使い分けたいgjf、jpg、png

ディレクター心得

Webサイト制作で画像を取り扱ううえで意外のおろそかになりがちなのが、画像の保存形式です。プロのフォトグラファーに頼んで撮影したクオリティの高い画像でも、最適な保存形式を選ばなかったり、不用意にコピーを重ねたりすると、画質が荒くなってしまったり、表示速度の面で思わぬデメリットが生じてしまうことも少なくありません。Webサイト制作で一般的に使われることの多い、gif、jpg、pngそれぞれの特徴をご紹介します。

・ロゴやアイコンなどシンプルな画像の保存に適したgif
最大256色まで保存でき、容量も小さく抑えられるgif。自然風景や人物写真、複雑なグラデーションなどを保存するのには向いていませんが、たくさんの色を必要としないシンプルな画像を取り扱う場合には最も適した保存形式です。

ロゴやアイコンのほか、イラスト、ECサイトで使われる予約・購入ボタンなどはgifで保存するのが有効です。また複数の画像を重ね合わせてアニメーションにすることもできるので、容量を押さえて短めの動画を作りたい場合にgifが用いられることもあります。

・フルカラー1677万色を保存できるjpg
シンプルな画像の保存に適したgifとは対照的に1677万色の色種をカバーし、複雑な画像の保存に向いているのがjpgです。フォトグラファーが一眼レフを使って撮影した画像もjpgを用いればほとんどの場合は画質を落とさずに保存することができます。その反面、線や色の境目が明確になるロゴやアイコンには向いていません。

jpg形式で画像を保存する際は圧縮率や保存の回数に注意する必要があります。jpgは圧縮率を高めることによって画像の容量を抑えることができますが、一度圧縮したjpgは元に戻せず、繰り返し保存を重ねた場合も画質が著しく低下します。

・さまざまなメリットがあるpngは容量に注意
gifとjpgそれぞれのデメリットを兼ね備え、利便性が高いのがpngです。色の種類を256色に抑えた形式とjpgと同様の1677万色をカバーする形式の両方に対応しているため、複雑な画像もシンプルな画像も問題なく扱うことができ、保存を重ねても画質が落ちることはありません。またpng形式の画像はWindowsのペイントで簡単な編集をすることもできます。

ただし、png形式の容量はjpgと比べて約2倍になります。とりわけ容量が大きい画像の場合は、jpgを利用するのも1つの方法かもしれません。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

WordPressのプラグインや「Googleアナリティクス」を活用した301リダイレクト

購買率が1.68倍UP。ECサイトに取り入れたい「短め」デモンストレーション動画

関連記事

  1. Webページの統一感がUP。クリック率改善も期待できるグリッドデ…

    既存のWebサイトの一部をリニューアルしたり、コンテンツを追加したりする場合、課題になってくるのがそ…

  2. オウンドメディアを成功させるために、Webディレクターがやってお…

    ブログなどの情報発信を続けることによって見込客を獲得し、ブランディングに成果をもたらすオウンドメディ…

  3. Appleのロゴにも活かされているデザインの「黄金比」とは?

    WordPressや各種フレームワークが普及し、ぐっと身近になったWebサイト制作。WordPres…

  4. 多種多様なメソッドも学べる、LP制作に使いたいフレームワーク3選…

    ユーザーの行動を喚起するランディングページにはストーリーの要素を加えるのが効果的ですが、もちろん方法…

  5. ジャンル・目的に合わせて幅広く利用可能。高品質なWebフォントサ…

    OSやデバイスを問わず制作サイドの意図通りのフォントを表示することができ、レスポンシブ対応にも相性の…

  6. 即戦力のコーディングチェックツール3選

    デザイナーへの発注やクライアントとの連絡・調整に加えて、Webページのコーディングをチェックするのも…

  7. ユーザーを後押し&安心感を与えるクロージング。LPの「ストーリー…

    ユーザーの願望に対する解決策だけでなく、その先にあるプラスアルファの価値を示し、裏付けや背景をあわせ…

  8. ツールを使って接客をシステム化。総合力に優れたWeb接客ツール3…

    シニア層のネットショッピングの利用拡大やECマーケットそのものの成長にあわせて、急速にニーズが高まり…

PICKUP

PAGE TOP