Resource Centerリソースセンター

Webサイトにおいて、画像は視覚的な魅力や情報伝達に欠かせない要素ですが、ページの読み込み速度や表示品質を向上させるためには、適切な画像フォーマットと解像度を選ぶことが重要です。
本記事では、Webサイトでよく使用される画像フォーマットとその特徴、適切な解像度について詳しく解説します。

ホームページで使う画像ファイルの種類

Webサイトでよく使用される画像フォーマットには以下のようなものがあります。

JPEG

JPEGは、写真やグラデーションなど色数が多い画像に適した画像フォーマットです。
ファイルサイズを小さくするのに適しており、色情報を減らすことでデータを圧縮します。圧縮率が高いほどファイルサイズは小さくなりますが、その分画質も劣化します。
また、JPEGは不可逆圧縮を採用しているため、一度圧縮した画像を元の状態に戻すことはできません。繰り返し編集・保存を行うと画質が徐々に劣化するため注意が必要です。

GIF

GIFは、色数を制限し、画像内のパターンを再利用することで効率的にファイルサイズを小さくすることができます。
最大で256色しか表現できないため、色数の少ないボタンやアイコン、シンプルなイラストに適しています。また、アニメーションや透過もサポートしています。
可逆圧縮を採用しており、画像を圧縮した後でも元の画質を保つことができます。

PNG

PNGは、透過と高品質な画像を提供するために開発された画像フォーマットです。
可逆圧縮を採用しており、データ情報が失われることはありません。JPEGに比べ、ファイルサイズは大きくなりますが、高品質な画像を維持することができます。
写真や透過画像、ロゴやアイコンなど、Web上で最も使用されている画像フォーマットです。

PDF

PDFは、テキストベースの形式であり、文字やフォント、スタイルなどテキスト関連の情報に加え、画像やグラフィックスもサポートしています。
パスワードの設定や暗号化、印刷や編集の制限などのセキュリティ機能を備えていることが特徴となります。
様々な媒体で作成や表示が可能で、オンラインドキュメントの共有や電子配布に広く使用されています。

SVG

SVGは、ベクター形式の画像であり、拡大縮小しても画質が劣化しません。
そのため、会社のロゴなどのように拡大縮小による劣化を避けたい場合や、レスポンシブデザインなど様々なサイズで使用される画像に適しています。また、テキストをそのまま表示できるため、検索機能も利用できます。
特にシンプルな図形やアイコンに適しており、効率的にファイルサイズを小さくすることができます。ただし、複雑なイラストや写真などの画像では、他のフォーマットに比べサイズが大きくなる傾向があります。
CSSやJavaScriptを使用して画像を操作したり、アニメーションを追加したりすることもできます。

WebP

WebPは、Web上で画像の表示速度を改善するために開発された画像フォーマットであり、JPEGやPNGなど従来の画像フォーマットに比べて高い圧縮率を持っています。
透過やアニメーションにも対応しており、様々な用途に利用することができます。
また、可逆圧縮と非可逆圧縮の両方をサポートしており、高品質なままデータサイズを小さくすることができるため、ロゴや写真、アイコン、アニメーションなどあらゆる場面で利用することができます。

その他

その他、ファイルサイズが大きかったり、ブラウザで対応していなかったりするため、Web上ではあまり使われませんが、データのやりとりなどでよく使われる画像フォーマットを紹介します。

BMP

BMPは、主にWindowsのオペレーティングシステムで使用されています。写真やディテールの細かい画像にも使用されますが、他のフォーマットと比べてファイルサイズが大きく、互換性もあまりないため、Web上ではあまり使用されません。

TIFF

TIFFは、可逆圧縮と非可逆圧縮の両方をサポートしており、高品質な画像保持することができます。TIFFは画像の細部や色情報を正確に保持することに優れているため、印刷物やグラフィックデザインなど高い品質が求められる場面で使用されます。

RAW

RAWはデジタルカメラで使用されるフォーマットであり、撮影時のデータを損失することなく、画像の詳細な情報や色彩を完全に保持することができます。より高度な写真の処理が必要な場合に使用されます。

EPS

EPSは印刷物のデザインに使用されるベクター形式の画像ファイルです。PostScript言語で記述され、テキスト、図形、画像などの要素を含むことができます。印刷物やグラフィックデザインなどで広く使用されます。

PhotoshopとIllustrator

Photoshopはビットマップ形式の画像を扱うことができ、高度な画像編集機能を備えています。画像フォーマットはpsdとなり、写真の編集や画像の加工、コンテンツ画像の作成に使用されます。
Illustratorはベクター形式の画像を操作し、図形、アイコン、ロゴ、イラストなどの作成に特化しています。画像フォーマットはaiとなり、解像度に依存しないため印刷物やロゴの作成に使用されます。
Webサイトで使用する画像やサイトのデザインデータは大抵PhotoshopやIllustratorで作られています。

