3

インタラクティブな画像を作成しましたが、読み込みに少し時間がかかりすぎます。

インタラクティブな画像は次の場所にあります。

southernwindowdesign.com

5つの画像を使用して、各状態をステップスルーします(クリックしてドラッグします)。画像を高品質に保ちたい。したがって、それ以上のjpeg圧縮は行われません(punypngおよびsmush.itを含む)。

ロード時間を短縮するためのアイデアはありますか?私は、データURI、キャンバス、PNG圧縮(クール)などを使用することに挑戦したいと思っています。

どんなアイデアや指針も役に立ちます。

更新: アドバイスをくれたすべての人に感謝します。あなたが与えたアドバイスを使用した場合、私はあなたにプラスワンを与えました。別の静的サブドメイン(s2)を設定しました。これは、今後数時間ほどで伝播するはずです。今日の後半に、おそらくいくつかの画像をこの新しいサブドメインに切り替えます。また、画像が読み込まれる順序を変更し、あちこちで他のいくつかの最適化を行いました。

私は誰かが各画像の冗長ピクセルを利用する方法を知っていることを望んでいました。すべての画像を1つのファイルにエンコードし、JavaScriptのキャンバスのgetImageData()を使用して巧妙な方法で読み取る方法はありますか?

http://www.eswd.com/southern/test.jpgでgetImageDataアプローチを試しましたが、jpegの損失がないため(Quality = 100!= 100%)、http://www.eswdが表示されます。 com / southern/test.aspx。これは良くありません。同じ手法を使用して画像をPNGとして保存すると、すべてのデータを含むjpegよりもファイルサイズが大きくなります(赤い境界線はありません)。

私は.APNGを使って作業し、そのようにピクセルデータを読み取ることを検討しています...しかし、フォーマットは開発の初期段階であるため、ファイルサイズをまったく縮小しないようです...そして私はmキャンバスでアニメーションの個々のPNGフレームを読み取れるかどうかわかりません。

4

4 に答える 4

7

ページ全体の読み込みでは、ロゴの約20の画像リクエストを含む40のhttpリクエストが行われ、ドアのスライド画像の前に読み込まれます。それらの他の20枚の画像をスプライトします。次に、main.jsが読み込まれるまで、ドアのスライド画像は読み込まれません。そのファイルはわずか1kbです-おそらくそれをキャッシュすることから多くの利益を得ることができません。そのスクリプトをページにインライン化して、ドアのスライド画像をより早く読み込むことができるようにする必要があると思います。

FirebugネットパネルやHttpWatchなどのツールを使用して、リソースの読み込みのウ​​ォーターフォールチャートを表示し、ドアのスライド画像ができるだけ早く読み込まれるようにリクエストを最適化する必要があります。Firebugネットパネルでこの投稿を読んで、最も正確なタイミングを提供するバージョンを使用していることを確認してください。

于 2009-12-18T04:13:50.343 に答える
4

スプライトとして使用する画像を1つ作成しますか? http://www.alistapart.com/articles/sprites/

于 2009-12-18T04:01:15.000 に答える
1

できることはたくさんあります。

私の場合、HTML 自体は最初の読み込みに約 7 秒かかりました。これは合計時間の約半分です。

知覚されたパフォーマンスに焦点を当てたいと思うかもしれません。大きな画像の場合、ページの OnLoad ハンドラーに画像を読み込むことで、残りのページのレンダリングにかかる​​時間を遅らせないようにすることができます。

スプライトに加えて、画像を複数のサブドメインに分割して、ダウンロードの並列性を高めることもできます。

ちょっとしたことですが、.ico ファイルのメタ タグを削除できます。現在は、最初に読み込まれた画像の 1 つです。優先順位ではないので、待つことができます。

また、step1.jpg から step5.jpg の後に、loading.gif アニメ gif が読み込まれます。本当に必要な場合は、最初にロードする必要があります。

それが役立つ場合に備えて、画像の読み込み順序を制御する方法などを含む、これらのタイプの最適化について、私の本に章全体を書きました: Ultra-Fast ASP.NET

于 2009-12-18T04:42:49.907 に答える
0

適用する画像コンテンツの最適化をいくつか探しましたが、要件を満たす唯一のものはベースドア画像です。http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg Web ページにアップします。それは切り落とされる可能性があります。ただし、数バイト以上節約することはできません。

于 2009-12-18T04:28:32.203 に答える