速度性能のために画像/ CSSを最適化する

私は、背景画像、1000x666px、そしてわずか93kbを持っています。私はこのコードで、背景画像としてそれを使用する：速度性能のために画像/ CSSを最適化する

url(/Optimized-image1.png) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

私は背景として、この画像を設定すると、私のjqueryの効果は非常に遅く、全く滑らかではありません。同じことが私のGoogleマップのもので起こります。

背景を白または他の色に設定すると、すべて滑らかなので、私のCSSコードはそれほど良くないと思います。

私はjavascriptでイメージをプリロードしようとしましたが、それは良くありません。 base64も動作していません。

ヒント？

出典

2012-01-21 yesterday

background-size: cover;は、少なくともクロムではパフォーマンスが低いと思われます。

がPoor performance of Chrome using background-size: cover

を参照してくださいここでは代替ソリューションのリストは、クリーンなCSSのリンクのhttp://css-tricks.com/perfect-full-page-background-image/

出典

2012-01-21 20:35:57

私はすべてのもの（カバー）を削除すると、それはかなりうまくいっています！しかし別の質問が出てくる。私が画像をアップロードするとき、それは異なる画面上で「同じ」でなければならない。だから2000x1000の画像は 'スケール'しなければならない、私はあなたが私の意味を知っている。全体の背景を満たさなければなりません。 – yesterday

他のリンクを追加しました –

まず、SMush Itで画像を最適化することができます。また、すべてのCSSファイルをClean CSSで最適化することもできます。

あなたの画像をdinamically 'smush'したい場合は、まだそれを使用することができます。

1）ユーザーは、新しいアップロードされた画像のURL（$のimgurl）
3を取得します）画像
2をアップロードします） http://www.smushit.com/ysmush.it/ws.php?img=$imgurlへの要求を作成し、それがコンテンツのget（それはJSONです）$contentへ
4）JSONを$ newimage = json_decode（$ content）で解析します。
5）新しいと最適化された画像のURLを$newimage->destダウンロードあり、それを使用する:)

出典

2012-01-21 20:33:22 Eray

感謝です。画像の問題は、それが動的な画像だということです。訪問者/ユーザーは自分のイメージをアップロードできます。私はアップロードの上限が400kbに設定されています。 – yesterday

@昨日、私はちょうど私の答えを更新しています。 – Eray

@yesterday、updated。 – Eray

あなたは、彼らがリソースの競合アレントを確認するためのzインデックスを使用して画像やDOMオブジェクトを階層化しようとしたことがありますか？

出典

2012-01-21 20:35:08

速度性能のために画像/ CSSを最適化する

答えて

関連する問題