インタラクティブな画像を作成しましたが、読み込みに少し時間がかかりすぎます。
インタラクティブな画像は次の場所にあります。
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フレームを読み取れるかどうかわかりません。