Image Format
PNG、JPG、WebP、AVIFなど主な画像形式の概要と、それぞれを使うべき場面を解説します。
画像形式は、画像をファイルに保存する方法の仕様です。画像がラスター(ピクセルの格子)かベクター(図形とパス)か、どの圧縮方式を使うか、どの程度の色数とチャンネルあたりのビット数を許可するか、透明度、アニメーション、メタデータに対応するかを定義します。
ソフトウェアは、拡張子に加えて、ファイルの先頭のバイト列(シグネチャ)で形式を判別します。PNGファイルはバイト列 89 50 4E 47 から始まり、JPEGファイルは FF D8 FF から始まります。Web上では、image/png のようなMIMEタイプで形式を宣言します。
同じ画像を2つの形式で保存しても、サイズと鮮明さが大きく異なることがあります。
画像形式を変換する
Image Converter は、PNG、JPG、WebPの間でブラウザ上の変換を行います。Temposhotは PNG、JPG、WebP を直接書き出せるため、別途変換の手順が不要な場合が多いです。
主な形式の比較
| 形式 | 種類 | 圧縮 | アルファ | アニメーション |
|---|---|---|---|---|
| PNG | ラスター | 可逆 | 対応 | APNGのみ |
| JPG | ラスター | 非可逆 | 非対応 | 非対応 |
| WebP | ラスター | 非可逆または可逆 | 対応 | 対応 |
| AVIF | ラスター | 非可逆または可逆 | 対応 | 対応 |
| GIF | ラスター | 可逆、256色 | 二値 | 対応 |
| SVG | ベクター | テキスト、任意でgzip | 対応 | 対応 |
形式ごとの使い分け
- PNG:インターフェースのスクリーンショット、テキスト、OCRの入力、原本。
- JPG:サイズが重要な写真や、写真の多いスクリーンショット。
- WebP:透明度の有無を問わず、ファイルを小さくしたいWebページ。
- AVIF:最新のブラウザ向けのWeb配信。
- GIF:短い単純なループ。長い動きでは、通常MP4のほうが小さくなります。
- SVG:ロゴ、アイコン、図。
- PDF:スクリーンショットから作る複数ページの文書。
形式とスクリーンショットの画質
スクリーンショットには、鋭いエッジと単色の領域が含まれます。非可逆の形式は、写真ほどこれらをうまく扱えません。可逆のPNGはすべてのエッジを保ちます。共有では、品質85のJPGやWebPで十分なことが多いです。Temposhotでは、JPGの品質は1〜100で、既定値は85です。
よくある間違い
- スクリーンショットを低品質のJPGで保存する。
- ファイルの拡張子を変えて、形式が変わると期待する。
- 長い録画をGIFで保存する。
- WebPやAVIFを、開けないツールに送る。
今すぐ修正したい画像がありますか?
Image Converter で変換するか、Image Compressor でファイルを縮小してください。
よくある質問
スクリーンショットに最適な形式はどれですか?
鮮明な文字と編集のにはPNGです。ファイルサイズを優先する場合は、JPGまたはWebPを使ってください。
SVGはスクリーンショットの形式ですか?
いいえ。スクリーンショットはラスター画像です。SVGはパスで描いた図形に使います。
出典
関連リソース
- 書き出し形式: Temposhotのすべての書き出しオプション。
- Website Captureのオプション: JPEG、PNG、WebPの出力。
同じスクリーンショットを何度も撮っていますか?
Temposhot は、画面、ウィンドウ、または範囲をタイマーに従って連続で撮影し、その一式を PDF、画像、ZIP、または MP4 で書き出します。無料のブラウザツールは、1 枚の画像の処理に対応しています。
関連リソース
関連用語
- PNGPNG画像形式の仕組み、スクリーンショットにPNGを使うべき場面、JPGやWebPとの違いを解説します。
- JPGJPGの圧縮の仕組み、PNGやWebPとの使い分け、非可逆のスクリーンショット形式でよくある間違いを解説します。
- WebPWebPの概要、PNGやJPGとの比較、スクリーンショットにWebPを使うべき場面を解説します。
- SVGSVGの概要、ベクター画像とラスター画像の違い、どのような内容にSVGが適しているかを解説します。
- AVIFAVIFの概要、JPG、PNG、WebPとの比較、スクリーンショットや画像に使う場面を解説します。
- Image Compression画像の圧縮の概要、非可逆と可逆の違い、スクリーンショットを圧縮するときのよくある間違いを解説します。