PixConvert

PNGをWebPに変換 ― 品質を維持し、容量を削減

PNGからWebPに切り替えることで、ロスレス圧縮を維持しつつ、ファイルサイズを大幅に縮小できます。透過性にも対応。ブラウザのみで処理されるため、画像はプライベートに保たれます。

PNGからWebPへの変換が価値あるものとなる理由とは?

WebPのロスレスモードは、ファイルサイズでPNGを上回り、画質では同等であるため、Webアセットにとってはまさに理想的な選択肢と言える。

ウェブアセット向けに最適化済み

ロスレスWebPは、データ損失ゼロで画像をエンコードします。画質はPNGと同等ですが、ファイルサイズは通常20~30%小さくなります。ロゴやUIアセットに最適です。

アルファチャンネルの完全サポート

WebPは透過性をネイティブでサポートしているため、PNGの透明な背景がそのまま引き継がれます。白塗りつぶしも不要で、画質も損なわれません。

エンコードモードを選択してください

ピクセル単位で正確なUIアセットにはロスレスモードを、ファイルサイズを可能な限り小さくしたい写真にはロッシーモードを選択してください。

PNGをWebPに変換するのは誰ですか?

フロントエンドエンジニア

  • ウェブアプリの読み込み速度を向上させるため、PNGスプライトシートとアイコンセットをWebPに変換する。
  • 大きなPNGヒーロー画像をロスレスWebPに置き換えることで、初期ペイント時のデータ量を削減する。
  • npmパッケージまたはCDNに公開する前に、デザインシステムアセットを最適化する

UI/UXデザイナー

  • FigmaのPNGアセットをWebP形式でエクスポートしてから開発者に渡す
  • 透明なPNGオーバーレイをWebPに変換して、Webベースのプロトタイプで使用する。
  • アプリストアのスクリーンショット画像をWebP形式で準備し、WebP形式に対応しているプラ​​ットフォーム向けに提供する。

CMSおよびWordPressユーザー

  • WordPressのメディアライブラリに追加する前に、PNGファイルをWebPに変換する
  • Shopifyストア向けに画像を準備し、WebP形式に対応している場合は自動的に配信します。
  • プランのストレージ容量に制限されているWebflowまたはSquarespaceサイトで画像ペイロードを削減する

PNGをWebPに変換する方法

1

PNGファイルをアップロードエリアにドラッグ&ドロップするか、クリックしてファイルを参照してください。アイコンセット、UIコンポーネント、スプライトシートなど、PNGアセットをまとめて一度にドロップできます。コンバーターをマルチスレッドWebAssemblyを使用してそれらすべてを同時に処理し、サーバーへのファイルアップロードは一切行いません。

2

ピクセル単位で正確なUIアセット、ロゴ、テキストを含むグラフィックにはロスレスWebPを、写真や複雑な画像など、画質を少し犠牲にすることでファイルサイズを最大限に削減できる場合はロッシーWebPを選択してください。お好みの画質レベルを設定し、確定前に出力ファイルサイズの見積もりを確認できます。

3

最適化されたWebPファイルをすぐにダウンロードできます。元のPNG画像に透明な背景が含まれていた場合でも、WebP出力ではアルファチャンネルが完全に保持されるため、白塗りつぶしや画質の低下はありません。一括変換の場合、すべてのWebPファイルはZIPアーカイブにまとめられ、ワンクリックで簡単にダウンロードできます。

PNGとWebP :何が変わるのか

PNGとWebPの違いを理解することで、ニーズに合った適切なフォーマットを選択できます。

仕様PNGWebP
圧縮ロスレス可逆/可逆
品質素晴らしい素晴らしい
透明性はいはい
アニメーションいいえはい
ファイルサイズ中~大小さい

PNGから変換理由は何ですか?

  • JPGよりもファイルサイズが大きい
  • 写真撮影には適していません
  • 高度な機能に対するブラウザのサポートは限定的です。

WebPを選ぶ理由は何ですか?

  • 優れた圧縮効率
  • 非可逆圧縮と可逆圧縮の両方に対応
  • 透明度とアニメーションのサポート

PNGを使用するタイミング

透明性、ロスレス品質、またはグラフィックやロゴを扱う必要がある場合。

WebPを使用するタイミング

最新のウェブパフォーマンスを最適化する際に、古いブラウザ向けにフォールバック機能を提供することができます。

PNGからWebPへの変換に関するよくある質問

PNG画像をWebP形式に変換する際のよくある質問への回答。

ロスレスWebPは、元のPNGと全く同じように見えますか?

はい、WebPのロスレスエンコードでは、すべてのピクセル値が正確に保持されます。出力は、視覚的にも技術的にも元のPNGと全く同じです。唯一の違いはファイルサイズで、通常は20~30%小さくなります。

透明な背景を持つPNG画像を変換場合、透明度は保持されますか?

もちろんです。WebPはPNGと同様に、8ビットのアルファチャンネルをネイティブでサポートしています。そのため、可逆圧縮と非可逆圧縮の両方のWebPモードで、透明領域が完全に保持されます。

PNG画像を作成する際に、可逆圧縮WebPではなく、可逆圧縮WebPを選択すべきなのはどのような場合ですか?

PNGファイルに写真や複雑な画像が含まれており、ピクセルのわずかな違いが目立たない場合は、非可逆圧縮のWebPを使用してください。ファイルサイズが大幅に小さくなります。ロゴ、アイコン、UI要素、および鮮明なテキストを含む画像など、ピクセル精度が重要な場合は、可逆圧縮ではなく可逆圧縮を使用してください。

なぜ、場合によっては、私のロスレスWebPファイルがPNGファイルよりもわずかに大きくなるのでしょうか?

PNGは、特定の種類のコンテンツ、特に広い面積に単色が含まれている画像や繰り返しパターンを含む画像に最適化されています。このような場合、PNGのdeflate圧縮は、可逆圧縮のWebPよりも優れたパフォーマンスを発揮します。ただし、可逆圧縮のWebPの方がファイルサイズは常に小さくなります。

WebP形式をオープングラフ画像やソーシャルメディアのサムネイルに使用できますか?

ほとんどのソーシャルプラットフォーム(Facebook、Twitter/X、LinkedInなど)は、og:imageタグにはJPEGまたはPNGを推奨しています。これは、クローラーがWebPを確実に取得できない場合があるためです。ウェブページ上の画像にはWebPが最適ですが、ソーシャルメディアでの共有にはJPEGまたはPNGを使用してください。

元のファイルを失わずにPNGをWebPに変換方法はありますか?

当ツールは、お客様の元のファイルを一切変更しません。アップロードされたPNGファイルを読み込み、メモリ上で変換処理を行い、WebPファイルを別途ダウンロードとして提供します。お客様のデバイス上の元のPNGファイルは、一切変更されません。