2017-12-04 6 views
0

私はウェブ開発には新しく、プロファイル写真の自然なサイズと実際のサイズについての質問があります。ユーザーのアバターの自然なサイズは、表示サイズの2倍です

人気のあるウェブサイトのプロフィール写真の要素を調べると、アバター画像の自然なサイズは通常、表示されるサイズの2倍です。

いくつかの例:

enter image description here

enter image description here

そして、自分でこれをしようとしたとき、私はあなたが実際の(自然)のサイズを確認する際に画像が本当に良く見えるかということに気づきました画像は表示サイズの2倍です。

enter image description here

あなたは64×64の画像は32×32の画像よりも多くのくっきり見えます見ることができるように。私の質問は、二要素について何か特別なものがあるかどうかです。 128x128の画像を32x32として表示して、さらに見栄えを良くすることはできますか?

+0

大きな画像を使用すると、読み込み時間が長くなりますが... – Varun

答えて

1

ウェブ上のほとんどの画像は、数十万個のピクセルで構成されるビットマップの画像です。例えば、32×32画像は32×32 = 1024ピクセルを有する。イメージを表示するには、ブラウザはイメージ内のすべてのピクセルを通過する必要があります。画像内のピクセル数が多いほど、画像をロードするのに時間がかかります。

元画像(自然なサイズ)のピクセル数は、画像をどれだけ拡大または縮小しても同じであるため、画像がより良く見える理由は?あなたが画像をズームインするとき

だから、あなたは以下の結果が得られます。

(画像http://scientificcuriosity.blogspot.com/2006/09/how-is-digital-photo-stored.htmlから)

あなたが見る「四角」は、個々のピクセルです。

しかし、あなたがズームアウトした場合、あなたは逆の効果を得る:あなたが見ることができるようにスケールダウンしたときに、画像がはるかに明確である

https://www.researchgate.net/post/How_can_we_quantify_postural_stability_when_a_human_is_standing_without_perturbation_and_with_itからの画像)

を。

しかし、大きな画像(幅と高さ、またはピクセル数の点で)に大きな欠点があり、読み込みにはと長くなります。

画像を縮小するほど、より鮮明に見えますが、小さくなります。

あなたの最善の選択肢は、中規模の画像を使用して、50%から100%の縮尺で表示することです。

[1] https://en.wikipedia.org/wiki/Bitmap

1

画像の明瞭さはピクセル上で機能します。小さなディスプレイに高解像度画像を使用している場合、高解像度画像のサイズが常に大きいため、良い考えではありません。あなたのウェブサイトは遅くなります。

この例では、Natural Size(64x64)pxとすることができ、Image Pixelの大きな違いではなく(50x50)pxで表示できます。

あなたのイメージもクリアです。

関連する問題