画質が悪いと、Webサイトのパフォーマンスは向上しますが、ユーザーエクスペリエンスに悪影響を及ぼす可能性がありますか？
画質が悪いと、ウェブサイトのパフォーマンスは向上しますが、ユーザーエクスペリエンスに悪影響を及ぼす可能性はありますか？ウェブサイトでは3種類の画像を使用しています。
- アイコン、ロゴ、箇条書き
- 実在する人物、自然、製品の画像などのストック写真。
- CSSの繰り返しまたは繰り返しのない背景画像
パフォーマンスのために画像を最適化することは、ベストプラクティスと見なされます。ほとんどの場合、それを行います。どれだけの圧縮を使用すべきかについて、しばしば混乱します。
私の質問は次のとおりです。ファイルサイズを縮小するために画像の品質を低下させると、ユーザーエクスペリエンスに悪影響を与える可能性がありますか？ユーザーはシャープで鮮明な画像を期待していますか？また、ユーザーにとって高品質の画像はどれほど重要ですか。
はい、次の理由により
- 質の悪いサイトやつぶれた画像、引き伸ばされた画像さえあるサイトを目にした場合、そのサイトの背後に強力なブランド名がない限り、質の悪い画像を前向きに提示することに興味がないように思われるため、ブランドの質を真剣に疑います。
- 次に、サイトのコンテンツは良いが画像の品質が低い場合、画像に気を取られて（ビジュアルがコンテンツよりも目立つため）、ユーザーエクスペリエンスが低下するという意味の余地があります。
- 私が販売しようとしている製品の質の悪い画像を提供する製品サイトまたはeコマースサイトに行くと、私の自信は当然低下し、購入するのをためらいます。
例えば。私は最近ラップトップのハードドライブコンテナーを購入したいと思っていて、私の街でそれを見つけるのに苦労していました。最終的にそれを売ったオンライン小売業者を見つけましたが、彼がサイトに置いた画像の質が非常に曖昧で、製品が本物であるか、偽物であり、購入しなかったのか疑問に思いました。
これを見ることをお勧めします 優れた議論 画質とそれが変換にどのように影響するかについて
高品質の画像を持つことの重要性に関して記事が言うことを要約すると、
あなたの目標は、ユーザーが製品を評価/比較し、購入を決定できる十分な情報を提供することなので、これは重要です。商品の細部がユーザーにとって重要であるがユーザーがそれを理解できない場合は、ユーザーがWebサイトを離れて他の場所を見る可能性が高いです。
この記事 Webサイトの画像を選択する方法 では、いくつかの重要なポイントも強調されています。
低品質の画像は見づらいだけでなく、アマチュアオペレーションの印象も残します。これは、人々があなたのWebサイトに関連付ける最後の手段です。
画像はかなりのトッピングではありません。これらはマーケティングツールであり、サイトのコンテンツを充実させ、サイトがデマではないことを訪問者に自信を与えます。
実はとても良い質問です。それでも、質問をどのように作成したかによって、答えは非常に明確になります。画質の悪さがユーザーエクスペリエンスに悪影響を与える可能性はありますか？ ->絶対に、それはできます！
確かに、問題は次のとおりです。それについて何をすべきか？ウェブサイトのパフォーマンスと画像の品質を高めるための良い方法は何ですか？
いくつかのヒント：
私の意見では、Retinaディスプレイにはより高品質のグラフィックスを使用できますが、それらを使用する必要があります。これらのグラフィックス（適切に実装した場合）は、Retinaディスプレイを備えたデバイスでのみ使用されます。 「通常の」ディスプレイを備えたデバイスは、他のグラフィックスを引き続き使用します。したがって、画像ごとに2つの解像度を指定する必要があります。
はい、それは網膜ディスプレイを備えたデバイスは、網膜ディスプレイを備えていないデバイスに当てはまるので、常に高速インターネット接続を持っているとは限らないことは事実です。ただし、利用できるサービスや機能がさらに多くなるため、これは将来的に変更され、時間の問題にすぎません。将来に目を向けても、あまり心配しないでください。
第二に、インターネット接続が遅いユーザーの場合、サイトの読み込みに時間がかかるだけではありません。これは言い訳にすべきではありませんが、古いWebブラウザを使用しているユーザーと同様であることを意味します。これらは少数派であり、サイトが他のサイトと異なることを期待していません。
そして最後に、はい、これまではiPhoneとiPadだけがRetinaディスプレイを備えていましたが、今では、Retinaディスプレイを備えた最初のMacBook ProがAppleによって発売されました。将来的にはラップトップも期待できます。ラインとデスクトップコンピュータは、より高い解像度を持っています。
ベストプラクティスとソリューションは何ですか？
できるだけ少ない画像を使用してください！レイアウトに関連するものについては、可能であれば画像を使用しないでください。これは、CSS3でこれまでになく簡単です。例：www.Apple.comの上部にあるメニューはCSSベースのみであると聞いたことがあります（実際には確認していません）。だから、今日は多くのことが可能です。
正しい方法で画像を圧縮する方法を知っています！ JPEG、JPEG 2000、GIF、PNGの違いについてお読みください。優れた画像編集プログラムは、品質を大幅に低下させることなく、画像を非常によく圧縮できます。非常に簡単-facebookやflickrなどのサイトについて考えてみてください。1ページで何百万もの写真と多くの写真を処理する必要があるため、IS可能です。
ユーザーエクスペリエンスを完璧にする：画像をプリロードできます。グーグルはあなたが知らなくてもこれを行います。最初にリストされた結果の画像のプリロードを開始する検索用語を入力します。
それでも、表示するために本当に必要な写真と解像度を考えてください。また、サイトの読み込み時に、画像の読み込みでレイアウトの読み込みが停止しますか？最初にレイアウトをロードしてから、画像をロードしてみてください。
全体として、画像サイズを縮小する前に、改善できることは他にもたくさんあります。多くの場合、人々は、Facebookのソーシャルプラグインなどの実際のサードパーティプラグインが、他の画像よりもはるかにサイトの速度を低下させることを知らずに、Webページの画像サイズの縮小に焦点を当てています。