PNG から WebP への変換

PNG から WebP への変換とは、.png ファイルを .webp に再エンコードして、ページが送信するデータ量を減らすことです。PNG はロスレス形式なので、画像を制作している間は最適ですが、ブラウザがダウンロードする場面では無駄が多くなります。ヒーロー画像、スクリーンショット、商品写真を PNG のまま掲載すると、すべてのピクセルが忠実に保たれる反面、訪問者はその分の通信量を負担することになります。WebP は Web 配信用の形式として作られたもので、ページ重量の監査で PNG ファイルがたびたび指摘されるのもそのためです。

変換はクライアント側で行われます。PNG の読み込みと再エンコードはお使いのブラウザ自身が行い、ファイルがアップロードされることはありません。そのため、クライアント案件の素材フォルダも第三者に渡すことなく変換できます。

具体例で見てみましょう。1920 x 1080 のスクリーンショットは 2,073,600 ピクセルあり、PNG はそのすべてを近似なしで記録するため、ごく普通のスクリーンショットでも数 MB になります。ここにドロップすると、初期値の品質 90 ですぐに変換されます。各行には PNG のサイズ、矢印、WebP のサイズ、増減率が並ぶので、削減効果を宣伝文句ではなく数字で確かめられます。スライダーを 70 に動かすと再変換されるので、どちらを使うか決める前に 2 つのサイズを見比べられます。

いちばん多い疑問にお答えします。品質スライダーは 10 から 100 までで、100 にするとブラウザのエンコーダーにできるだけ細部を残すよう指示します。ただし出力はあくまでそのエンコーダーが生成したもので、元の PNG とビット単位で完全に一致する保証はありません。PNG を原本、WebP を配信用のコピーとして扱ってください。透明部分はそのまま保たれるため、切り抜き画像やロゴもアルファチャンネルを維持し、白い背景が付くことはありません。

WebP が最適とは限らない場面もあるので、先に知っておくと安心です。メールの添付ファイル、印刷所への入稿、古い CMS、クライアントに送る Word 文書、この形式が普及する前のデスクトップツールでは、PNG や JPG のほうが問題なく使えます。アニメーション PNG はここでは静止画として扱われ、出力はアニメーションしません。EXIF、GPS 座標、カラープロファイルは再エンコード時に削除されます。100 メガピクセルを超える画像と空のファイルはメッセージを表示して受け付けません。バイト単位のサイズ制限はありませんが、1 日あたりの変換回数には上限があります。ツールは無料で、登録も不要です。

• PNG ファイルは、ブラウザの Canvas API によってクライアント側でデコードされ、WebP に再エンコードされます。未公開のデザインやクライアントの素材がアップロードされることはありません。
• 一括変換の前に行う上限チェックでは、ツール名、デバイス識別子、サインインしている場合はアカウントトークンが送信されます。画像データは含まれません。
• 一括変換の後に送信される利用記録には、ファイル数、合計サイズ(バイト)、出力形式だけが含まれ、ファイル名やピクセルは含まれません。
• 変換はこのリクエストの成否に左右されないため、ページを読み込んだ後はオフラインでも動作します。
• EXIF フィールド、GPS 座標、埋め込みカラープロファイルは WebP に引き継がれないため、使わない余分なデータも少し減らせます。
• 変換したファイルは、削除するか、「すべてクリア」を押すか、ページを閉じるまで、タブのメモリに残ります。