PNG/JPG を WebP にするとぼやける?品質スライダー、透明背景、互換性の説明

画像を WebP に変換する前に最も大切なのは、「必ず小さくなるか」ではありません。元画像は何か、透明が重要か、対象システムが WebP を受け付けるか、品質スライダーをどこまで下げても見た目が許容できるか、を確認することです。LocalTools の WebP 変換入口は 1 枚の静的画像をローカルで変換する用途に向いていますが、無劣化 WebP 専用ツールでも、バッチ圧縮ツールでも、アニメーション変換ツールでもありません。

LocalTools編集チーム内容更新

WebP 変換時に起きること

LocalTools では、WebP 変換ツールと汎用形式変換ツールは同じ変換画面を使います。WebP 入口から入ると、目標形式が既定で WebP になっているだけです。ブラウザでデコードできる 1 枚の画像を読み込み、元のデコード済みビットマップの幅と高さで canvas に描画し、ブラウザのエンコード能力を使って WebP ファイルを書き出します。

そのため、変換によってピクセル寸法は変わらず、自動でトリミング、回転、目標 KB の探索を行うこともありません。元のバイト数と変換後のバイト数は表示されますが、それは実際の結果であって保証ではありません。ブラウザが要求された形式を書き出せない場合、ツールはエラーを出し、代替 PNG を WebP として静かにダウンロードさせることはありません。

品質スライダーの考え方

WebP の品質スライダーは非可逆エンコードに使われます。数値を低くするほど通常は小さなファイルを得やすくなりますが、写真の細部、文字の縁、細かな質感に劣化が早く出ることがあります。数値を高くすると保守的ですが、ファイルがあまり小さくならない場合もあります。ブラウザのエンコーダや画像内容によって結果は異なるため、特定のパーセントを万能の答えと考えないでください。

文字入りスクリーンショット、UI スクリーンショット、小さな logo を扱う場合、品質を下げすぎると縁がぼやけることがあります。自然写真なら軽い劣化は目立たない場合があります。安定した確認方法は、プレビューのサムネイルだけを見るのではなく、実際に使う表示サイズで書き出し結果を確認することです。

透明背景はどうなるか

WebP は透明に対応しているため、透明チャンネル付き PNG を WebP に変換すると、形式としては透明部分を保ち続けることができます。ただし結果はブラウザのエンコード結果と利用先の環境にも依存します。ツールには個別の alpha 制御、無劣化スイッチ、透明エッジ最適化オプションはありません。

JPEG を選ぶと、透明は保持できません。共通変換ツールは JPEG 書き出し前に白背景を敷きます。白いページ、証明書類フォーム、一般的な写真納品には向きますが、素材を暗い背景や色付き背景に重ねる必要がある場合、白背景は目立つ四角形になります。その場合は PNG または WebP を使い続けるべきです。

形式名より互換性が重要

WebP は Web 配信に適していますが、すべての管理画面、チャットツール、オフィスソフト、投稿システムが WebP を受け付けるわけではありません。変換前に、対象入口で許可されている形式を確認してください。JPG/PNG のみと書かれているなら、バイト数を小さくしたいだけで WebP を提出しないでください。

また、元ファイルを読み込めるかどうかもブラウザが決めます。一般的な JPG、PNG、WebP、AVIF は現代的なブラウザでおおむねよく対応されていますが、特殊なスマホ形式、RAW、一部の古いファイルは読めると決めつけるべきではありません。ここでの AVIF は共通変換ツール内の別の目標オプションであり、この記事の重点ではありません。

仮の例

たとえば 1600×900 の透明イラストを Web 記事に置き、PNG より軽くしたいとします。まず WebP 変換ツールで WebP を選び、元のピクセル寸法を保ったまま書き出し、透明な縁が正常かを確認し、その結果を実際のページ背景に置いて確認できます。縁がぼやける、または背景が合わない場合は、品質を上げるか PNG に戻します。

別の例として、1600×900 の JPG 商品写真を、500 KB 未満しか受け付けないシステムにアップロードするとします。単に WebP に変換するだけで小さくなる場合もあれば、まだ上限を超える場合もあります。プラットフォームが WebP を許可し、明確な KB 上限があるなら、さらに目標 KB 圧縮を行い、ツールが最も近い結果しか出せない場合があるという制限を受け入れる必要があります。

仮定:透明イラストを WebP に変換する

まず WebP に変換して透明な縁を確認します。対象の管理画面が WebP を受け付けない場合は PNG を使います。KB 上限まで圧縮する必要がある場合は、目標 KB 圧縮の流れを使います。

期待してはいけない機能

現在の WebP 入口は 1 回に 1 枚の静的画像を処理します。バッチ、ZIP、フォルダ取り込み、アニメーション WebP の保持、無劣化 WebP モード、メタデータ保持、カラープロファイル制御、履歴はありません。canvas による再エンコードでは通常 EXIF、XMP、IPTC、ICC などの情報が失われます。アニメーションのある元画像も静止フレームになります。

目的が Web サイト素材をまとめて処理することなら、バッチ圧縮系ツールを使えます。目的が形式の判断なら、まず形式の選び方を読み、本当に WebP に変換する必要があるかを決めてください。

よくある質問

PNG を WebP に変換して透明背景を保てますか?
WebP 形式は透明に対応しており、ツールはブラウザのエンコード能力に従って WebP を書き出します。ただし個別の透明最適化や無劣化 WebP スイッチはないため、結果はプレビューで確認する必要があります。
WebP に変換すると必ずぼやけますか?
必ずではありません。品質が低いほど劣化が出やすく、品質が高いほど保守的です。目立つかどうかは画像内容と実際の表示サイズによります。
WebP 変換ツールはバッチ処理やアニメーション保持ができますか?
できません。現在の入口は 1 枚の静的画像を処理するもので、バッチ、ZIP、アニメーション保持は提供していません。
WebP 変換ツール

エンコードはこの端末のブラウザの canvas が行います。

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

ツールを開く

参考資料

画像圧縮と形式選択