形式を選ぶ基準は、残したい情報
保存画面に形式が並ぶと、どれが一番高画質かで選びたくなるかもしれません。しかし、形式には異なる性質があり、同じ画像でも使い方によって候補が変わります。写真の細かな色の変化を軽く保存したいのか、図の輪郭や透明な背景を保ちたいのかを先に決めます。
拡張子はファイル名の末尾に付く「.jpg」「.png」「.svg」などです。受取先が対応しているかを知る手掛かりになりますが、それだけでは画素数や圧縮の程度までは分かりません。同じJPEGでも、書き出し条件によって見た目や容量は変わります。
たとえるなら、運ぶ箱の種類と、中に入っている物の状態は別です。箱を替えても、壊れた物が元に戻るわけではありません。画像も、すでに失われた細部を形式変更だけで取り戻すことはできません。最初に元データを残しておく理由です。
| 形式 | 候補になる用途 | 確かめること |
|---|---|---|
| JPEG | 色の変化が多い写真 | 圧縮後の輪郭や細部、透明背景が不要か |
| PNG | 透明背景の画像、文字や線を含む図 | 透過設定、画素数、ファイル容量 |
| SVG | 線や形で作ったアイコンや図 | 掲載先の対応、文字や埋め込み画像の扱い |
JPEGは一般的な保存で非可逆圧縮を使い、背景の透明度を保持しません。PNGは可逆圧縮と透過を扱えます。SVGは図形などを記述するベクター形式ですが、内部に画素画像を含む場合もあります。各形式の概要はMDNの画像形式ガイドで確認できます。
写真を使うときは、容量と見え方を比べる
Webへ載せる写真なら、JPEGは候補の一つです。細かな色の変化を含む写真を保存できますが、圧縮を強くすると、輪郭の周囲や細部に変化が見える場合があります。容量が小さくなったことだけで、採用する設定を決めないようにします。
同じ写真を異なる設定で書き出すときは、縦横の画素数をそろえて比較します。片方だけ小さく縮小していたら、圧縮の違いとサイズの違いが混ざってしまいます。まず条件を一つ固定し、使う大きさで見たときに困る変化がないかを確かめます。
写真の中に細い文字や小さな図がある場合は、その部分も拡大して確認します。全体は問題なく見えても、看板の文字など必要な情報が読み取りにくくなることがあります。どこを伝える写真なのかが、検査する場所を決めます。
保存後に何度も編集してJPEGへ書き出し直すより、編集できる元データから用途別に書き出す方が、版と条件を管理しやすくなります。元の写真を切り取る段階で迷うなら、残す情報からトリミングを選ぶ例を使って、範囲を先に決めてください。
透明な背景が必要なら、保存後に確かめる
ロゴを色の付いた背景へ置くと、周りに白い四角が見えることがあります。元データに白い面があるのか、書き出す際に背景が白へ置き換わったのかを分けて調べます。PNGにしただけで、白い背景が自動的に透明へ変わるわけではありません。
下は透明背景の関係を示すHTMLの模式図です。実際のJPEGとPNGを書き出した比較ではなく、白い面が残る場合と、周囲の背景が見える場合を再現しています。
背景の色は、文字の周りまで見えている？
白い背景が残る状態
紙の会
周囲の背景が見える状態
紙の会
変えたところ：文字の後ろに白い面を置くか、面を置かないかだけを変えました。
透明かどうかは、白い背景の上だけでは気づきにくいことがあります。別の背景へ置いた状態を確かめます。
架空の教材です。見本の数値や配置は、この条件で比べるためのものです。
透明な画像を確認するには、白い背景だけでなく、暗い背景や色のある背景へ置いてみます。輪郭に白い縁が残っていないか、半透明の影が想定どおり見えるかも確認できます。
制作ツールの市松模様は透明を示す表示として使われることがありますが、市松模様そのものが画像に描かれている場合もあります。画面を見た印象だけで透明と決めず、書き出したファイルを別の背景へ重ねて確かめてください。
写真に文字を重ねる素材なら、透過だけでなく文字と背景の差も必要です。写真上の文字を三案で比べる教材で、帯や配置による違いを確認できます。
SVGなら何でも拡大できる、という思い込み
線や形として作られた部分は、SVGで拡大しても画素の階段状の粗さが出にくい性質があります。ロゴやアイコンのような図に向いている理由の一つです。ただし、小さなJPEGをSVGの中に入れても、その写真が細かな線画へ変わるわけではありません。
SVGの中に写真などの画素画像が含まれている場合、その部分は元の画像の画素数に影響されます。また、文字を文字のまま含めたデータでは、使う環境のフォントなどによって見え方が変わることがあります。保存形式だけで、すべての環境で同じ表示になるとは判断しません。
ファイル名の「.jpg」を「.svg」へ書き換えることも、変換ではありません。中身のデータは変わらないので、開けなくなったり、形式と内容が食い違ったりします。必要な形式へ変えるときは、対応するツールの保存・書き出し機能を使います。
細い線や小さな文字は、形式上は拡大できても、小さく表示すれば見えにくくなることがあります。拡大耐性と、最終的な大きさでの読みやすさは別の確認です。アイコンなら、使うサイズに縮めた状態でも形を見分けられるかを確かめます。
あえて別の形式や元データを渡す場合
JPEG・PNG・SVGだけが選択肢ではありません。Webの配信ではWebPやAVIF、印刷や資料の受け渡しではPDF、共同編集では制作ツールの元データが求められることもあります。形式名を先に決めず、受取先の指定を確認します。
PDFなら編集に使える、PNGならどこでも使える、といった判断もできません。受取先が画像を貼るだけなのか、文章や色を変更したいのかで必要なファイルは変わります。「最終画像」と「編集用データ」を分けて渡すと、目的を共有しやすくなります。
印刷先に入稿する場合は、その商品や入稿方法に対応した案内を読みます。画像形式だけでなく、サイズ、色、余白、文字の扱いなど別の条件があります。この記事の形式比較を、入稿チェックの代わりにはしないでください。
制作ツールの使い方がまだ分からなければ、最初の一枚を作って保存する流れから操作を確かめられます。どのアプリでも、作業中の見た目と、書き出した結果を分けて見る習慣は役立ちます。
書き出したあとに確認する五項目
保存ボタンを押したら、制作画面とは別に出力ファイルを開きます。正しい版か、必要な画像かを確認し、そのファイルを実際に使う場所へ仮配置します。受取先が決まっているなら、対応形式の条件も照合します。
- 写真・ロゴ・文字が、必要な範囲まで入っているか。
- 縦横比が変わり、物の形がゆがんでいないか。
- 背景の透明部分や影が意図どおりか。
- 最終サイズで、線や文字、主役の細部が見えるか。
- ファイル名、容量、形式が受取先の条件に合っているか。
容量だけを小さくするために、検査せず設定を下げ続けないようにします。Webでは読み込みの負担も重要ですが、必要な情報が分からない画像では目的を果たせません。複数の条件を満たす範囲を探します。
今日のワーク：保存の理由を一行で書く
手元の画像を一つ選び、「何に使うか」「透明背景は必要か」「編集し直すか」「受取先の指定は何か」を書きます。その条件で形式を一つ選び、元データを残して書き出してください。
出力ファイルを別の背景へ置き、表示する大きさでも確認します。「PNGだから高画質」ではなく、「背景を透過し、掲載先が対応しているのでPNGを選んだ」のように理由を残します。
保存したファイルを、使う場所で開く
制作画面できれいに見えることと、届けた先で使えることには距離があります。形式を選んだら、受け取る側と同じ状態に近づけて確認してください。
画像が粗いとき、背景が残るとき、開けないとき。それぞれ原因を分ければ、形式を次々に替える前に、直すべき条件を探せます。