CSSスプライトの透明度

私はCSSスプライトで私の最初のサイトをやっています。画像を.pngとして保存すると、画像間の空白の量が画像の性能に影響しますか？CSSスプライトの透明度

インスタンスの場合、10個のイメージを非常に小さなキャンバスにフレームする場所が小さい場合、同じ10個のイメージをきれいに間隔を置いて配置したイメージにどこに配置すれば小さくなりますか？

2011-07-09 endy

Safariモバイルでは、常にCSSの背景画像でスポットが表示されないことがわかりました。私はすべての別々のイメージ/要素の間に4ピクセルのスペースを残しがちです。また、Safariモバイルブラウザでは、それが属していないエレメント内の隣接画像を垣間見ることができます。通常は1ピクセル幅または高さで表示されます。 – Joonas

PNGは画像間の空白を圧縮するという点では非常に優れているため、ダウンロードサイズの影響はおそらく非常に小さいです。大きな画像は、ブラウザ側で解凍するとパフォーマンスに影響を与える可能性がありますが、これは非常に小さなシステムでのみ顕著になります。

しかし全体的に、画像を詰め込むのには不利益がありませんので、そうすることをお勧めします。

出典

2011-07-09 09:33:24

それらをしっかりと梱包することで、私の最終的には入り込んで座標を取得するのが少し難しくなります。 – endy

それはずっと難しいとは思いません。それらが長方形で、不規則なサイズで、外観がかなり似ている場合は、これはわずかな問題ではないかと想像していますが、この場合は1ピクセル分のスペースで十分でしょう。 –

イメージのピクセル数が増えるほど、メモリ内の非圧縮ビットマップに変換されるときに多くのメモリが占有されます。

これは、特に低メモリシステムでパフォーマンスに影響を与える可能性があります（テレビやセットトップボックスに組み込まれているブラウザのうち、私が最近使っているものではかなり目立っています）。

出典

2011-07-09 09:30:54 Quentin

私は完全な反対を得ているので、それは変です。私は同じイメージをPhotoshopに保存しました。 1つは全てが間隔を空けてあり、もう1つは同じ画像がすべて一緒に押されてトリミングされています。しかし、間隔があけられた画像は約6kb小さくなります... – endy

使用されている圧縮アルゴリズムと関係があります（物理的に画像の増加が大きくなる前にカラーパレットのオプションが異なると思われます）。私は、ブラウザのメモリに圧縮されていないイメージのパフォーマンスの問題について議論していました。 – Quentin

CSSスプライトの透明度

答えて

関連する問題