解像度と画像サイズの違い

解像度と画像サイズは画像の扱う上で重要な要素ですが、その意味や関係性について混同されることがあります。これらを正しく理解し、適切な設定を行うことで、画像を最適な状態で表示したり利用したりすることができます。

解像度とは

解像度とは、ディスプレイやカメラなどの機器の性能を表す指標であり、画像の詳細度や鮮明さを表します。
ディスプレイの解像度は、画面に表示される横方向と縦方向のピクセルの数で表されます。
例えば1920×1080の解像度をもつディスプレイの場合、横方向に1920個、縦方向に1080個のピクセルがあり、画面全体で約207万個のピクセルが存在します。
同じサイズのディスプレイでも、解像度が2倍になるとピクセル数は4倍になります。解像度が高いほどピクセルの密度が高くなるため、鮮明に表示されるようになります。

画像解像度とは

画像解像度は、画像に含まれるピクセルの密度や詳細度を示す指標であり、1インチ辺りのピクセル数(ppi)、またはドット数(dpi)で表されます。
例えば72ppiは、１インチ辺り72個のピクセルが画像内に含まれているということを表します。

　 　
Webサイトで使用する画像の解像度は一般的に72ppi程度が適切とされます。
一方、印刷物の場合は、使用目的によって適切な解像度が異なります。
一般的に、フルカラーは300～400dpi、モノクロは600dpi～1200dpi程度が適切な解像度とされます。ポスターなどの大判印刷では多少解像度を低くしても問題ありません。

解像度と画像サイズの関係

画像サイズは、実際の画像の幅と高さをピクセル単位で表したものです。
画像編集ソフトを使って解像度や画像サイズを変更すると画質が劣化するため、後から変更する必要がないよう、事前に十分な解像度を維持しておくことが重要です。

解像度の変更

画像サイズはそのままで解像度を変更すると、ピクセル密度が変わるため、多少ぼやけた見え方になる場合がありますが、大幅な変化はありません。

画像サイズのみ変更

解像度はそのままで画像サイズを大きくすると、元のピクセルが持つ情報が均一に分散されるため、画像がぼやけて見えます。
逆に画像サイズを小さくすると、元の画像から一部のピクセルが取り除かれたり結合されたりするため、画像が粗く見えます。

解像度とファイルサイズの関係

解像度や画像サイズが大きいほど、ファイルサイズも大きくなる傾向があります。
同じ画像サイズでも、解像度が高い方がより詳細な情報が含まれるため、ファイルサイズも大きくなります。
高解像度の画像は鮮明に表示されますが、Webサイトにおいてファイルサイズの大きな画像は表示速度の低下につながり、ユーザーエクスペリエンスに悪影響を及ぼします。また、ストレージを節約するためにも、無駄に高い解像度の画像は使用せず、ファイルサイズを抑える必要があります。

見るところで色が違う理由

画面上での色の再現や印刷物の色は、様々な要素によって影響を受けるため、同じ画像でも色の違いが生じます。
ここでは、同じ画像でも画面や印刷によって色が異なる理由について詳しく解説します。

画面によって色が異なる理由

画面上ではRGBカラー（赤・緑・青）を使用して色を表現しますが、画面ごとに色の再現範囲や色域が異なるため、完全に同じ色を再現することはできません。
さらに、画面の製造元や設定によって、それぞれ独自のカラープロファイルを持っているため、同じ画像を表示しても色が異なる場合があります。
また、画面の設定によっても色の見え方が変わります。明るさ、コントラスト、彩度などの設定によって同じ色でも見え方が変わります。

印刷すると色が異なる理由

印刷においては、CMYKカラー（シアン・マゼンタ・イエロー・ブラック）がインクの色として使用されます。画面上のRGBと印刷のCMYKは異なる色空間であり、RGBからCMYKへ変換することによって色が変化します。
また、画面はバックライトによって発光し、幅広い色を再現することができますが、印刷ではインクの色に物理的な制約があるため、全ての色を完全に再現することはできません。特に明るい蛍光色や特殊な色は、印刷で再現するのが難しい場合があります。
さらに、インクの特性や使用するプリンタによっても色の再現性が異なるため、同じ印刷物でも色に差が生じることがあります。

まとめ

ホームページで使用する画像フォーマットには、JPEG、GIF、PNG、PDF、SVG、WebPなどがあり、それぞれに異なる特徴や適した用途があります。
画像の解像度やサイズを変更すると、画像の品質が劣化することがあります。画像の劣化を避けるためには、適切な解像度を事前に設定することが重要です。
また、画面表示や印刷によって色が異なる場合があります。これは色の再現範囲や色域の違い、画面の設定、色空間の違いやインクの制約によるものです。
これらの要素を考慮しながら、適切な画像フォーマットと解像度を選択することで、画像の品質を維持しつつユーザーの利便性を向上させることができます。