ASP.NETを使用したスプライトイメージの作成

Question

大きなパフォーマンス上の問題があります。問題は私のウェブサイトの1つに約180の画像を呼び出すスライダがあることです。それら180枚の画像のそれぞれは、クライアントブラウザによって個々のURLを介してダウンロードされる。それらはgifとjpgが混在しており、それらを1つの画像に結合したいと思います。透明性は問題ではないので、好ましくはjpgである。イメージはSQLデータベースに格納され、MVCコントローラを介して表示されます。このスプライトは、より伝統的な汎用ashxハンドラとは対照的に、MVCコントローラを介して作成することもできると思います。

私はいくつかのグーグルを行い、blog post by Scott Hanselmanを見つけました。ポストは、チェック画像を組み合わせる方法を説明し、一般的に私がしたいことをしています。それは2005年に書かれたので、もっと良い方法があれば私は興味があります。私はImageResizerを別のプロジェクトで使っています。私はpodcast by Mr. Hanselmanを聞いて、IISと.NETを使ってイメージのサイズを変更するプロジェクトの創始者と話しました。そのポッドキャストと私の経験から、.NETとIISでの画像操作が変わってしまいます。

この方法でイメージをスプライトにサイズ変更してマージするのは良い考えですか？私はスプライトジェネレータを必要としません、私はスプライトとして使用できる単一の画像に.gifとjpgを組み合わせる効率的な方法が必要です。

Answer 1

イメージにすべてを組み合わせることはお勧めしません。ファイル全体がダウンロードされるまでイメージの初期外観が遅れるためです。目に見えるものができるだけ早くロードされ、全体的なスループットのために残りの部分が最適化されるようにする方がよい

イメージがそれぞれ50KB未満の場合は、スプライトイメージとして組み合わせることは意味がありますが、一度に10個ずつ組み合わせることをおすすめします。イメージが小さい場合、それぞれ5KBのように、一度に30個は合理的です。

現在地ボトルネックのシリーズが心配するんだ程度

1. HTTPオーバーヘッドと正しいディスクキャッシュとエッジキャッシングと解ける同時接続制限（スプライト画像はこれで助ける）
2. サーバーのスループットのオーバーヘッド（ ）
3. ブラウザのレンダリングのオーバーヘッド（スプライトはアイコンやサムネイルに最適ですが、巨大ではありません.1メガピクセル以下に抑えてください）。

jpeg形式で結合すると圧縮が改善されることがありますが、それ以外の場合はアーティファクトが発生します。たとえば、ラインアートと写真を混在させることは悪い考えです。 Jpegはラインアートでが悪いです。必要に応じてPNG、さらにはPNG-8を使用してください。場合によっては、JPEGが100％の品質でGIFまたはPNGバージョンよりも小さくなることがありますが、ほとんどの場合、ラインアートはPNG形式で保存するのが最も適しています。

これらの写真のIDがあり、ディスクキャッシュを使用してダイナミックルートを計画している場合は、タスクが大幅に簡略化されます。

ライブラリImageResizerライブラリは、ダイナミックパイプラインとディスクキャッシングシステムに非常に簡単に「プラグイン」させます。

この場合、implement IVirtualImageProviderとIVirtualBitmapFileになります。ビットマップを生成し、パイプラインに残りの部分を処理させる簡単な例については、Gradient pluginを参照してください。

URL構文を定義し、FileExistsとGetFileメソッドでそれを探す必要があります。 /combine-images.ashx?idlist=34,56,79,23 & dir = horizo​​ntal & width = 50 & height = 50のようなものです。

次に、それぞれの画像をロードし、Managed APIでビットマップインスタンスにサイズ変更し、割り当てたキャンバスに描画する必要があります。

ほとんどのボトルネックは、おそらくSQLから画像を取り込むことになります。サーバー上で制限されたRAMを使用している場合は、並列アプローチよりも安全な方法があります（つまり、SQLから一度に1つのイメージを取得し、サイズを変更して描画し、データを破棄します）。あなたのソースイメージが小さければ、マルチスレッドapprachは大丈夫かもしれません。ディスクキャッシュがあっても速くする必要があることを覚えておいてください。要求が30秒後にデフォルトになるためです。正常に終了すると、空のディスクキャッシュを使用して2秒以内に10個のイメージスプライトを提供できるようになります。キャッシュされると20ミリ秒になります。

これはちょっと圧倒しているようですが、私はcustom plugin developmentを提供していますが、キューがあります。

リクエスト1ファイルあたりのアプローチには多くの利点があり、Spriteバンドワゴンでホッピングする前に、ImageResizerのディスクキャッシュとSqlReaderプラグインを試してみる価値があります。間違ったアプローチだと言っているわけではありませんが、キャッシュされていないMVC + SQLは、貢献する可能性のあるオーバーヘッドを増やす可能性があります。

Answer 2

ただ、猫で、より最近の強打のためのスコットのブログに探し続ける： http://dotnetslackers.com/articles/aspnet/CSS-Sprites-and-the-ASP-NET-Sprite-and-Image-Optimization-Library.aspx

乾杯： http://www.hanselman.com/blog/NuGetPackageOfTheWeek1ASPNETSpriteAndImageOptimization.aspx

スコット・ミッチェルもここでチュートリアルを持っています。