このページの本文へ

Webサイト制作で使う画像フォーマットの基本

2011年09月07日 11時00分更新

文●高橋 仁/クロスコ

  • この記事をはてなブックマークに追加
本文印刷
web-keyword

 Webサイトの制作では、主に、JPEG/GIF/PNGの3種類の画像フォーマットが使われます。いずれも主要なWebブラウザーで表示でき、画質を保ちつつファイルサイズを小さく抑えられる画像形式であることから、利用されるようになりました。3つの画像形式にはそれぞれ特徴があり、用途によって使い分けがされています。

JPEG形式の特徴と扱い方

 JPEG形式はフルカラーに対応していて、色数を減らさずにファイル容量を圧縮できるので、写真を扱うのに適しています。

 JPEGの圧縮方式は非可逆(一度圧縮したものはもとに戻らない)のため、事前に容量と画質のバランスを見ながら圧縮比を試したうえで作業するとよいでしょう。なお、画像の元素材が印刷物の版下データなどだった場合、Webブラウザーで表示できないCMYKモードになっていることがあります。その場合は、Photoshopなどの画像編集ソフトでRGBモードに変換する必要があります。

GIF形式の特徴と扱い方

 GIF形式は、表示する色数を256色以下に減色して圧縮する方式で、データ容量を小さくできます。256色までの任意の色を割り当てられるので、同一色が連続する画像では圧縮率が高くなり、ボタンやナビゲーションなどのページのデザインパーツやイラストなどの表示に適しています。

 1つのファイルに複数の画像を持ち、パラパラマンガのように表示するGIFアニメーションという仕様もあり、バナー広告の入稿フォーマットにもよく使われています。

PNG形式の特徴と扱い方

 PNG形式は、Web用の画像フォーマットとして開発されたもので、現在ではほとんどのブラウザーがサポートしています。8bit(PNG-8)と24bit(PNG-24)を選択でき、8bitの場合はGIFと同様に256色でのグラフィックス表示に適した保存ができます。24bitでは、フルカラーの写真が保存できるほか、透過色を持たせられます。なお、PNGは可逆圧縮のため、JPEGよりデータ容量が重くなる傾向にあります。

 原則的な使い分けは以上ですが、実際のサイト制作やコーディングの際には、全体の構成を考慮しつつ、どのフォーマットをどこに使うか、Webディレクターがルールを決める必要があります。制作を指示するときに迷わないよう、ディレクターはそれぞれのフォーマットの特性や違いをよく理解しておくことが重要です。

著者:クロスコ

クロスコは、映像技術とコミュニケーション支援のサービスドメインを持ち、Webサイト、動画・映像などを組み合わせたクロスメディアプロモー ションを、ワンストップで実現してきました。アナログ停波後のデジタルメディアの多様化、ソーシャルメディアのコミュニケーションにも先立って対応 し、あらゆるタイプのマルチデバイス、マルチスクリーンのコンテンツの制作・開発・サービス提供を行なっています。こうした先進のノウハウにより企業の皆様にこれから必用とされる新しいコミュニケーションの形を、戦略からご提案・提供してまいります。

■関連サイト

書影

書籍版は、企画・設計・制作・運用など、Webディレクション業務の大まかな流れに沿って構成。最新情報を盛り込み、書き下ろしのコラムや用語集も収録しました。ずっしり重い1030g、厚さ19.5mmで、苦手分野を穴埋めしたい新米Webディレクターや、これからWebディレクターを目指す方におすすめの1冊です。

Webディレクション標準スキル152

本体 4,280円+税、AB判392ページ(オール4色刷)
ISBN:978-4-04-868746-1

Amazon.co.jpで買う 楽天ブックスで買う

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています