2011-01-06 9 views
0

私は、お客様から新しいウェブサイトのレイアウトを持っています。レイアウトには1280×1795ピクセルの風景が背景画像として含まれています。そして、顧客はこの背景を変えたくありません。ボディータグ背景画像の提案が必要

私の質問は、このイメージをバックグラウンドとして使用する場合のベストプラクティスですか?

ページの速度も最適化され、読み込み時間も最適化されるようにします。

ありがとうございます。

+1

画像ファイルのサイズはどれくらいですか?縮小するためにイメージに使用される圧縮を変更する以外に、HTML/CSSの賢明な方法はありません。ブラウザにキャッシュさせるだけです。 –

答えて

1

この画像は、最適なソリューションを変更する必要はありません場合は

はhtaccessをwhith適応キャッシュ制御を使用することです。

0

あなたのウェブサイトでPHPを使用している場合、apcキャッシュメカニズムを使用してキャッシュに画像を保存するか、フレームワークを使用してフレームワークのデフォルトメカニズムを使用してキャッシュします。画像は、簡単な画像圧縮技術、のものであり、右のファイル形式を選択すると、大幅に助けることができる内容に応じてSanil S

0

あなた自身が素敵なパターンを持っている場合は、繰り返す場所を見つけて、そのサイズに画像をトリミングしてみてください。次に、あなたのページのあなたのCSSには、単に身体に追加します。

body { background: url("pattern.jpg") repeat-all; } 

あなたが一方向のみに繰り返されるパターンを持っている場合は、そのようにのみ使用し、その後、下向きに繰り返す必要があり、「列」のパターンとして

body { background: url("column.png") repeat-y #your-background-rgb-colour; } 

これでページを繰り返し表示しますが、それを横切って繰り返しません。ページ全体でイメージを繰り返す場合も同じですが、repeat-xを使うだけです。

次は、画像フォーマットです。今ここで私たちは本当に主観的なところですが、ここでそれを取ります。

  1. .jpgの任意の色のクリッピングなしで、フォトリアリスティックでなければならないイメージのためにこれを使用する:あなたは、4つの主要なオプションがあります。ウェブ閲覧の場合、一般に約70%の品質を使用できます。
  2. .gif設定された数の色しか必要としない画像の場合。 GIF画像は非常に小さくすることができますが、画像から不要な色を失うことになります。
  3. .png(限定パレット)このpng形式は、前述のgifと同じ方法で動作しますが、場合によってはこれより小さい結果が生成されることがあります。
  4. .png(フルビット) jpgと同様に、このpng形式では、すべての色と写真のリアルな画像が可能です。しかし、それは一般にjpgよりも大きな画像を提供するが、圧縮アーチファクト(画像内のブロックビット)は少ない。

ちょうど圧縮設定で遊んでみてください。何か気に入っています。 http://www.askapache.com/htaccess/apache-speed-cache-control.html:ネイサンC.