PNGをWebPに変換
Webサイトで使うPNGのスクリーンショット、ロゴ、切り抜き商品画像を、透過した輪郭はそのままに、ずっと短時間で読み込めるWebPファイルに軽量化できます。非可逆か可逆かを選んで変換し、できたファイルをCMSにアップロードしてください。
画像変換
またはJPG, JPEG, JPE … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
85 なら写真は元の画像と見た目がほぼ変わりません。ファイルを小さくしたいときだけ下げてください。
JPG、BMP、EPS は透過に対応していません。透明な部分はこの色で塗りつぶされます。
透明な部分の背景に使う16進カラーです(例: #FFFFFF)。
この形式には 1 枚の画像しか保存できません。アニメーションを残すには GIF または WebP を選んでください。
マルチサイズのアイコンは 1 つのファイルに複数の解像度を含み、ブラウザや OS が必要なサイズを選びます。
元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。
上で選んだ辺のピクセル数です。
元のサイズに対する割合です。
画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。
メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。
このツールの使い方
- 1
PNGファイルを追加する
アップロード欄に PNG を最大20枚までドラッグするか、フォルダから選択してください。1ファイルあたり最大95 MBまで対応しているため、書き出した大きなモックアップも問題なく扱えます。
- 2
非可逆か可逆かを選ぶ
初期設定は非可逆モードの音質80で、Web上の写真やイラストに適したバランスです。アイコン、ドット絵、UIのスクリーンショットなど、ピクセルを完全に保ちたい場合は、詳細設定の可逆にチェックを入れてください。
- 3
変換して差し替える
WebPに変換を押して、ファイルを1つずつ、またはZIPでまとめてダウンロードします。
PNGをWebPに変換する価値はありますか?
Webサイトで使う画像なら、ほとんどの場合あります。透過を含めた同じ画像が、通常ははるかに小さくなり、現在のブラウザはすべて表示できます。まだ編集するファイルや、デスクトップソフトで開く相手に送るファイルは、PNGのまま保管してください。
Web制作でPNGをWebPに置き換える理由
PNGは設計上可逆です。GIFに代わる特許フリーの形式として1996年にW3Cによって標準化され、ピクセルデータを一切捨てません。マスターファイルには最適ですが、Webページでは無駄が大きく、PNGで保存した幅1600 pxのヒーローイラストが、ページ上のすべてのスクリプトを合わせたより重くなることもあります。
GoogleはこのギャップをなくすためにWebPを2010年に発表しました。1つのコンテナに2つのエンジンがあり、可逆モードはGoogle自身が公表した比較でPNGより約26%小さく、VP8動画コーデックをベースにした非可逆モードはさらに小さくなります。どちらのモードも完全なアルファチャンネルを持ち、ロゴや切り抜き商品写真を色のついた背景でも使えるようにします。
PageSpeed InsightsなどのページSpeedツールは、以前から大きすぎるPNGやJPEGファイルを手軽な改善点として指摘しており、画像セットを変換することはLargest Contentful Paintを改善する最も早い方法になることが多いです。画像の寸法も変更する場合は、先に画像サイズ変更で調整してから変換してください。
PNGと比べてWebPはどれだけ軽くなるか
元のPNG
1.2 MB
1600 × 900 · アルファ付き24ビット、商品の切り抜き
WebP、音質80
190 KB
1600 × 900 · 非可逆、アルファチャンネルは保持
PNG
Portable Network Graphics
PNG は、1996年に PNG Development Group が公開し、のちに W3C と ISO が標準化した可逆のラスター形式です。すべてのピクセルを正確に保持し、完全なアルファ透明に対応し、文字、シャープな輪郭、単色の面をノイズなく扱えます。この正確さから、スクリーンショット、ロゴ、アイコン、UI グラフィックに最適です。代償はサイズで、PNG で保存した写真は、同じ写真の JPEG や WebP の数倍になることがよくあります。すべてのブラウザ、OS、編集ソフトで PNG を開けます。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 非対応
- 登場時期
- 1996 · PNG Development Group
WEBP
WebP 画像
WebP は、ウェブページの表示を速くするために Google が 2010 年に公開した画像形式です。非可逆圧縮と可逆圧縮の両方、アルファ透過、アニメーションを 1 つの形式で扱えます。非可逆 WebP は、同程度の画質の JPEG と比べて一般に 25–35% 小さくなり、可逆 WebP も通常は PNG より小さくなります。現行のブラウザーはすべて対応していますが、古いデスクトップソフト、印刷サービス、アップロードフォームの中には、今でも受け付けないものがあります。Windows、macOS、最近のほとんどの画像編集ソフトで WebP を開けます。
- 圧縮方式
- 非可逆または可逆
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2010 · Google
サイト運営者がPNGをWebPに変換するのは、透過を保ったままページの容量を減らすためです。WebPからPNGに戻すのは、WebPを読み込めないソフトで編集したり開いたりするためです。
上の数値は写真の切り抜きでの一般的な結果であり、保証ではありません。フラットなグラフィックは非可逆モードでは縮小幅が小さく、可逆モードのほうが大きく縮むこともあります。文字だらけのスクリーンショットは、非可逆WebPで文字の輪郭がぼやける唯一のケースです。その場合は可逆にチェックを入れれば、ピクセルを変えずに容量を節約できます。
寸法、色、透過はそのまま引き継がれ、メタデータを削除(初期設定でオン)により、ブラウザが必要としない編集履歴が取り除かれます。
WebPファイルをサイトにアップロードする前に
- 元のPNGは別のフォルダに保管してください。WebPは配信用のコピーであり、編集用のマスターではありません。
- お使いのCMSが.webpのアップロードに対応しているか確認してください(WordPressはバージョン5.8から対応)。
- 透過画像を1枚、白い背景と暗い背景の両方で表示して、縁がきれいか確認してください。
- HTMLやCSS内の画像参照を.pngから.webpに更新するか、CMSでサムネイルを再生成してください。
- ブラウザのネットワークパネルで変換前後のページ容量を比べ、どれだけ減ったか確認してください。
PNGからWebPへの変換に関するよくある質問
WebPに変換してもPNGの透過背景は保たれますか？
はい、保持されます。WebPは非可逆・可逆のどちらのモードでもアルファチャンネルを保存できるため、切り抜いた商品画像やロゴも透過のままです。非可逆モードでは境界のピクセルがわずかに圧縮されます。細い髪の毛や文字の周りにうっすらと縁が見える場合は、可逆にチェックを入れて再変換してください。あとで元に戻したいときは、WebPをPNGに変換で編集可能なPNGに戻せます。
PNGを変換するなら非可逆と可逆のどちらのWebPを選ぶべきですか？
PNGがフラットなUI、図、ロゴ、ドット絵なら可逆がおすすめです。すべてのピクセルがそのまま保たれ、それでもファイルサイズは小さくなることがほとんどです。実際は写真や柔らかいタッチのイラストであるPNGなら、画質75〜85の非可逆にすると、大きく容量を減らせます。
WebP画像を表示できるブラウザはどれですか？
Chrome、Edge、Firefox、Operaは以前からWebPを表示でき、Safariも2020年のバージョン14(macOS Big Sur以降、iOS 14)で対応しました。現在使われているほぼすべてのブラウザで表示できるため、多くのサイトでは.webpファイルを指す通常のimgタグだけで十分です。
WordPressにWebPをアップロードできますか？
2021年7月公開のWordPress 5.8で、メディアライブラリにアップロードできる形式にWebPが加わりました。それ以前のバージョンでは、プラグインでMIMEタイプを追加しない限りファイルが拒否されます。フォルダごと変換する前にバージョンを確認してください。
WebPが元のPNGより大きくなるのはなぜですか？
数色のインデックスパレットを使う小さなPNG(8色のアイコンなど)で起こります。このようなPNGはもともと非常に効率的に保存されているためです。そのようなファイルは可逆を試し、それでも大きくなる場合はPNGのままにしてください。容量削減の効果が出やすいのは、より大きくて色数の多い画像です。
フォルダ内のPNGをまとめてWebPに変換できますか？
1回で最大20ファイル(1ファイルあたり最大95 MB)まで処理でき、結果はZIPにまとめて受け取れます。それ以上のフォルダは20枚ずつに分けて繰り返してください。1日の利用制限はなく、アップロードしたファイルは30分後に自動的に削除されます。
WebP・PNGのその他のツール
- JPGをWebPに変換JPGをWebPに変換して表示を高速化。見た目はそのままで容量が約4分の1〜3分の1減ります。最大20枚を一括変換、画質も選べて登録不要です。
- 画像をWebPに変換JPG・PNG・GIF・HEIC・TIFF・SVG・RAW写真をまとめてWebPに一括変換。画質は初期値80、透過とアニメーションを保持、アカウント登録不要です。
- PNGをAVIFに変換PNGをAV1ベースの画像形式AVIFに変換。透過を保持し、非可逆・可逆の両方に対応。Chrome、Firefox、Safari、Edgeで表示できます。最大20ファイルを一括変換。
- WebPをPNGに変換WebPをPNGに変換しても透過は失われません。ロゴやステッカー、切り抜き画像の透明な縁もそのまま。アニメーションWebPは最初のフレームか全フレームを出力できます。
- PNGをJPGに変換PNGをJPGに変換して、メール添付や申請フォーム、写真プリント向けに容量を減らせます。透明部分は白・黒・任意の色で塗りつぶし。最大20ファイルを一括変換。
- AVIFをWebPに変換ブラウザやプラグイン、サーバーがAVIFに未対応なら、AVIFをWebPに変換しましょう。透過を保持し、非可逆・可逆を選べて、1回20枚まで変換できます。