ページを速くするPNG WebP変換

PNGはくっきりしたグラフィックや透過に優れていますが、重いのが難点です。画面幅いっぱいのスクリーンショット1枚で数メガバイトになることもあり、ページが遅くなり、モバイルで見る人のデータ通信量もかさみます。WebPは見た目を保ったままわずかな容量にするためにGoogleが開発した形式で、2020年以降はすべての主要ブラウザが対応しています。

リサイズやトリミングなしでPNGのファイルサイズを小さくしたいなら、形式を変えることがたいてい最大の効果を生みます。平らな色のグラフィックやPNGで保存した写真は50〜80%小さくなることが多く、画面上での違いはほとんどわかりません。

2つの形式の比較

WebPとPNGを比べると、どちらも透過に対応し、どちらにもロスレスモードがあります。PNGは古いデスクトップソフトや印刷の現場でより広く受け入れられています。WebPには非可逆モードもあり、削減のほとんどはここから生まれます。アニメーションにも対応しています。ブラウザで表示するものなら、たいていWebPのほうが配信に適した形式です。

ブラウザが各PNGをデコードし、アルファチャンネルを保ったまま非表示のキャンバスに描画して、そのキャンバスを選んだ設定でWebPにエンコードします。これらはすべてタブの中で行われます。画像を受け取るサーバーはないので、順番待ちもなく、ファイル数の制限も端末のメモリの範囲だけです。

Chrome、Edge、Firefoxならどれもこの方法でWebPファイルを作れます。SafariのバージョンによってはWebPを表示できてもエンコードできないため、MacでSafariを使っている場合はツールがお知らせし、別のブラウザをおすすめします。

PNGをWebPに一括変換

フォルダごと変換したいですか？ 最大50ファイルを一度に選ぶかドロップしてください。進行状況バー付きで順に処理され、結果は個別にもまとめても保存できます。名前は保たれ、header.png は header.webp になるので、プロジェクト内で差し替えるのも簡単です。

非可逆の画質設定

スライダーで、PNGからWebPへの画質を50〜100の範囲で調整します。初期設定の85は、ほとんどの写真やイラストに合います。小さな文字のあるスクリーンショットなら90以上で文字がくっきり保たれます。大きなメインビジュアルの写真なら、75〜80でも画面上は同じに見え、ずっと軽くなることがよくあります。サイズの欄を見てプレビューを比べ、好みのバランスを見つけてください。

PNG WebP ロスレス変換

ドット絵、UIのモックアップ、また編集する画像など、すべての画素をまったくそのまま残したいときは「ロスレス」にチェックを入れましょう。ロスレスのWebPは、最適化したPNGより通常4分の1ほど小さくなります。非可逆モードほどは小さくなりませんが、何も失われません。

透けている部分を保つ

ロゴ、アイコン、切り抜いた商品は透過背景が欠かせません。このツールは非可逆でもロスレスでも透過を保ったままPNGをWebPに変換するので、どんな色のページにもきれいに配置できます。逆にショッピングモール向けに背景色が必要なら、背景ツールが役立ちます。

Webサイト用にPNGをWebPに変換するなら、同じファイル名のままHTMLやCSSの拡張子を書き換えるのがいちばん簡単です。多くの開発者は、WebPのソースと元のPNGを代替として指定したpicture要素を使いますが、今のブラウザの対応状況なら代替が必要になることはほとんどありません。

WordPress用にPNGをWebPにするなら、変換したファイルをそのままメディアライブラリにアップロードしてください。サーバーの画像ライブラリが対応していれば、WordPressはバージョン5.8からWebPを受け付けています。Shopify、Wix、Squarespace、ほとんどの最近のホームページ作成サービスもWebPのアップロードに対応しています。

メール、SNS、ドキュメント

WebPはブラウザ向けに作られているので、Web以外で使う前によく考えましょう。メールソフト、古いオフィスソフト、一部のSNSではまだ変換されたり拒否されたりし、印刷会社はたいていJPG、PNG、PDFを求めます。そうした用途には元のPNGを残すか、変換ツールでJPGのコピーを作ってください。WebPは、自分で管理するページやアプリでこそ真価を発揮します。そこでは削減した1キロバイトごとに、どの端末と回線でも、すべての訪問者の体験が速くなります。

Core Web Vitals の改善に役立つ？

画像はページで最も大きな要素であることが多いので、ファイルが軽くなればLCPのスコアが上がり、モバイルで見る人のデータ使用量も減ります。形式の変更と合わせて、正しい幅と高さの属性を指定し、スクロールしないと見えない画像は遅延読み込みにすれば、最もよくある速度の警告を2つ解消できます。

先にリサイズ、それから変換

形式は話の半分にすぎません。800ピクセルの列に表示する4,000ピクセルのスクリーンショットは、WebPにしても帯域を無駄にします。高密度の画面でもくっきり見えるよう、表示する幅のおよそ2倍に縮小してから変換しましょう。画像サイズ変更ツールなら、最初のステップも同じようにプライベートにブラウザ内で行えます。

文字や細い線を確認

非可逆圧縮では、細い線や小さな文字がぼやけることがあります。スクリーンショット、グラフ、図を変換したら、プレビューを拡大して元の画像と比べてください。輪郭がぼやけて見えるなら、スライダーを5〜10上げるか、ロスレスに切り替えましょう。写真はずっと寛容で、初期設定以上が必要になることはまれです。

わかりやすいファイル名に

検索エンジンはファイル名を関連性の小さなヒントとして読み取り、画像をダウンロードした人もファイル名を目にします。そのため、IMG_2041.webp より red-running-shoes.webp のような内容がわかる名前のほうが適しています。変換前にPNGの名前を変えておけば、新しいファイルもその名前を引き継ぐので、後から直すことはありません。ページに画像を置くときは意味のある代替テキストを付け、読み込み中にレイアウトがずれないよう幅と高さを指定しましょう。

ファイルが変換できないとき

ファイルが受け付けられない場合は、本当にPNGか確認してください。ツールは拡張子だけでなくファイルのシグネチャを確認します。途中までしかダウンロードされていない画像や破損した画像はデコードできないので、もう一度ダウンロードしてください。すべてのファイルが失敗するなら、ブラウザがWebPをエンコードできない可能性が高く、Chrome、Edge、Firefoxに切り替えれば解決します。

MacでPNGをWebPに変換するには、Chrome、Edge、Firefoxでこのページを開き、Finderからファイルを直接ドラッグします。WindowsやChromebookでも、同じブラウザで何もインストールせずに使えます。AndroidでPNGをWebPに変換するには、Chromeでページを開き、ドロップ範囲をタップしてギャラリーやファイルから画像を選び、結果をダウンロードフォルダに保存します。

WebPはPNGより小さい？ 特に非可逆モードではほぼ必ず小さくなり、PNGで保存した写真で差が最も大きくなります。まれな例外は、PNGですでによく圧縮されている小さく平らなアイコンです。そうなった場合はサイズの欄でわかるので、元のファイルをそのまま使えば大丈夫です。

WebPとAVIFでは？ AVIFはさらに小さくなることがありますが、エンコードが遅く、ブラウザでの作成への対応もまちまちで、多くのCMSやメールソフトはまだ受け付けません。WebPは頼れる中間の選択肢です。広く対応し、すばやく作れて、PNGよりずっと軽くなります。後で編集や印刷が必要になったときのため、元のPNGファイルはマスターとして保管しておきましょう。