多くの大きな流体画像を含むページがあります。http://altarjewelry.com/gallery
スクロール中に滑らかな 60fps の webapp の感触を得たいです。Chrome DevTools によると、ペイント時間が最大の問題であることがわかります (スクロール中に自分で確認できます)。これは、多くの大きな流体画像が原因であると想定しています。
パフォーマンスに関する HTML5Rocks のすべての記事を読みました。JS のパフォーマンスに関する多くの優れたヒントを見つけましたが、レスポンシブ サイトを構築しているため、小さな固定サイズの画像を使用する以外に、大きな画像の描画時間を最適化する方法はありません。
クライアントによっては、すでにレスポンシブ画像を提供しています。
ご協力ありがとうございました。
あなたの投稿の URL からギャラリーが読み込まれたことがないため、ギャラリーがどのように表示されるかよくわかりません。それが JavaScript の問題なのかどうかはわかりませんが、解決策を考え出すために全力を尽くします。レスポンシブ サイトを構築しているかどうかに関係なく、画像の最適化は画像の最適化です。
アイテムごとに、同じ DPI/PPI と圧縮率で、レスポンシブな 1 つの大きな高解像度画像が本当に必要ですか?
それとも、適切なサイズの画像をさまざまな DPI/PPI と圧縮で、さまざまなディスプレイに提供する必要がありますか? そのすべてがレスポンシブ アプリケーションで引き続き使用されますか?
ギャラリーを表示していて、通常は、実際の画像をより小さく表現したい場合があります。サムネイルまたはプレースホルダーは、通常は解像度が低く、実際の画像に高解像度でリンクしています。これは受け入れられている設計アプローチであり、それから変更する場合は、正当な理由があることを確認してください。
レスポンシブ サイトを構築している場合、一部のユーザーは、幅 320 ピクセル程度の解像度のモバイル デバイスを使用していることは明らかです。このようなことを考えてみましょう: 誰かがデスクトップに現れたとしても、巨大な全幅の画像が読み込まれるでしょうか? 読み込みには永遠に時間がかかり、訪問者はあなたのギャラリーを見ることはありません. あなたのギャラリーは、ワイド スクリーンのデスクトップでどのように見えますか? ページ全体に 1 つの画像をフル幅で配置し、サイトにアクセスするデバイスに関係なく同じ画像をロードすることを意図している場合、レスポンシブ デザインを使用している可能性がありますが、それはベスト プラクティスやグッド プラクティスとはかけ離れていることがわかります。
4 つのギャラリー イメージをデスクトップに配置してみませんか? 以上？その場合、いずれにしても最大サイズになる可能性があります。私はあなたのサイトを数回読み込もうとしたが何も得られなかったので、正直わかりません. ただし、最初の表示でギャラリー画像に実質的に最大サイズがある場合、たとえば、1200 ピクセルの最大レイアウト幅でそれぞれ 200 ピクセルの 6 つの画像がある場合を考慮してください (または、% ベースのフレームワークを使用し、表示幅の 100% を使用していますか? ? レスポンシブ サイトでさえ、コンテンツ領域の最大幅を制限することが多く、これらすべてがより適切な回答を決定するのに役立ちます) ソリューションが出現し始めます。
この場合、画像を 200 ピクセルより大きくする必要はないため、列に全幅の画像が 1 つしか表示されない可能性がある電話では、幅 480 ピクセルの画像の最大初期幅で作業できます。
高品質なものが必要だと思います。それはいいです。それでもファイル サイズを縮小する必要があり、それを圧縮で行います。現在、写真を 50% またはそれ以上に圧縮するとぼやけてしまうと感じるかもしれませんが、低い ppi (ピクセル/インチ) 設定では確実にぼやけてしまいます。
必要なのは、デフォルトの画像エディター設定を 72 または 90 ppi などの従来のデフォルトから変更し、それらを 300、400、500、またはそれ以上に上げて、圧縮を適用することです。その画像の幅が 480px で、72ppi しかない場合、圧縮によってすぐに品質が低下します。ただし、1 インチあたり数百の余分なピクセルがあると、より多くの情報を保存できます。その後、はるかに高い圧縮率を適用して、ファイル サイズをさらに縮小できます。
特大画像アプローチ
もう 1 つのトリックは、同じことを行い、画像を少し大きくすることです。サムネイル/小さな写真の最大サイズが 480px の場合、実際には幅を 540 ～ 600 px、400 ～ 500ppi にして、非常に高い設定で圧縮します。ブラウザは最大幅 480 ピクセルにサイズ変更されますが、パフォーマンスが低下します。すべてがトレードオフです。画像の背景をぼかすこともできます。これにより、写真の前景/主な焦点をより高品質にすることができ、背景に必要な情報が少なくて済み、ファイル サイズが小さくなります。
バッチ処理には不向き
これは、画像ごとに個別に行う必要があります。バッチ編集では、写真ごとに色情報が大きく異なるため、通常、この手法を最大限に活用することはできません。1 枚の写真は 300ppi で 50% の品質で、もう 1 枚は 500ppi で 35% の品質で、目的に合った最高の品質と最小のサイズです。ギャラリーのサムネイルだけでなく、複数の画像に対してもこれを行う必要があります。結局、480px 幅/解像度のディスプレイであなたのサイトを閲覧している誰かに 1400px 幅のフルサイズのデスクトップを提供しても意味がありません。メディア クエリを使用して、適切な大まかなサイズの画像を提供し、小、中、大のバリアントを用意します。うまく行けば、携帯電話でブラウジングする人に大きな画像を提供する必要さえありません...彼らが表示しているギャラリーの画像で十分です。
圧縮設定は、圧縮する必要があるピクセル数が増えるほど、最終的な画質を大きく左右するものではありません。処理するピクセル数が多いほど、圧縮設定が高いほど品質が高くなります。
また、ギャラリーのプロセス/デザインを検討してください。20個ありますか？100? 400? それらすべてを 1 つのページに表示しようとしていますか? それを小さな数に分割します...1ページあたり12-20。画像が小さくて少ないほど、読み込みが速くなり、応答性を維持できます。より大きな画像または高品質の画像が必要な人のためのリンクがあります. 携帯電話で閲覧しているユーザーに、巨大で高品質の画像を表示する必要はありません。
プリフェッチとロード
Server side scripting, and even some javascript solutions can help with this. You might do things like limiting each gallery page to four rows of four images, and then after page load, have a javascript that pre-fetches the first four images that will display on page 2. If your visitor goes to page two after scrolling through page one, the first four images are loaded in cache, and display quickly while the others load normally, giving the experience of a faster page load.
訪問者がサイト内の別のページに移動した場合、12 枚の画像で帯域幅を無駄にすることはなく、4 枚分の帯域幅しかかかりません。賢明な設計は、ギャラリーの 2 ページ目にある最初の 4 つの画像をサイトの別の場所で使用することです。これにより、最初のギャラリー ページへのアクセスが別のページの読み込みを実際に高速化し、4 つの不要な画像を読み込むための帯域幅を実際に放棄することはありません。プロセスを熟考すれば、解決策が自動的に提案されます。
とにかく、これらすべてを理解するのに役立つ関連記事/投稿/リンクは次のとおりです。
圧縮画像は高解像度ディスプレイに適したソリューションですか?
http://www.vanseodesign.com/web-design/compressive-image-tests/
画像サイズの縮小 (ResponsiveDesign.is)
https://responsivedesign.is/articles/reducing-image-sizes
benfrain dot com でこの投稿を検索してください。
Retina ディスプレイ用に高解像度の Web サイト画像を提供する方法
そして、あなたが便利だと思うかもしれないツール...
アダプティブ イメージ ドットコム