画像形式変換をブラウザ内で — /tools/image-convert の思想と使い方

「PNG で貰ったロゴを JPEG にしたい」「iPhone で撮った HEIC を JPG で送りたい」「サイト表示を速くするために WebP に揃えたい」。画像の形式変換は地味ですが発生頻度の高い作業です。

よくあるユースケースを整理するとこうなります。

• Web 担当者: 納品された PNG 素材を WebP に変換してページ表示を高速化したい
• デザイナー: 透過 PNG のロゴを、背景色固定の JPEG に変換してメール添付したい
• 一般ユーザー: Windows で開けない HEIC をとにかく JPG に直したい
• 開発者: 複数形式が混在した画像フォルダを WebP に一括統一したい

Zerosend の画像形式変換ツール は、この日常作業をブラウザ内で完結させます。一度も外に出さずに、あなたの端末だけで別形式に書き出します。

形式を変換したい主な理由

画像形式ごとに得意な用途が異なります。目的に合った形式を選ぶだけで、ファイルサイズが 30〜50% 小さくなったり、透過表現が使えるようになったりします。変換そのものを手軽にできる環境があると、素材管理の自由度が大きく上がります。

なぜブラウザ内で形式変換するのか

画像変換サービスの多くは、アップロード → サーバーで変換 → ダウンロード という流れです。社員写真、契約書のスキャン、製品デザイン案。中身を見られたくない画像ほど、オンライン変換ツールに投げづらいのが現実です。

Zerosend は、変換処理そのものがブラウザ内で完結するため、機密性の高い素材でもそのまま使えます。DevTools の Network タブを開いたまま変換しても、画像本体がアップロードされていないことを自分で確認できます。

使い方

1. /tools/image-convert を開く
2. 画像をドラッグ&ドロップ (複数可)
3. 出力形式 (JPEG / PNG / WebP) と品質を選択
4. 「変換を開始する」をクリック
5. 結果を ZIP でまとめてダウンロード

形式の選び方

• JPEG: 写真・背景画像。透過不要。古いブラウザ/アプリ互換性が最重要なら
• PNG: ロゴ・UI パーツ・透過必要なグラフィック。可逆圧縮
• WebP: 汎用。JPEG より 25〜35% 小さくなり、透過も扱える。モダン用途の標準
• AVIF: 更に小さいが生成コストが高く、ブラウザ対応がまだ揃いきらない

ブログや EC で表示速度を気にするなら WebP 一択と言って差し支えありません。

仕組み

Canvas API の canvas.toBlob(callback, 'image/webp', quality) を使って変換しています。ブラウザ標準のエンコーダなので、外部ライブラリ依存もありません。

• 入力画像を <img> として読み込み
• 同寸の <canvas> に描画
• toBlob で出力形式と品質を指定して書き出し

HEIC 入力のみ別ツール (HEIC → JPG) に振り分けています。HEIC デコーダがブラウザ標準にまだ入っていないため、別ライブラリを読み込む必要があるためです。

よくある質問

Q. WebP に変換するメリットは？ A. 同じ視覚品質で JPEG より 25〜35% 小さくなります。透過も扱えるため PNG の代替にもなり、モダンブラウザはすべて対応済みです。ブログや EC では積極的に使う価値があります。

Q. 透過 PNG を JPEG にしたらどうなる？ A. 透過部分は白で塗られます。意図しない結果になりやすいので注意してください。透過を維持したい場合は WebP か PNG のままにしてください。

Q. 元のメタデータ (EXIF) は引き継がれる？ A. 落ちます。位置情報漏れの予防としてはむしろ利点です。

Q. バッチ処理の上限は？ A. 端末のメモリ次第ですが、実用上は 100 枚前後までを推奨します。

関連ツール

• 画像圧縮 — 品質指定で再エンコードしてサイズ削減
• 画像リサイズ — 形式変換と同時に寸法も揃えたいときは先にこちら
• HEIC → JPG — iPhone 写真専用の変換