PNGは可逆グラフィックや透明背景に便利ですが、Webページで使うには容量が大きすぎることがあります。PNGをWebPに変換すると、品質を選びながらWeb配信用のファイルを小さくできます。PNGからWebPへの変換ツールを開き、実際の表示サイズで結果を確認し、再出力に備えて元のPNGを残しましょう。
PNGをWebPに変換する理由
WebPは多くの写真、イラスト、透明なWebグラフィックで、見た目に必要な細部を保ちながらファイルサイズを小さくできます。ファイルが小さくなれば、ページの読み込みで訪問者がダウンロードするデータも減ります。結果は元画像、品質設定、表示サイズによって変わるため、決まった削減率ではなく出力を確認してください。
WebPは透明もサポートしています。そのため、透明なロゴ、商品画像、UIグラフィックにも使えます。ただし、非常に細い1ピクセルの線画はPNGとよく比較し、必要ならPNGを残す方が安全です。
オンラインでPNGをWebPに変換する方法
1. 元のPNGを残す
変換前に元のPNGを保存します。WebPは配信用のコピーなので、後で編集したり別の品質設定や形式へ出力したりするときに、無劣化の元ファイルが必要になります。
2. 変換ツールを開く
オンラインPNGからWebPへの変換ツールを開き、PNG画像を選びます。変換はブラウザ内で行われ、エンコードのために選択した画像がサーバーへアップロードされることはありません。非常に大きな画像ではブラウザのメモリを使います。
3. 品質を選ぶ
品質設定でファイルサイズと見た目のバランスを取ります。多くのWeb画像では80前後が出発点になります。細部の多いイラスト、小さな文字、商品の輪郭では高めの設定を選び、出力が十分に明瞭だと確認してから低い設定を試してください。
4. 変換、比較、ダウンロード
変換後に元画像とWebPの容量を比較します。実際の表示サイズで透明部分、細い線、文字、グラデーション、輪郭を確認してください。WebPがまだ大きい場合は、画像リサイズで不要な画素を減らしてから配信用コピーを作ります。
WebPの品質設定を選ぶ方法
すべての画像に共通する品質値はありません。写真は中程度の圧縮を隠しやすい一方、フラットな図形や文字はリンギング、色の変化、輪郭のぼけが目立ちます。次の順番で確認します。
- ファイルを開けることと、寸法が正しいことを確認する。
- 明るい背景と暗い背景で透明な境界を確認する。
- 小さな文字、商品ラベル、細い線、グラデーションを確認する。
- ファイルサイズをページやアップロードの上限と比較する。
- 実際の表示で劣化が分かるなら品質を上げる。
最小のファイルがいつも最適とは限りません。商品ラベルを読める状態に保つ少し大きなWebPの方が、数KBを節約して文字が読めなくなる出力より使いやすいことがあります。
PNGを残すべき場合
画素の完全な無劣化が必要な場合、編集ソフトがPNGを要求する場合、または圧縮で変化が目立つ細かなUI画像ではPNGを残します。写真や一般的なWebグラフィックはWebPとPNGを比較し、見た目と配信条件に合うコピーを選んでください。
元画像の画素数がレイアウトに必要な量を超えているなら、変換前にリサイズします。余分な余白がある場合は、先に画像クロッパーで構図を調整します。目標の比率を確認するにはアスペクト比計算機が使えます。不要な画素を減らす方が、大きすぎる画像の品質を下げるだけより効果的なことがあります。
PNGからWebPへの変換でよくある問題
WebPがぼやける、ブロック状になる
品質を上げて再比較します。元画像が表示領域より大きすぎる場合は、先に適切な配信用幅へリサイズします。以前のWebPを何度も変換せず、元のPNGから始めてください。
透明な境界が正しく見えない
実際に配置する背景の上でアルファ境界を確認します。細い透明エッジや正確な色が重要ならPNGを残すか、WebPの品質を上げて出力を比較します。
ファイルがあまり小さくならない
元のPNGが単純で効率よくエンコードされているか、品質設定が高すぎる可能性があります。画像サイズを確認し、適度な品質で試して、実際の表示サイズで結果を比較してください。
プラットフォームがWebPを受け付けない
アップロード先によってはJPGやPNGだけを受け付けます。元のPNGを残し、送信先が対応する形式を出力してください。Webサイトの本番画像を置き換える前に、ブラウザとCMSの対応も確認します。
よくある質問
オンラインでPNGをWebPに変換するには？
PNGからWebPへの変換ツールでPNGを選び、品質を設定し、変換して出力を確認した後、WebPの配信用コピーをダウンロードします。
WebPはPNGの透明を保持しますか？
WebPは透明をサポートしていますが、変換後も透明な境界を確認してください。完全な無劣化画素が必要な画像や、送信先がPNGを指定している場合はPNGを残します。
PNGからWebPにする品質はどれくらいがよいですか？
まず80前後から始め、実際の表示サイズで確認します。細部や文字がある場合は上げ、出力が明瞭で小さくなることを確認できる場合だけ下げます。
PNGからWebPへの変換で画像はアップロードされますか？
OpenVideoMakerの変換ツールは選択した画像をブラウザ内で処理し、変換のためにアップロードしません。大きなファイルではブラウザに十分なメモリが必要です。
圧縮とリサイズはどちらを先にしますか？
元画像が表示領域より大きい場合は、先に画像リサイズで寸法を調整してからWebPに変換します。品質と容量をさらに調整する場合は画像コンプレッサーを使います。
関連する画像ツール
PNGからWebPへの変換ツールでWeb用形式を作り、画像リサイズで正確な画素数を設定し、画像コンプレッサーで最終サイズを調整します。構図を変えるときは画像クロッパーを使い、アスペクト比計算機で目標比率を確認できます。