2017年に画像をロードするためのスピナー対ブラー？
私のクライアントは写真家です。彼のウェブサイトには3種類の画像が含まれています。
1）ホームページ全画面背景ギャラリー画像
2）ギャラリースライダーの画像
3）画像付きのブログ投稿
それぞれにどのオプションを選択するか決められません。
写真を見る体験を楽しむ場合、スピナーを使用しても大丈夫ですか、それとも読み込み中にぼかす必要がありますか？
最新の更新：
- ギャラリー
画像は高品質/解像度であるため、モバイルユーザーの場合は読み込みに時間がかかる可能性があるため、次のようにしました。
1）ぼやけた低解像度の画像を読み込みます。
2）遅延ロード。
3）ロードに3秒以上かかる場合は、スピナーを追加して、ユーザーの注意を1〜2秒節約します。
- ブログ
画像の方がはるかに軽量で簡単にロードできるため、私は次のもののみを使用しました。
1）ぼかし。
2）遅延ロード。
みんな助けてくれてありがとう！
3つのケースのすべてで同じアプローチを使用する必要があります。複数のアプローチを使用すると、ユーザーが混乱するだけなので、さまざまなイベントに対する複数のフィードバックではなく、画像の読み込みに対して1つのフィードバックを選択します。
ぼかし効果と遅延読み込みを組み合わせて使用します（詳しくはこちらをご覧ください https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/ ）。
スピナーの方が読み込みに適していますが、個々の画像を読み込むために複数のスピナーを並べて表示することは、あまり美的ではありません。
ぼやけた写真のテクニックを使用し、ぼやけた画像は不確定進行標識であるため、特定の状況では進行状況バーの使用を検討してください。
スピナーは、何かが起こっていることを示す すばやく完了するアクション に役立ちます。アクションが1秒以上かかる場合は、progressを示す必要があります。画像をプログレッシブにロードすると（ぼやけ->くっきり）、それでも画像が完全にロードされたことを示しません。たとえば、最終的な画像が高解像度でない場合、または意図的にぼやけている場合（一般的な手法）、エンドユーザーは画像が完全に読み込まれたことを知らない場合があります。
実装事項
プログレッシブ画像読み込みのすべての実装が同じになるわけではありません。
この記事 によると、Facebookはテクニックを使用して、最終的な画像を表すプロフィールカバー写真のぼやけた画像をすばやく読み込みます。接続が遅い場合でも、ユーザーは画像が読み込まれた後の画像をまだ把握しているため、これは素晴らしいことです。この記事では、同じことを実現する方法について説明します。
Mediumは ぼやけた画像テクニック をブログの投稿に画像をロードするためにも使用しますが、その実装はFacebookよりも有用性が低いようです。遅いネットワークを使用している、または接続が中断されたと想像してください。表現のないぼやけた画像を表示することはどの程度便利ですか？
ぼやけた画像をプログレスバーで拡大する
Flickrはぼかし写真の手法も使用しますが、下の画像では、進行状況バーを使用して、読み込まれた画像の量を示すことも確認できます。
これは、イメージが完全にロードされたときにわからないという元の問題に対処します。遅い接続では、これは本当に役立ちます。
一連の画像（ホームページやブログの投稿など）を読み込むときに、各画像にプログレスバーを使用することはお勧めしませんが、個々の画像を読み込むときにユーザーエクスペリエンスを向上させることができます。クライアントのサイトでの一般的な使用例は、ビジターがクリックすることでより高解像度のバージョンの画像をロードできることを望んでいることです。 この場合、進行状況インジケーターを含めると、画像の読み込みがどのくらい進んでいるかをユーザーに知らせるのに役立ちます。
ロード速度が速いという認識と、待機中にユーザーコンテンツに集中できるようにする機能により、複数の大きな画像があるページでは「ぼやけたロード」手法を使用します。
ページのコンテンツをすばやく読み込む必要性については多くの記事が書かれており、いくつかの調査では 余分な0.5秒の遅延でもページの放棄が20％増加する可能性があります と示されています。
読み込みの進行状況インジケーターの目的は、単純なスピナーであろうと、より複雑なシステムであろうと、ページが実際に読み込まれているというフィードバックを提供することです。ただし、このため、ユーザーは外観とサイト全体の速度の不足を関連付けているため、 進行状況インジケーターは否定的な意味合いを持つようになりました 。
逆に、ぼやけた画像のアプローチは、ページの読み込み時間を実際に増加させることなく、読み込みの速度の印象を与えることを目的としています。特に複数の大きな画像を含むページでは、このアプローチが機能します。他のコンテンツが読み込まれるのを待っている間、ユーザーのコンテンツに集中できるからです。 偽の速度をユーザーに提供するため、必ずしも余分な速度を提供することなく、より高速なロードの印象を与えます。
ぼやけた画像のアプローチにはいくつかの異なる実装がある であり、それぞれ独自の読み込み時間と使用上の考慮事項があることに注意してください。
遅延読み込みのユーティリティとページ間で一貫したアプローチを使用する必要性に関する大胸筋のポイントは十分に根拠があり、可能であれば遵守する必要があります。