ラスター画像
Raster Image
概要（サマリー）
ラスター画像（ビットマップ画像とも呼ばれる）は、色のついた小さな点であるピクセルを縦横に並べて表現する画像形式である。
デジタルカメラで撮影した写真、スマートフォンのスクリーンショット、Webサイトで使うJPEGやPNG画像などは、身近なラスター画像の例である。細かな色の変化や写真のような複雑な表現に強い一方で、無理に拡大するとピクセルの四角いマス目が目立ち、画像が荒れて見える。
Web制作では、ラスター画像の画質、ファイルサイズ、表示速度のバランスを考えることが重要である。
詳細解説
ラスター画像とは何か
ラスター（Raster）とは、格子状の並びを意味する言葉である。
ラスター画像は、画像を小さなマス目に分け、それぞれのマス目に色を割り当てることで1枚の絵を作る。近くで見ると点の集まりだが、離れて見ると自然な写真やイラストに見える。モザイク画やドット絵を細かくしたものと考えると理解しやすい。
1つのマス目をピクセルと呼ぶ。たとえば横1200ピクセル、縦800ピクセルの画像なら、ピクセル数は合計で96万個になる。その一つひとつに色の情報が入っているため、写真のように複雑な色の変化を表現できる。
代表的なファイル形式
Web制作や日常的なデータ管理では、ラスター画像は主に次の形式で使われる。
- JPEG / JPG: 写真に向いている。ファイルサイズを小さくしやすいが、保存や圧縮の仕方によって画質が劣化する。
- PNG: 透明背景を扱える。ロゴ、スクリーンショット、図解など、線や文字をくっきり見せたい画像に向いている。
- GIF: 扱える色数は少ないが、簡単なアニメーションを表現できる。
- WebP: JPEGやPNGより小さい容量で、比較的高い画質を保ちやすいWeb向け形式である。
- AVIF: 高い圧縮効率を持つ比較的新しいWeb向け形式で、写真の軽量化に使われることがある。
どの形式が最適かは、画像の内容と使い道によって変わる。写真ならJPEG、透明背景が必要ならPNG、Web表示を軽くしたいならWebPやAVIFを検討する、という考え方が基本である。
解像度と画質の関係
ラスター画像の見た目は、解像度と表示サイズに大きく左右される。
画像に含まれるピクセル数が多いほど、細かい情報を表現できる。一方で、ピクセル数が少ない画像を大きく表示すると、足りない情報を引き伸ばすことになり、ぼやけたりギザギザが目立ったりする。
たとえば、横300ピクセルの画像をWebページ上で横1200ピクセルに拡大表示すると、元の情報量が足りないため荒れて見える。反対に、横4000ピクセルの写真を小さなサムネイルとしてそのまま読み込ませると、見た目には小さいのにファイル容量だけが重くなり、ページ表示が遅くなる。
ラスター画像では「大きければ正義」ではない。表示する大きさに対して、必要十分なピクセル数を用意することが大切である。
ベクター画像との違い
Webで使われる画像には、ラスター画像のほかにベクター画像がある。代表的な形式はSVGである。
- ラスター画像: ピクセルの集まりで表現する。写真や複雑な色の変化に強いが、拡大すると荒れる。
- ベクター画像: 点、線、図形、数式のような情報で表現する。ロゴやアイコンに向いており、拡大・縮小しても画質が劣化しにくい。
写真をSVGで表現しようとすると非常に複雑になり、実用的ではないことが多い。反対に、単純なアイコンやロゴをPNGで何種類ものサイズに書き出すより、SVGで管理したほうが扱いやすいことがある。
つまり、ラスター画像とベクター画像は優劣ではなく役割が違う。写真はラスター、ロゴやアイコンはベクター、という使い分けが基本になる。
Webサイトで使うときの注意点
Webサイトでラスター画像を使うときは、見た目だけでなく読み込み速度も考える必要がある。
高画質な画像をそのまま大量に読み込むと、ブラウザがページを表示するまでに時間がかかる。特にスマートフォン回線では、画像の重さがそのまま体感速度に影響する。
画像を配置するときは、次のような点を確認するとよい。
- 表示サイズに対して画像が大きすぎないか
- JPEG、PNG、WebP、AVIFを用途に応じて選べているか
- 画質を保ったまま圧縮できているか
- 画面サイズに応じて適切な画像を出し分けているか
- 遅延読み込みが必要な画像か
HTMLでは、srcset や sizes を使って画面幅に応じた画像を出し分けられる。
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 600px"
alt="カフェのテーブルに置かれたノートPC"
>
この例では、ブラウザが画面幅や表示条件に応じて適切な画像を選ぶ。不要に大きい画像を読み込ませないことで、表示速度を改善しやすくなる。
編集と再保存で画質が変わることがある
ラスター画像は、形式や保存設定によって画質が変わる。
JPEGのような非可逆圧縮の形式では、保存時に一部の情報を捨ててファイルサイズを小さくする。そのため、編集して保存する作業を繰り返すと、少しずつ画質が劣化することがある。
PNGのような可逆圧縮の形式では、基本的に保存による画質劣化は起きにくい。ただし、写真をPNGで保存するとファイルサイズが大きくなりやすい。画像の内容に合った形式を選ぶことが大切である。
AIコーディングとの関係
AIにWebサイトやWebアプリの実装を頼むとき、画像がラスター画像なのかベクター画像なのかを明示すると、より適切なコードになりやすい。
たとえば写真を扱うなら、AIには画像の表示サイズ、元画像のピクセル数、必要な形式、スマートフォン対応の有無を伝えるとよい。
HTMLの `<img>` タグでラスター画像（JPEG、横1200px）を配置します。
スマートフォンでは軽い画像を読み込み、デスクトップでは高解像度画像を使いたいです。
`srcset` と `sizes` を使った実装例と、画像がぼやけないための注意点を説明してください。
AIが生成したコードを確認するときは、単に画像が表示されるかだけでなく、ファイルサイズ、代替テキスト、レスポンシブ対応、遅延読み込みの指定も見るとよい。ラスター画像はユーザー体験とページ速度に直結するため、見た目とパフォーマンスをセットで考える必要がある。
よくある勘違い
拡大して荒れた画像はAIで完全に元に戻せる？
完全には戻せない。
AIの超解像やアップスケーリングは、足りないピクセルを予測して補う技術である。見た目を自然に改善できることはあるが、撮影時に存在しなかった元データが完全に復元されるわけではない。元画像の解像度を適切に管理することが、今でも重要である。
PNGなら何でも透明になる？
PNGは透明情報を持てる形式だが、すべてのPNGが透明背景とは限らない。
元画像を書き出すときに背景を透明にしていなければ、PNGでも白や黒の背景が残る。Webサイトに置いたときに四角い背景が見える場合は、ファイル形式ではなく画像そのものの透明情報を確認する必要がある。
Webサイトの画像は高画質なほどよい？
高画質すぎる画像は、Webでは問題になることがある。
必要以上に大きな画像はファイルサイズが重くなり、ページ表示を遅くする。Webでは「見た目に十分きれいで、できるだけ軽い」状態を目指すことが大切である。特にファーストビューに入る画像は、表示速度への影響が大きい。
ラスター画像とSVGはどちらか一方だけ覚えればよい？
どちらか一方だけでは不十分である。
写真、スクリーンショット、複雑なイラストにはラスター画像が向いている。一方で、ロゴ、アイコン、シンプルな図形にはSVGのようなベクター画像が向いている。用途に応じて使い分けることが、Web制作では重要である。
まとめ
- ラスター画像は、ピクセルの集まりで表現される画像形式である。
- 写真や複雑な色の変化に強いが、拡大すると画質が荒れやすい。
- JPEG、PNG、GIF、WebP、AVIFなど、用途ごとに向いた形式がある。
- Webでは画質だけでなく、ファイルサイズと読み込み速度も重要である。
- ロゴやアイコンには、ラスター画像よりSVGなどのベクター画像が向く場合がある。
情報ソース
より詳しくAIに聞いてみよう
- ラスター画像とベクター画像の違いを、初心者向けにたとえ話で説明してください。
- JPEG、PNG、WebP、AVIFの違いと、Webサイトでの使い分けを整理してください。
- 画像を拡大すると荒れる理由を、ピクセルと解像度の関係から説明してください。
- AIコーディングでレスポンシブ画像を実装するとき、
srcsetとsizesをどう使えばよいか教えてください。 - AIにWebサイトの画像最適化を依頼するとき、画質と表示速度のバランスを取るための指示文を作ってください。