# PNGをWebPに 透明度を保ったまま小さく

同じ画像を、透明な部分はそのまま、多くの場合3分の1ほど小さく。

> ブラウザの中でPNG画像を可逆圧縮のWebP、またはさらに小さなWebPに変換します。どちらも透明度を保ちます。アップロードもアカウントも不要で、オフラインでも動きます。

このページは、ブラウザの中だけで動く対話型のツールです（https://abox.tools/ja/png-to-webp/）。渡したものが送信されることはありません。以下は、このページがツールについて言葉で説明している内容のすべてです。使うには、このアドレスを開いてください。

## 画像が**アップロードされることはありません**。サーバーが存在しないからです。

変換はお使いのブラウザと手元のハードウェアで行います。2020年以降のブラウザはWebPを書けるので、エンコーダーはすでに端末にあります。ダウンロードも待ち時間もありません。このページには通信機能も画像を受け取るサーバーもありません。

- ✗ アップロードなし
- ✗ アカウント不要
- ✗ サイズ制限なし
- ✓ オフラインで動作
- ✓ ソース公開

## PNGをWebPに変換する手順

1. **PNGファイルを選びます。** 選択欄にドロップするか、ファイルを選びます。名前ではなく先頭のバイトで判別するので、本当にJPEGであるファイルはそのことを伝えて受け付けません。透明な部分がある場合も行に表示します。
2. **可逆圧縮か、さらに小さくするかを選びます。** 可逆圧縮では不透明な画素をすべて保ち、それでも小さくなります。スクリーンショット、図、ロゴ、文字に向いています。「さらに小さく」では画質スライダーが現れます。写真では見た目をほぼ保ったまま大きく容量を減らせます。
3. **「変換」を押し、実際の結果を読みます。** 新しいサイズと変化に加え、ブラウザが実際に使った方式を表示します。可逆圧縮か、選んだ画質の非可逆圧縮かです。設定を繰り返すのではなく、完成したファイルから読み取ります。
4. **個別に、またはまとめてダウンロードします。** 1個なら個別のダウンロード、2個以上ならZIPも使えます。同名のファイルには拡張子の前に番号を付け、ZIPの中で上書きされるのを防ぎます。

## 詳しい解説

