3

2000px x 1500px のカラフルな背景画像があり、詳細のために 1.1 MB でレンダリングされる jpeg として保存しています。CSS background プロパティを使用して画像をレンダリングしています。したがって、Web開発に比較的慣れておらず、プロセスのこの時点でデザインの変更を受け入れていないクライアント/デザイナーと協力して、この画像を非常に高速にロードするにはどうすればよいですか. 違いがあるかどうかはわかりませんが、サイトは Joomla 1.5.9 を使用しています。これは私がいつも理解したいと思っていたことですが、解決策を見つけるのに苦労しました...誰かが助けてくれることを願っています!!

みんな、ありがとう！

4

5 に答える 5

8

魔法のように画像の読み込みを速くする方法はありません。ただし、画像を小さな画像に分割すると、驚くほどサイズが大きくなることがあります。そのため、CSS レイアウトに問題がない場合 (通常はそうです)、これを試すことができます。

もう 1 つの可能性は、プログレッシブ JPEG画像を使用することです。それらは、ブラウザーが読み込み時に段階的により正確な画像を表示できるようにエンコードされます。これは、最初は画像がぼやけて (または不完全に) 見えることを意味しますが、フル ディメンションでは、次第にシャープで良くなります。読み込みが遅いイメージ (または少なくとも、読み込みが遅いと認識されているイメージ) に適しています。

于 2011-06-01T05:10:50.900 に答える
3

最善の方法は、ファイル サイズをできるだけ小さくすることです。これがある種のオプティマイザー、例えば smush.it を使用しているとしましょう。背景画像を作成した場合は、最初にプログレッシブとして保存してみてください。最初に低解像度バージョンをロードしてから、ロードを終了します。しかし、最善の方法は、繰り返しパターンを見つけてその部分だけを切り取って使用することで、画像の幅と高さのサイズを縮小することです。ほとんどの about.me 画像は、幅が 1200 ピクセルを超える、サイズが 100 KB 以下です。

于 2011-06-01T05:12:34.617 に答える
1

を使用して、頭の中で画像をすぐに呼び出すことができます

<script>
(new Image()).src = "IMAGE PATH";
</script>

別のプログラムで画像をできる限り圧縮するか、Photoshop cs5 を使用している場合は、Web デバイス用に保存して余分なジャンクをすべて取り除くことができます。yahoo の smush.it を試すことができます。

http://www.smushit.com/ysmush.it/

または、画像が読み込まれていることを確認できるまで、サイトの読み込みを数秒間完全に遅らせることができます.

*CSS

body{
opacity:0;
}

*jQuery

setTimeout(function(){$('body').animate({opacity:'1'},300)},5000);

それはそれほど実用的ではないかもしれませんが。

于 2011-06-01T02:13:03.897 に答える
0

ページの残りの部分が読み込まれた後に背景画像を読み込むとうまくいきますか? 少なくともこの方法では、訪問者は 1.1MB が読み込まれるまでサイトの残りの部分を使用できます。

styleの属性を<body>オンbackground: url(image.jpg)ロード関数内に設定する行に沿ったものはありますか?

于 2011-06-01T05:18:51.477 に答える
0

CDN 経由でイメージを配信すると、処理速度が向上する可能性があります。より優れたものは通常、適切な TCP パケット サイズ/MTU をさまざまなクライアントに配信するように最適化されており、一般に、物事を迅速に配信するための詳細について多くの作業を行っています。携帯電話のような低速の接続は依然としてあなたを嫌っていますが、パケット サイズなどを適切に設定することで、利用可能な帯域幅を最大限に活用できます。

于 2012-05-08T23:33:01.860 に答える