すべての画像をサーバー上の単一のアーカイブにまとめ、クライアント側で展開する

Question

サーバーサイドでアーカイブ（/バイナリアレイ？）を作成し、実行時に生成されたHTMLページを送信できますか？それはそうですね。それにライブラリがあれば不思議です。特にクライアント側。

コアの質問は次のとおりです： 1.画像の転送方法：js変数として？ Like var imagebinary = "3nmrnmfu5...." 2.イメージをバイナリ形式から元に戻し、必ずそれらを貼り付けます。

私はdata：URLを使用することを考えています。

tomfumbは、Googleが使用する素晴らしいソリューションを提案しました.1つの「大きな」画像がクライアントの小さな部分に捉えられました。

Answer 1

探しているテクニックは「CSSスプライト」と呼ばれることが多く、そこにはかなりの数の記事があります（お気に入りの検索エンジンに聞いてください）。代わりにJavascriptを使用する他のメソッドがありますが、私はCSSメソッドがとても好きです。

http://www.w3schools.com/css/css_image_sprites.asp

や他の多くの

http://www.alistapart.com/articles/sprites

：

は、かなり良い記事があります。

アイデアは、すべての画像を1つの大きな画像にまとめた後、CSSを使用して、特定の場合に表示する大きな画像の部分を制御することです。

は（彼らはそれが説明簡単に

がお気に入りのサーバーを使用して、大きい方の画像にそれらを組み合わせて作る 同じサイズである必要はありませんが1,2,3,4、あなたは4枚の同じサイズの画像を持っていると言いますサイド画像ツールキット。PHPからGDのようなもの、またはImageMagickの、またはPILあなたは、Pythonを使用している場合。ほとんどのサーバサイドのキットは、画像を合成することができ、ライブラリを持っている。

は、次に表示されるCSSルールを作成しますクライアントのより大きな画像の関連部分：

例えば

：

div.sprite { height:100px; width:100px; } 
#image1 { background: url(bigimg.png) 0 0; } 
#image2 { background: url(bigimg.png) -100px 0; width: 100px;} 
#image3 { background: url(bigimg.png) -200px 0; width: 100px;} 
#image4 { background: url(bigimg.png) -300px 0; width: 100px;} 

し、それらを表示するためのHTML：

<div id='image1' class='sprite'></div> 
<div id='image2' class='sprite'></div> 
<div id='image3' class='sprite'></div> 
<div id='image4' class='sprite'></div> 

それはおそらく自動化するにはあまりにも難しいことではありませんもののようなものです。