PNGは文字、スクリーンショット、明瞭な輪郭、透過に適しています。PNGが可逆で符号化するのはCanvasが描画したピクセルデータです。ブラウザの復号、色変換、ビット深度処理で元のピクセルが変わることがあり、プロファイルやメタデータも異なる場合があります。
PNGをWebPに変換する方法
公開する形式を決める前に、WebP出力と元のPNGを比較します。
使い方
1
写真、文字、透過の輪郭を含むPNGを選びます。
2
中程度の品質でWebPに変換し、ダウンロードします。
3
予定の表示サイズで文字・輪郭・階調とバイト数を比較します。
4
PNGが適した画像は残し、他の画像を段階的に公開します。
よくある間違い
- すべての画像に同じ品質を使う。
- 結果を確認する前に元画像を削除する。
- バイト数が小さいだけで画質や検索順位が良くなると考える。
出力形式の選び方
WebP
WebP形式はWeb配信と透過に利用でき、アニメーションも格納できます。ただし、このツールはアニメーション入力から1フレームの静止画を書き出します。アニメーションは保持されません。このツールはブラウザのエンコーダーに品質値を渡します。品質設定100でも可逆WebP出力は保証されません。ダウンロードして結果を確認してください。
品質と透過
中程度の品質から始め、ダウンロードした画像と元画像を比較してください。結果は画像とエンコーダーによって変わります。ページ内のサムネイルは元画像で、変換前後の比較表示ではありません。品質スライダーはPNGの符号化を変更しません。
メタデータとアニメーション
書き出し時にピクセルを描き直すため、元のEXIFなどのメタデータはコピーされません。アニメーション画像は静止画として書き出されます。アニメーションは保持されません。SVG出力はビットマップを格納したもので、ベクターパスへの変換ではありません。
画像形式を比較
JPEG・PNG・WebP・AVIFを内容、透過、互換性、編集用途から比較します。