sprites vs画像スライス
https://stackoverflow.com/questions/1069800
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
りませんが、スプライトアプローチ画像(http://www.alistapart.com/articles/sprites).誰でもケアをプ/連結実績のsprites前古のスライス?
解決
メリット：
- することで、サーバをひとつの大きな画像より小さい。
- で若干スピードのためのwebブラウザへの負荷などのイメージです。
- ブラウザだけがロード画像としてそのニーズとして、ご利用の場合は、複数の画像にロールオーバー、ブラウザが"一時停止"を初めてロールの要素となります。ここでは解決できspritesがありますので一つだけの画像を負荷時のものです。
連結:
- このような痛みをコードで複数枚画像を利用した少なくとも)
他のヒント
スプライトの主な利点は、ブラウザがウェブサーバから以下の画像を要求しなければならないということです。これは、HTTPリクエストの数を削減し、より効果的な設計の部分を圧縮することが可能となります。これら二つの見所にはスライス画像の欠点を表します。
ここでは、スプライトは、ウェブページの読み込み速度を向上させる方法をいくつかの良い例を見ることができます：
一つは、多くの場合、CSSスプライトを使用しての欠点は、メモリフットプリントで見過ごさ
<のhref = "https://web.archive.org/web/20130605000516/http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/ "REL =" nofollowをさnoreferrer "> https://web.archive.org/web/20130605000516/http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/ の
スプライト画像を慎重に構築されていない限り、、あなたが終わります 無駄なスペースの信じられないほどの量。私のお気に入りの例はWHITからです この画像テレビのウェブサイト、スプライトとして使用されます。ご了承ください これは、1299×15,000 PNGです。それは非常によく圧縮 - 実際 ダウンロードサイズは26Kの周りにある - しかし、ブラウザは、圧縮されたレンダリングされません。 画像データ。このイメージをダウンロードし、解凍された場合、それは意志 メモリ（1299 * 15000 * 4）のほぼ75メガバイトを使用します。
スプライトがブラウザにロードされ得るとき、彼らは非圧縮保存されています。 26キロバイトのファイルはRAMのなんと75メガバイトを取るために解凍することができます。あなたは非常に大きい寸法のスプライトを使用しての留意する必要があります。
貧しいCSSのサポート（レガシーブラウザ）とブラウザで何が起こるかの問題もあります。スプライトは完全に壊れてしまうことがあります。
Sprites
メリット：
- 以下のHTTPサーバへの接続
- 高速負荷がブロードバンド
連結:
- な封止:変更したい場合は、一つの画像は、変化のスプライト
- が難しい設定を個々の画像を、CSSではなくツール
- な劣化:場合にはブラウザをサポートしないCSS、トラブル
CSS Sprites:
メリット：
- 優雅な低下に対応していなブラウザについて(テキストで表示時に背景画像なリンクはお断りいたします)
- 少HTTP要求
- 各画像は別の架のようにカラーテーブルでの画像スライスする以上のものを手にすることで架よCSS sprites
連結:
- が問題となることがあれば画像がオフになり、ブラウザは少ない)
画像スライス:
メリット：
- ユーザーが知覚速負荷からの駆い。
- 負荷の需要のように、ユーザが所彼の画像の上でマウス
連結:
- のウェブページに大きなサイズのクライアント側でもない場合があったので、それをする場合のサーバー側となります。
（私たちは SmartSprites を使用）CSSスプライトジェネレータを使用して調べてください。そうすれば、あなたはローカルでスライスを行うと、ビルドプロセスはspritemapを生成することができます。これは、両方の世界のベストです。
それはフロントまで、変更時の作業量が減少するため、またSmartSpritesはあなたのためではありませんが、他の人は間違いなくあります、しかし、私はそれが好きです。
短所 - 古いブラウザで遅く/多分ホバー効果でそれらに取り組んでいない（opera6） - 正しく使用しない場合は非常に/あまりにも巨大な（！グループ適切にそれらを）得ることができます - それらを設定するための面倒な作業
の長所 - 一つの大きな画像は、次に、結合されたすべての個別画像（一方のヘッダ/カラーテーブル）小さいため、より少ないバイトが転送さ - 以下のHTTPリクエスト
スプライトの主な欠点は、それがハード読み取り/維持/あなたのCSSを変更することができます。スプライト内の正確なピクセルオフセットを覚えておくことが難しいことができます。
長所： それはすべてのために1枚の画像を使用しているので、それはhttpサーバにあまり負荷を必要とします。
短所： - コードへのハード。あなたはそれを正しく表示できるように、スプライト内の各画像を座標知っている必要があります。あなたは、画像のサイズを変更したら、あなたはすべてを調整する必要があります... - 大きな画像が表示するのに長い待っていたページを作成することができます。画像を使用しながら、遅いインターネット接続を持つユーザーは、一つ一つを見ることができます。
のベストプラクティス。 画像上の例ロールのためにそれを使用。
私は1つのファイルにすべてのイメージを持つよりも、類似した画像（通常、ホバー、選択されたページ、選択されたページの親ページ）をグループ化するの真ん中地面に行くことを好みます。 PhotoshopやIllustratorで通常のように、これらの、あなたの画像スライスを作成するには、ファイルを開くと、ショートカットキーと組み合わせます。私は= "http://www.interactivellama.com/blog/archives/photoshop-script-combine-two-images-css-hover-css-sprite/" のrel = "nofollowをnoreferrer" のhrefを
