SVG・PNG・JPG・WebP：用途に合った納品形式の選び方
Webアイコン、背景透過のイラスト、SNS投稿に合う画像形式を選び、サイズ・背景・書き出し品質を確認するための実践ガイド。
まず画像の使用先を決める
Webサイトのアイコン、背景を透過させた商品イラスト、SNSへの投稿画像。同じSVGを元にしていても、適した納品ファイルは異なります。受け取るアプリ、表示サイズ、背景に合わせて形式を選びましょう。書き出す前に、編集できる元データを残しておくことも大切です。ファイルを軽くしても、見た目が崩れてしまっては役に立ちません。
自分で管理するWebサイトなら、シンプルなアイコンにはSVGが向いていることが多いでしょう。マーケットプレイスでは透過イラストにPNGを指定される場合があります。SNSではJPGを受け付けても、SVGは使えないかもしれません。変換する前にアップロード要件を確認してください。
納品する形式を選ぶ
| 形式 | 向いている用途 | 納品前の確認事項 |
|---|---|---|
| SVG | 編集可能なロゴ、UIアイコン、ベクターイラスト | 使用先がSVGに対応し、埋め込み画像やフォントも正しく表示できるか |
| PNG | 輪郭が鮮明で背景を透過させたいラスター画像 | 表示サイズに必要なピクセル数があり、アップロード容量の上限に収まるか |
| JPG | 背景が不透明な画像や写真を使った構成 | 透過が不要で、圧縮によって重要な輪郭が損なわれていないか |
| WebP | WebPに対応したシステムでのWeb画像配信 | 作業全体を通して透過、画質、互換性が保たれるか |
PNGは可逆圧縮を使います。JPGは非可逆圧縮を使い、アルファチャンネルを持ちません。WebPは透過と可逆・非可逆の両方のエンコードに対応しています。ただし、形式名だけでは、その書き出しツールがどの方式を使ったかは分かりません。実際にダウンロードしたファイルを、使用するサイズで比較してください。
ベクターのサイズとピクセル数は別のもの
パスで構成されたSVGは、固定されたピクセルの格子を引き伸ばすことなく拡大できます。一方、PNGに含まれるピクセル数は決まっています。240 × 160 CSSピクセルで表示するイラストなら、1×用のラスター画像は240 × 160ピクセル、2×用なら480 × 320ピクセルです。どちらも画面上では同じCSSサイズで表示します。縦横を2倍にするとピクセル数は4倍になり、通常はファイル容量も増えます。
ダウンロードが自動で2×になると考えず、変換前にSVGの幅と高さを用意しましょう。このサイトのコンバーターはSVGの寸法を使い、最長辺を4096ピクセルまでに制限します。構図の縦横比が変わらないよう、viewBoxとの整合性も保ってください。
拡張子が.svgだからといって、中身がすべてベクターとは限りません。SVGにはimage要素を使ってラスター画像を含めることもできます。外側のSVGを大きくしても、埋め込んだ画像に存在しない細部は復元されません。
ベクターは形状を記述します。ラスター画像には、最終的な表示サイズに足りるピクセル数が必要です。
透過を失わずに書き出す
ダウンロードした画像を、明るい背景と暗い背景の両方に重ねて開いてみましょう。プレビューが白いだけでは、背景が不透明とは断定できません。逆に、市松模様そのものが絵に描き込まれている場合もあります。何も描いていない部分から背景が見え、細い輪郭もきれいに表示されることを確認します。
透過と鮮明な輪郭を優先するなら、SVGからPNGへの変換を使います。使用先が対応していればSVGからWebPへの変換も試し、実際の使用先で結果を確認してください。JPGには透過を保持できません。このサイトのSVGからJPGへの変換では、透明な部分を白い背景に合成します。
透過画像を渡す前に、背景を切り替えて空白部分と輪郭のピクセルを確認しましょう。
よくある3つの納品例
Webサイトのアイコン： サイトが対応していれば、まずSVGを使います。実際に表示する24ピクセルなどのサイズで確認してください。拡大縮小できるファイルでも、小さな表示では細部が詰まったり、線の太さが不揃いに見えたりします。受け取り先が必要とする場合は、代替用のPNGも用意しましょう。
背景透過の商品イラスト： 指定のピクセル寸法でPNGを書き出します。商品ページの実際の背景に置き、対応しているならダークモードでも確認します。絵の中央だけでなく、影、明るいハイライト、半透明の縁まで見てください。
SNSへの投稿： プラットフォームの現在のサイズ・形式要件に合わせます。不透明な画像をアップロードするなら、先に意図した背景を用意しましょう。公開後のプレビューも確認してください。ローカルでは正しく見えた画像が、サービス側でトリミングや再圧縮を受けることがあります。
その他の形式には、それぞれ用途がある
受け取り先がGIFを指定しているなら、SVGからGIFへの変換を使います。このツールが作るのは静止画で、アニメーションではありません。使用できる色数が限られるため、グラデーションや柔らかい輪郭が変化する場合があります。
BMPの書き出しは24ビット画像で、透過部分を白い背景に合成します。TIFFの書き出しはRGBAピクセルを保存するもので、CMYK変換や印刷入稿への適合を保証するものではありません。ICOはアイコン用ですが、このコンバーターは選んだ1サイズを1ファイルに保存します。複数解像度をまとめたファイルにはなりません。受け取るアプリの仕様に従ってください。
書き出しでよくある疑問
なぜ画像がぼやけるのでしょうか？
表示サイズと端末のピクセル密度に対し、画像のピクセル数が足りているかを確認します。SVGの中に埋め込まれたラスター画像も点検してください。適切なサイズで元データから書き出し直しましょう。小さなPNGを引き伸ばしても、元にない細部は増えません。
輪郭に白っぽい縁が出るのはなぜですか？
暗い背景に重ねて確認してください。絵自体に白いピクセルが含まれているか、以前の書き出しで半透明の縁が白地に合成されている可能性があります。そのJPGをPNGに変えても、失われた透過情報は戻りません。
文字が動いたり切れたりするのはなぜですか？
描画時に必要なフォントが利用できるかを確認します。形を固定して渡す素材なら、適切なベクターエディターで文字をアウトライン化する方法もあります。ただし、文字を編集できる元データも残してください。文字、線、影の周囲のviewBoxも確認します。ピクセル寸法だけを増やしても、切れた構図は直りません。
元データを残してから納品用ファイルを作る
元のSVGは、各納品ファイルと分けて保存します。必要に応じてSVG圧縮ツールを使い、置き換える前に見た目を比較してください。書き出したファイル名には、サイズと用途を入れておくと便利です。SVG制作ワークフローのガイドでは、デザインの確認から最終的な納品準備までを解説しています。