web-dev-qa-db-ja.com

通常、画像スプライトは通常「.jpg」ではなく「.png」ファイルに対してのみ作成されるのはなぜですか?

人々がスプライトについて話すとき、彼らは.pngファイルしか言及しないのはなぜだろうと思っていました。 .jpgファイルのスプライトの作成に問題はありますか?

4
tirengarfio

JPEGを使用できないと言うことはありませんが、一般的にPNGの方がいくつかの要因により優れています。

  • タブやアイコンなどのほとんどのページベースの要素は、JPEGよりもはるかに優れた圧縮を行います。
  • PNGは可逆圧縮形式です
  • Jpegは透明度をサポートしていません(主な問題、ほとんどのページ要素には透明度の必要性が含まれています)。

一般的に、要素がそれほど複雑でない場合、PNGファイルは小さく圧縮されます-jpegは写真やより複雑な画像でよりよく圧縮されます-ボタン、タブ、ソーシャルメディアアイコンなどのほとんどのページ要素は、PNGに適しているだけでなく、透明性の必要性もあります。

9
Simon Hayter

PNGがスプライトに向いているというわけではなく、PNGが通常スプライトを使用する画像の種類(ボタン、アイコンなど)に向いているということです。スプライトにはWebに適した任意の画像形式を使用できます。

会社のWebサイトに10人ほどのスタッフのリストがあり、各スタッフの横に小さな写真があるスタッフページがあるとします。すべての写真を1つのSpriteにマージしてこのページの速度を上げたい場合、この例ではJPEGが適切な選択肢になるでしょう。その種の画像の圧縮が向上するからです。

8
Tim Fountain

スプリッティングはJPEGにも使用できます。ルールを覚えておいてください:

  1. 写真にはJPEG、アートにはPNG(または両方にWebP)を使用します
  2. スプリッティングは装飾的な画像用であり、コンテンツではありません。例えば写真共有Webサイトや画像の最適化について説明しているWebページで写真をスプライトしないでください。スプライトの背景画像やその他の装飾画像を作成します。
  3. 不注意にJPEGを一緒に吐き出すと損失が発生し、ある画像が別の画像ににじみ出る可能性があります。 jpegtranの ロスレスクロップアンドドロップ機能 を使用
2
Nicholas Shanks