【WEB】サイズについて知ろう～拡張子・ピクセル・解像度・容量～

2024年6月2日2024年6月9日

にゃも

JPGとか解像度とかピクセルとか、何言ってるのか分からないんだ。
サイズの単位なのは分かるんだけどどういう意味なの？

minorica

JPGは拡張子の形式だね。WEB媒体におけるサイズとはピクセル数（px）と解像度（dpi/ppi）、容量（Byte）の３つがあるよ。

　普段SNSにアップロードしているとあまり気にならないかもしれませんが、イラストレーターとして活動していると納品の画像形式を指定されたり容量を考慮しなくてはいけない場面が多々あります。

　今回はWEB媒体における画像形式・サイズ容量について説明していきたいと思います。

拡張子ってなんだろう？

minorica

サイズについて知る前に、まずは拡張子について知っておこう！

　みなさんはJPEGとかPNGとかの形式についてご存じですか？

　「当たり前に知っている」「なんとなく聞いたことある」「全く聞いたことない」それぞれだと思います。しかしここでは「知らない」「聞いたことあるけどあまりよくわからない」という人のためにまずは拡張子について説明していきたいと思います。

　画像のファイルを見ると、後ろに「.jpg」「.png」「.docx」などといった“.(ドット)”に続く英字の羅列が見られます。これが拡張子と呼ばれる表示形式です。

　テキスト（.txt）、音声（.mp3）、動画（.avi）、Word（.docx）、Illustrator（.ai）、Photoshop（.psd）、AdobePDF（.pdf）などデータや作成するソフトごとに拡張子は変わってきます。その中で一般的にWEBやSNSで多用される画像に使われる拡張子はおもに以下の４つです。

形式名	特徴	短所
JPEG（.jpg）ジェイペグ	データが軽く写真やイラスト向き（約1677万色）	画像ソフトから書き出す際には圧縮されてしまう。加工で劣化しやすい。
PNG（.png）ピング	透過処理ができ高精細。加工による劣化がない。（約1677万色）	JPEGよりもデータが重い
GIF（.gif）ギフ	透過処理ができ、アニメーションも作成できる（最大256色）	高画質を求められる場面では不向き
SVG（.svg）えすぶいじー	ベクター形式のため拡大してもきれいに表示される。透過処理、アニメーション化ができる。	複雑で色数の多い画像は表現できない。（ロゴなどに向いている）

minorica

画像の表示形式によって容量はかなり変わってくるから、まずは拡張子と容量のハナシはセットで覚えておこう

にゃも

まずは上記の4つを覚えておけば大丈夫なんだね。

ちなみに……

　ほかにも2010年にGoogleが開発した新型の画像ファイル形式であるWebP（ウェッピー）やデジタルカメラで撮った写真に使われる TIFF（ティフ）、iPhoneで撮影した写真に使われるHEIF（ヒーフ）など画像で使われている形式はまだまだたくさんあります。

にゃも

いっぱいあるんだなあ

minorica

背景を透過しなくてよくて極端に高精細を求められない場面ではネット上の素材なんかはJPEGで使うことが多いかな。

ピクセル（px）ってなに？

にゃも

ピクセルって言われてもよくわからないよ。1ピクセル（px）って何？

minorica

一般的な印刷物もWEB上の写真なども、画像はドットの集合でできているんだ。そのドットの数が一般的に解像度と呼ばれている。

　印刷ではドットで表されますが、WEBで置き換えるとディスプレイに表示される画像は色が付いた升目（ピクセル）の集合体でできています。単位、ピクセル（px）は、その画像を表すのにいくつの升目（ピクセル）が使われているかという意味です。

　かつてのWindowsでは画面の規格が1インチ＝96ピクセルと決まっていたため96px＝2.45㎝と言われていました。現在では1インチを96個以上のピクセル数で表す高精細な画面も増えたため、単位の定義のほうを変えて1px＝96分の1インチと定義されました。

minorica

同じピクセル数の画像が画面によって大きく見えたり小さく見えたりするのはそのためだよ

解像度とは？

　解像度とは1インチに含まれる升目数がいくつあるかということです。この升目を一般的にと呼んでいます。

　解像度は「dpi(ディーピーアイ)」「ppi(ピーピーアイ)」といった単位で表されます。

にゃも

「dpi」と「ppi」は一緒？

dpi（dots per inchの略）…　1インチ当たりに並ぶドット数
ppi（pixel per inchの略）…　1インチ当たりに並ぶピクセル数

minorica

「dpi」は印刷、「ppi」はWEBで用いられることが多いけど基本的には同じと思っても問題はないかな。

　このピクセル数が多ければ多いほど高精細な画像と呼ばれます。高精細な画像は標準的なディスプレイで見るとあまり違いが分からないですが、高性能の大画面ディスプレイで見たり、印刷してみるとぼやけ具合がぜんぜん違います。

　しかし、WEB上では高精細さよりも動作の利便性の重要度は高く、“画像ファイルの軽さ”を求められることが多いので印刷物で必要な解像度とWEBで必要な解像度は異なると覚えておく必要があります。

印刷媒体	最低300～360dpi程度
WEB媒体	最低72dpi～

minorica

SNSに上げる画像はアプリのほうで勝手にリサイズされているよ！

容量とは？

　WEBやSNSをはじめとしたネット上ではアップロードする画像の容量が制限されていることも多いっです。

　容量が大きい画像はWEB上の動作を遅くしたり、うまく表示されなかったり、使っていい制限を圧迫したりするためWEBではあまり好まれません。

　しかしWEBで表示されたものを印刷物として扱う場合、それなりの解像度を求められる場合も多く、解像度の高い画像はそれだけ大容量になりがちです。

　ここではまず容量について説明していきましょう。容量の単位は小さい順からbit（ビット）→B（バイト）→KB（キロバイト）（バイト）→MB（メガバイト）→GB（ギガバイト）→TB（テラバイト）で表されます。

単位	比較	使われる例
bit	8bit＝1B	1桁の二進数の情報量最小単位。 CPU（中央処理装置）64ビットCPUなどを表すのに使われる
B （Byte）	1000B＝1KB	8桁の二進数の情報量。全部で256通りの値を表現できる。
KB	1000KB＝1MB	フロッピーディスクの容量が２DDで最大720KB。 HPのファビコン画像が上限100㎅以下の容量。
MB	1000MB＝1GB	GoogleによるWEBの1ページの推奨容量が1.6MB。 X(旧twitter)のアイコンのサイズの上限が5ＭBなど画像サイズの目安になる。
GB	1000GB＝1TB	USBメモリなどの記憶媒体の容量として使われる。 2GBから64GB程度が一般的