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. 読まれるコンテンツに欠かせない、分かりやすい文章の3つのポイント…

    良質なコンテンツを配信することによってユーザーの行動を喚起するコンテンツマーケティングが主流となった…

  2. スクロールエフェクトを実装できる、おすすめjQueryプラグイン…

    画面のスクロールにあわせて写真やサムネイル、テキストを自由に動かすことができるスクロールエフェクト。…

  3. フラットデザインにも相性抜群。スタイリッシュなWordPress…

    用途や目的にあわせて幅広く利用できるデザインテンプレート(テーマ)はWordPressの大きな魅力の…

  4. マイクロコンバージョンによってWebサイトを評価する際の2つのポ…

    Webサイトや広告のランディングページを改善する手法として最近注目を集めているマイクロコンバージョン…

  5. スマートフォンを意識したWebライティングのコツ

    ソーシャルメディアと相性が良いスマートフォンでは、質の高い記事がFacebookやTwitterで拡…

  6. 意外と簡単?Webフォントの利用方法とメリット&デメリット

    CSSを用いたWebサイトが一般的になり、多くのWebデザイナーに注目されているWebフォント。Go…

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

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

  8. メンバーへの共有もより簡単に。ワイヤーフレーム作成ツール3選

    クライアントを含め複数のメンバーが携わるWebサイト制作において、情報共有やプロジェクトの進行に大き…

PICKUP

PAGE TOP