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. WordPressの初期設定で最低限押さえておきたい2つのポイン…

    レンタルサーバーとドメイン、FTPクライアントを準備し、インストールするだけで手軽に利用できるWor…

  2. Web運用を委託した方がいい企業5つの特徴!!と、1つの注意点

    Webサイト運用って何かと手間がかかるので、出来れば制作会社に委託したいと考えている企画担当の方が多…

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

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

  4. モックアップやサンプル画像、アプリなどに使える無料PSDファイル…

    プレゼンテーションや打ち合わせの際、具体的なイメージを共有するのに非常に役立つモックアップ。限られた…

  5. Webサイトの制作スケジュールを見える化&一元管理。無料ガントチ…

    Webディレクターのメイン業務の1つであるスケジュール管理。クライアントに加えてプロデューサーや外部…

  6. ユーザーの7割が直帰する?ファーストビューの効果的な改善その1

    Webサイトで最も大切な要素の1つが、訪問したユーザーが最初に目にするファーストビューです。あるWe…

  7. 「オウンドメディアって何?」意外と知られていないトリプルメディア…

    「オウンドメディアって最近よく聞くけど、どんなもの?」。この質問に正確に答えられるWebディレクター…

  8. 「まだ東京で消耗してるの?」に学ぶ、オウンドメディア成功の秘訣

    オウンドメディアの重要性が指摘されるなか、注目を集めているのが管理人・イケダハヤト氏によるWebサイ…

PICKUP

PAGE TOP