2

このトピックに関するいくつかの質問を読みましたが、一般的なフィードバックとして、JPGsは写真用であり、PNGsはその他すべてのものであるというものがあります。

PNGは、次の場合に使用する必要があります。

  • 透明度（1ビットまたはアルファ透明度）が必要です
  • 可逆圧縮はうまく機能します（チャートやロゴ、コンピューター生成画像など）

JPEGは、次の場合に使用する必要があります。

  • 可逆圧縮はうまく機能しません（写真など）
  • フルカラーが必要です

GIFは次の場合に使用する必要があります。

  • 非常に古いソフトウェアやブラウザなどでは、PNGは使用できません
  • アニメーションが必要です

ただし、これらの議論は画像のダウンロードに向けられているようです。私の質問は、画像のレンダリングに向けられています。x方向とy方向の両方で背景を繰り返すことを計画しています...

background-image: url("/path/to/image.jpg");    /* repeat-x & repeat-y */

...そして私は自分の画像をJPG〜13Kまたは〜50Kとして保存することができますPNG。そのため、ブラウザは、約40Kの違いにもかかわらず、この画像が比較的小さいため、かなり迅速にこの画像を取り込むことができます。しかし、ブラウザがページに画像をレンダリングする場合、特に背景が繰り返されるため、この違いは重要ですか？

4

2 に答える 2

6

JPGは低帯域幅の画像に適していますが、鮮明ではないため、GUIにはあまり適していません。

JPGファイルは、はるかに小さいファイルサイズで保存できるため、トランザクションとオンライン配信が高速化されます。

JPGは、さまざまな圧縮レベルで保存できます（通常、1〜12、12の方が高品質です）。

PNGは、色の数が少ない鮮明な画像に適しています。

PNGは100％の透明度をサポートします。透明度を維持するためにPSD（Photoshopドキュメント）に保存する必要はありません。

PNGは、基本的な効果とフォーマットを備えたレイヤーをサポートします

正確なPNGファイルを保存し続けることができ、毎回画質が低下することを心配する必要はありません。

一般に、JPGは写真や写真用ですが、PNGは、コンピューターで生成されたグラフィック、ロゴ、Webアイコンなどでうまく機能します。

JPGとPNGの詳細を見る

于 2012-04-13T05:46:48.253 に答える
2

まず、画像のダウンロードとブラウザでのレンダリングに違いはありません。ブラウザが画像をレンダリングするには、画像を完全にダウンロードする必要があります。

画像が繰り返されるという事実はそれほど重要ではありません。画像のレンダリングに費やされる時間は、画像をダウンロードする時間と比較して重要ではありません。

画像はできるだけ小さい方が常に良いです。引用した経験則は推測に役立ちますが、いつでも両方のオプションを試して、品質を損なうことなくどちらが小さいかを確認できます。

于 2012-04-13T05:01:49.443 に答える