PNGは背景が透明にも対応しているフォーマットです。テクニカルな話ですが、ジャヴァスクリプトで切り抜き画像を合成するような場合はPNGを利用するとハンドリングしやすいです。
PNGとは？
現在ウェブでポピュラーに利用されているファイルフォーマットです。
Portable Network Graphicsの略で、読み方は「ピング」「ピン」です。
うちはピング派です。
ＪＰＥＧと並び、画像を圧縮して軽量化するため、多くのウェブサイトでもＰＮＧで画像を使っています。
メリットの１つは、アルファチャンネルをサポートです。
背景を透明に設定できる点でもウェブサイトで利用されている理由の１つでしょう。
従来はＧＩＦでやっていましたが、現在はＰＮＧが主流ではないでしょうか。
PNGを見るには？
サファリ、クロームなどのブラウザソフトでみることができます。
ファイルエクスプローラーでも特に機能拡張を入れなくてもファイルプレビューが表示されます。
特に追加ソフトなくても利用できる便利なフォーマットといえるでしょう。
作成ツール
Boxy SVG
Boxy SVGは、ベクター系のＳＶＧ作成ツールです。ベクター系の場合、背景が透明な画像を作画しやすいです。
FileメニューからExportを選びます。
ＰＮＧで出力で、背景を透明に設定できます。
初期設定でＰＮＧ、背景透明となっていますので変更しなくても大丈夫だと思います。
レビューは以下参照ください。
Inkscape
無料ながら豊富な機能を誇るドローツールです。
ファイルメニュー＞ドキュメントのプロパティで背景を透明にします。
アルファ（Ａ）の値が０であれば透明となります。
そのうえでファイルメニュー＞ＰＮＧ画像にエクスポートを実行。
ファイルを指定してから「エクスポート」を実行すればオッケーです。
使い方全般はこちら。
フォトショップ、フォトショップエレメンツ
画像編集ソフトの定番です。
フォトショ、あるいはフォトショップエレメンツでは、新しくレイヤーを作りそこへ描画。背景レイヤーの表示をオフにしてから保存したほうがいいです。
ファイルメニューで「Ｗｅｂ用に保存」を実行。
ＰＮＧ形式で、透明部分がチェックされていることを確認してから保存を実行しましょう。
使い方全般はこちら。
Paint.net
昔のフォトショップのような画像編集ソフトです。
こちらもレイヤーをサポートしており、一度レイヤー上に作画して背景を非表示にすることで透明のままの状態を維持します。
ＳａｖｅＡｓでＰｎｇを選び保存すればオッケー。
使い方全般はこちら。
CorelPainter Essential
CorelPainterでもレイヤーを使って作画し、背景を非表示のままＰＮＧとして保存すると透明背景として保存されました。
使い方全般はこちら。
透過の不具合・疑問点
PNGが透過しない？
グラフィックソフトではＰＮＧ出力に対応しているものの、書き出し時にレイヤーを統合したり、処理の過程で透過を無効にするケースがあります。
なぜか透過できない！という場合には、別のグラフィックソフトで透過を試してみるのがいいと思います。
また、フォトショやペイントネットなど、背景を一度オフにしてから保存する必要があります。作業しているキャンバスの背景にチェッカーボードの模様が出ていれば透過されることがわかります。
「ペイント」で透明背景は作れる？
試してみましたが、たぶんできないと思います。