画像拡張子変換（PNG⇄JPEG⇄WebP）

画像の拡張子（形式）とは — PNG・JPEG・WebP の違いと使い分け

画像の「拡張子」は、そのファイルがどの形式（フォーマット）で保存されているかを表します。同じ見た目の画像でも、形式によって圧縮方法・ファイルサイズ・透過の可否・対応環境が変わります。用途に合わせて形式を選ぶことで、画質を保ちながらファイルを軽くしたり、透過や互換性を確保したりできます。

PNG（.png）

可逆圧縮で、保存しても画質が劣化しません。透過（アルファチャンネル）に対応するため、ロゴ・アイコン・図・スクリーンショットなど輪郭がはっきりした画像に向きます。写真のように色数が多い画像ではファイルが大きくなりがちです。

JPEG（.jpg / .jpeg）

非可逆圧縮で、色の変化がなめらかな写真を小さく保存できます。画質（品質）を下げるほど軽くなりますが、下げすぎるとブロックノイズが出ます。透過は扱えないため、透過画像を変換すると背景色で塗りつぶされます。

WebP（.webp）

Googleが開発した比較的新しい形式で、可逆・非可逆の両方に対応し、多くの場合JPEG/PNGより小さくなります。透過やアニメーションにも対応します。主要なモダンブラウザで表示できますが、古い環境や一部のアプリでは非対応のこともあります。Webでの配信サイズ削減に効果的です。

このツールのしくみ

選んだ画像を <canvas> に描画し、canvas.toBlob(type, quality) で指定形式に再エンコードしています。JPEGへ変換する際は、透過部分を指定の背景色で塗りつぶしてから書き出します。処理はすべてブラウザ内で行われ、画像がサーバーへ送られることはありません。

ヒント：透過を残したいなら PNG か WebP、写真を軽くしたいなら JPEG か WebP、Web配信の容量を最優先するなら WebP がおすすめです。