2017年の画像読み込みのためのSpinner vs Blur?

私のクライアントは写真家です、彼のウェブサイトは3種類の画像を含みます。

1)ホームページフルスクリーンの背景ギャラリーの画像

2)ギャラリースライダー画像

3)画像付きブログ投稿

どちらを選択するかは決まっていません。

写真を鑑賞する経験を楽しむことになると、スピナーを使用しても大丈夫ですか、またはそれらがロードされている間それらをぼかしますか?

7
nl ru de

4 答え

3つのケースのすべてで同じアプローチを使うべきです。 複数のアプローチを使用することはユーザーを混乱させるだけなので、異なるイベントに対する複数のフィードバックではなく、画像のロードに対して1つのフィードバックを選択します。

ぼかし効果を遅延読み込みと組み合わせて使用​​します(詳細はこちらを参照してください。 > https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/ )。

スピナーはロードするためのより良い指標ですが、個々の画像をロードするために複数のスピナーを隣同士に並べて表示することは美的ではありません。

10
追加された

ぼやけた写真のテクニックを使用し、ぼやけた画像は不確定の進行状況インジケーターであるため、特定の状況ではプログレスバーを使用することを検討してください。

Spinners are useful for actions that complete quickly to give an indication that something is happening. When actions are going to take more than a second, you should provide an indication of progress. Progressively loading images (blurry -> crisp) does that, however, they don't indicate when the image is fully loaded. For example, if the final image is not high resolution, or is intentionally blurry (a common technique), the end user might not know that the image is fully loaded.

実装に関する事項

プログレッシブ画像ロードのすべての実装が同じになるわけではありません。

この記事によると、Facebookは最終的な画像を表すプロファイルカバー写真のぼやけた画像をすばやく読み込むための手法。接続が遅い場合でも、ユーザーはイメージが読み込まれた後のイメージを把握しているので、これは素晴らしいことです。この記事では、同じことを実現する方法について説明しています。

メディアはブログ投稿に画像を読み込むためにぼやけた画像テクニックも使用しますが、実装はFacebookの実装よりも有用性が低いようです。あなたが遅いネットワーク上にいる、あるいはあなたの接続が中断されることを想像してみてください。非表示のぼやけた画像を見ることはどれほど役に立ちますか?

プログレスバーでぼやけた画像を補強する

Flickrもぼかし写真の手法を使用していますが、下の画像では、プログレスバーを使用して画像のロード量を示すこともできます。

enter image description here

これは、イメージがいつ完全にロードされたかわからないという元々の問題に対処します。遅い接続では、これは本当に役に立ちます。

I'm not suggesting using progress bars on each image when loading a series of images (like on the home page, or in blog posts), but when loading an individual image it can improve the user experience. I expect a common use case on your client's site is that visitors want to be able to load a higher resolution version of pictures by clicking on them. In this case, including a progress indicator helps let the user know how far along the loading of the image is.

8
追加された

読み込み速度が速く、ユーザーのコンテンツに待機中のコンテンツを集中させることができるため、複数の大きな画像があるページでは「ぼかし読み込み」の手法を使用します。

いくつかの研究では、でさえもページコンテンツをすばやく読み込む必要性について多くのことが書かれています。 0.5秒の余分な遅れはページ放棄の20%の増加につながる可能性があります

単純なスピナーであろうとより複雑なシステムであろうと、ロード進行状況インジケーターの目的は、実際にはページがロードされているというフィードバックを与えることで、経過時間に対するユーザーの認識を減らし、待つ理由を与えることです。ただし、このため、進捗インジケーターが表示されるようになりましたユーザーは外観とサイト全体の速度の低さとの間に相関関係があるため、否定的な意味合いがあります

逆に、ぼやけた画像アプローチは、実際にページの読み込み時間を増やすことなく、読み込み速度を向上させるという意味です。特に複数の大きな画像があるページでは、他のコンテンツがロードされるのを待っている間にユーザーのコンテンツに焦点を合わせることができるため、このアプローチは機能します。必ずしも余分な速度を提供することなく、読み込み速度が速いという印象を与えることで、ユーザーにの速度を提供します。

ぼやけた画像の実装がいくつかあることに注目する価値があります。それぞれに独自のロード時間と使用上の考慮事項があります。

レイジーローディングの有用性と複数ページにわたる一貫したアプローチの使用の必要性に関する大胸筋のポイントは、十分に根拠があり、可能な限り守られるべきです。

5
追加された

最新のアップデート:

  1. ギャラリー<//strong>

画像は高品質/高解像度なので、モバイルユーザーにとっては読み込みに時間がかかることがあります。

1)ぼやけた低解像度の画像を読み込みます。

2)遅延ロード。

3)ロードに3秒以上かかる場合は、1〜2秒の注意を払うためにスピナーを追加します。

  1. Blog

画像はずっと軽くて読みやすいので、私は次のものだけを使いました。

1)ぼかし。

2)遅延ロード。

チャームとして働いて、助けてくれてありがとう。

0
追加された