[透明部分を保ったまま、同じ画像を3分の1ほど小さく](https://abox.tools/ja/guides/convert-png-to-webp/): WebPは情報を失わない方法でもPNGより小さくなり、非可逆ならさらに減らせます。適した方法は画像の内容次第です。各モードの働き、容量の違い、アップロードせずに変換する方法を説明します。

## 箱の中のほかのツール

- [AVIFをJPGに](https://abox.tools/ja/avif-to-jpg/): ウェブサイトが保存する形式から、どこでも使える形式へ。
- [証明写真作成](https://abox.tools/ja/id-photo/): 国を選ぶだけ。その国の規定を、そのまま当てはめます。
- [画像スタック](https://abox.tools/ja/stack-images/): 20枚を1枚に。20回のアップロードもRAW現像ソフトもなしで。
- [画像黒塗りツール](https://abox.tools/ja/redact-image/): 隠した部分はファイルから消えます。上に置かれるのではありません。

## よくある質問

### 画像はどこかへアップロードされますか？

いいえ。読み込み、デコード、書き出しはすべてお使いのブラウザとハードウェアで行います。ツールはネットワークから取得も送信もしません。`Content-Security-Policy`に書かれた接続先に、このサイト自身のものはありません。

### 透明度は保たれますか？

はい。どちらの方式でも保ちます。PNGをJPEGではなくWebPにする主な理由です。WebPにはアルファチャンネルがあり、透明なロゴの背景はそのままです。背景色を選んだり塗りつぶしたりしません。変換前の行に透明度の有無、変換後の結果に透明度を保ったことを表示します。

### 可逆圧縮と「さらに小さく」の違いは何ですか？

可逆圧縮では不透明な画素が元のPNGと同じで、それでも通常は5分の1から3分の1ほど小さくなります。WebPの可逆圧縮がPNGより効率的だからです。半透明な画素の注意点は次の質問にあります。「さらに小さく」は気付きにくい細部を捨てる非可逆圧縮で、写真は10分の1になることもあります。文字、単色、鋭い輪郭には可逆圧縮、写真には非可逆圧縮が目安です。

### 「不透明な画素」とは、半透明の画素は違うのですか？

ごくわずかに変わることがあり、WebPではなくキャンバスによるものです。ブラウザは色に透明度を掛けた値を保存します。この計算は完全には元に戻せず、透明になるほど元の色の情報が失われます。キャンバスを使うブラウザの変換ツールに共通します。\
\
完全に不透明、または完全に透明な画素はそのままです。中間の画素では、透明度が4分の3より高い場合に255段階中最大63、それ以外で最大4の差を測定しました。大きく変わるのはほぼ見えない画素なので、見た目は変わりません。影響するのはロゴの滑らかな輪郭のような場所だけです。\
\
保存用に完全に一致する原本が必要ならPNGを残してください。同じ見た目で容量を3分の1ほど減らしたい場合にこのツールを使えます。

### 本当に可逆圧縮だとどう分かりますか？

設定を繰り返すのではなく、完成したファイルを読み直して確かめます。WebPは可逆圧縮なら`VP8L`、非可逆圧縮なら`VP8` のチャンクに画素を保存します。このページは実際のチャンクを調べて結果に表示します。キャンバスに可逆圧縮のフラグはないので、画質の最大値を指定してブラウザの判断に任せます。現在のブラウザは対応していますが、それでも毎回確認します。

### WebPはどこでも開けますか？

ウェブでは開けます。Chrome、Edge、Firefox、Safariはすべて2020年から表示に対応しています。ブラウザ以外では違います。WindowsとmacOSはプレビューできますが、古いソフト、一部のフォーム、電子書籍端末には対応しないものがあります。相手がWebPを受け付けない場合は、逆向きの[WebPをJPGに変換するツール](https://abox.tools/ja/webp-to-jpg/)を使ってください。

### そもそもPNGが大きいのはなぜですか？

PNGは可逆圧縮で、写真はその方法では小さくしにくいためです。同じ部分が繰り返すスクリーンショットやロゴには向きますが、繰り返しの少ない写真には不向きです。電話で撮った写真をPNGで保存すると、JPEGの10倍になることもあります。その場合は非可逆圧縮が役立ちます。容量の上限に収めたいなら、画質ではなく目標サイズを指定する[画像圧縮ツール](https://abox.tools/ja/compress-image/)を使ってください。

### 撮影日時、カメラ、位置情報は残りますか？

いいえ。キャンバスは画素だけを保つので、メタデータは残りません。PNGはカメラ情報がないものが多いですが、内容を確認するには再圧縮せずに読み書きする[EXIF表示・削除ツール](https://abox.tools/ja/exif-editor/)を使ってください。

### フォルダごと変換できますか？

はい。サーバーで処理しないので、個数や容量の制限はありません。好きなだけ追加できます。ファイルごとに結果とダウンロードがあり、2個以上ならZIPも使えます。上部には全体の容量削減を表示します。

### 無料ですか？アカウントは必要ですか？

無料で、アカウント、ログイン、お試し期間、透かしはありません。広告で運営していますが、画像の情報は広告に渡しません。

### オフラインでも動きますか？

はい。ページを一度開いて通信を切っても同じように動きます。ファイルを別の場所へ送って処理するツールなら通信が切れた瞬間に止まるので、何もアップロードされないことの直接の確認になります。

## この主張を確かめる方法

- **画像が送られる先はありません。** Content-Security-Policyにはこのページが接続できるアドレスがすべて書かれていますが、このサイト自身のものはありません。ファイルを収集する受け口も、それを送信するコードもありません。
- **透明度はそのまま保ちます。** WebPにもPNGと同じアルファチャンネルがあるので、透明な背景のロゴは透明なままです。背景色を選ぶ必要も、塗りつぶす部分もありません。アルファチャンネルのないJPEGへ変換する[WebPをJPGに変換するツール](https://abox.tools/ja/webp-to-jpg/)との違いです。
- **可逆圧縮かどうかは、実際に確かめます。** キャンバスに可逆圧縮の指定スイッチはありません。ブラウザは画質の値から方式を選び、現在のブラウザは最大値で可逆圧縮を書きます。ただし仕様上の保証ではないので、書いたファイルを毎回読み直し、本当に可逆圧縮か結果に表示します。将来ブラウザの動作が変わっても、その場で伝えます。
- **キャンバスが引き継がない情報。** 画像をデコードしてキャンバスに描画します。キャンバスは画素だけを保つので、PNGのテキストチャンク、ICC色プロファイル、XMPは残りません。可逆圧縮で保つのは画素で、その周りのメタデータではありません。メタデータを扱いたいなら[EXIF表示・削除ツール](https://abox.tools/ja/exif-editor/)を使ってください。
- **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから、寄付ボタンはBuy Me a Coffeeから読み込みます。画像についての情報はどれにも渡しません。ファイルを読み、デコードし、書き出すコードはすべてこのサイト自身から配信され、リポジトリで公開されています。
- **オフラインでも動きます。** ページを一度開いて通信を切っても、動作は変わりません。画像を別の場所へ送って変換するツールにはできない、一番簡単な確認方法です。

**自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website

まず読むとよいのは、Content-Security-Policyについては`config/site.toml`と、変換処理の`src/shared/image-convert.js`をご覧ください。特に`encodeWebp`はファイルを書いた後でRIFFチャンクを読み直し、ブラウザが本当に指定した可逆圧縮を使ったか確かめます。
