不透明な PNG を WebP に変換し、結果を比較します

写真の PNG は、Web サイトの WebP としてテストする価値があります。 これは、デザイン ツールからエクスポートされたカメラ イメージ、レンダリングされた部屋のシーン、またはフラットなプロモーション グラフィックである場合があります。 PNG をすぐに削除するのではなく、別のエクスポートを作成し、元のファイルと比較します。 ファイルのサイズは画像によって異なりますので、実際に測定したものが便利です。

ここでは、透明性には特別な注意が必要です。 WebP 形式は Alpha を保存できますが、このツールは現在、白い背景で WebP 出力をレンダリングします。 したがって、透明な入力は、エクスポートでその透明領域を失います。 さまざまな背景に配置する必要があるロゴ、カットアウト、オーバーレイの PNG を維持し、不透明な結果が適切な画像に対してこの変換を使用します。

プリセットは寸法を維持し、シャープニングをオフにすると 90% の品質から始まります。 1 つのファイルが小さなテキストで、別のファイルは写真の背景のファイルを試してください。 薄い境界線、色付きの文字、滑らかなグラデーションを点検します。 デザインは、意図したサイズで表示すると、ラベルの横に色付きのハローを表示しながら、一目で見栄えがすることがあります。

PNG がインターフェイスのスクリーンショットである場合、読みやすさは、数バイトを削るよりも重要な場合があります。 を比較してください PNG エクスポート または、WebP が重要な詳細を軟化させたときにソースを保持します。 大きな不透明な写真の場合は、品質をさらに下げる前に、実際の表示範囲内でフィットをテストします。 Web サイトに表示されない場合は、最初に不要なピクセルを減らしますが、意図した配置に対して十分な解像度を維持します。

WebP 品質のスライダーは、このエクスポートの非可逆エンコーディングを制御します。 より高い設定を行っても、ソースに欠けていた詳細は復元されません。同じ番号でも、異なる形式で同じビジュアル結果が同じになるわけではありません。 比較ツールとして使用: 少し調整し、結果を調べて、自分の品質のニーズを満たす最小のバージョンを維持します。

PNG はその品質管理を同じように使用しないため、拡張機能を変更することは、実際のワークフローの選択です。 PNG に小さなダイアグラム ラベルや正確な色の境界が含まれている場合、ファイルが大きい場合でも、PNG を維持することが適切な決定になる可能性があります。 このコンバーターは、PNG カラー パレットを減らしたり、ロスレス WebP 設定を作成したり、フラット化されたグラフィック内のオブジェクトとレイヤーを編集したりしません。

変換した画像をダウンロードし、実際の Web サイト システムのテスト ページにアップロードします。 ブラウザが WebP を受信したことを確認します。表示されるトリミングは正しく、透明なエッジが予期せず白くなっていません。 特にソースが暗いセクション用に設計されている場合は、ページの背景に対して表示します。 ファイル プレビューだけでなく、コンテキストで変換を確認する必要があります。

次に、モバイル ディスプレイを確認します。 大規模なマーケティング グラフィックは、文字が電話で読めなくなったときに、より圧縮されたコピーではなく、よりシンプルなレイアウトが必要になる場合があります。 レスポンシブ イメージの選択と予約サイズは、別の Web サイト タスクのままです。 サンプルが音が出たら、一致するファイルを一緒に処理します。 この変換中、画像データはブラウザーに残り、ソース PNG は変更されません。

たとえば、ブランド アセットを変換する前に、透明なピクセルで白いワードマークをテストします。 白い不透明な出力は、マークを完全に非表示にすることができます。これは、ファイル サイズの比較だけでは見逃す可能性があります。