PNGファイルの適切なサイズ設定が重要な理由

  • サイズが間違っているPNGファイルは、Retinaディスプレイでぼやけたレンダリングを引き起こします。
  • サイズの大きい透明PNGは帯域幅とメモリを浪費する
  • 一貫したサイズ設定により、UIコンポーネントのレイアウトずれを防ぎます。
  • デザインシステムのPNGアセットは、トークンで定義された寸法と完全に一致する必要があります。

PNG画像のリサイズに関するベストプラクティス

  • 常に最大のソースからサイズ変更してください。小さなPNGから拡大しないでください。
  • Retinaディスプレイおよび高解像度ディスプレイ向けに、@2xおよび@3xバリアントを生成します。
  • サイズ変更後にPNGのアルファエッジを確認する ― リンギングやハローがないか確認する
  • PNGマスターファイルは、将来異なる寸法にリサイズする場合に備えて保存しておいてください。
  • アルファチャンネルの正確性を確認するため、明るい背景と暗い背景の両方でPNG出力をテストする。