通常、画像スプライトは通常「.jpg」ではなく「.png」ファイルに対してのみ作成されるのはなぜですか?
人々がスプライトについて話すとき、彼らは.png
ファイルしか言及しないのはなぜだろうと思っていました。 .jpg
ファイルのスプライトの作成に問題はありますか?
JPEGを使用できないと言うことはありませんが、一般的にPNGの方がいくつかの要因により優れています。
- タブやアイコンなどのほとんどのページベースの要素は、JPEGよりもはるかに優れた圧縮を行います。
- PNGは可逆圧縮形式です
- Jpegは透明度をサポートしていません(主な問題、ほとんどのページ要素には透明度の必要性が含まれています)。
一般的に、要素がそれほど複雑でない場合、PNGファイルは小さく圧縮されます-jpegは写真やより複雑な画像でよりよく圧縮されます-ボタン、タブ、ソーシャルメディアアイコンなどのほとんどのページ要素は、PNGに適しているだけでなく、透明性の必要性もあります。
PNGがスプライトに向いているというわけではなく、PNGが通常スプライトを使用する画像の種類(ボタン、アイコンなど)に向いているということです。スプライトにはWebに適した任意の画像形式を使用できます。
会社のWebサイトに10人ほどのスタッフのリストがあり、各スタッフの横に小さな写真があるスタッフページがあるとします。すべての写真を1つのSpriteにマージしてこのページの速度を上げたい場合、この例ではJPEGが適切な選択肢になるでしょう。その種の画像の圧縮が向上するからです。
スプリッティングはJPEGにも使用できます。ルールを覚えておいてください:
- 写真にはJPEG、アートにはPNG(または両方にWebP)を使用します
- スプリッティングは装飾的な画像用であり、コンテンツではありません。例えば写真共有Webサイトや画像の最適化について説明しているWebページで写真をスプライトしないでください。スプライトの背景画像やその他の装飾画像を作成します。
- 不注意にJPEGを一緒に吐き出すと損失が発生し、ある画像が別の画像ににじみ出る可能性があります。 jpegtranの ロスレスクロップアンドドロップ機能 を使用