【问题标题】:Natural size of user avatars twice as large as display size用户头像的自然尺寸是显示尺寸的两倍
【发布时间】:2017-12-04 04:31:19
【问题描述】:

我是网络开发的新手,我有一个关于个人资料图片的自然大小与其实际大小的问题。

我注意到,当我在流行网站上检查个人资料图片上的元素时,头像图像的自然尺寸通常是显示尺寸的两倍。

一些例子:

当我自己尝试时,我注意到当您确保图像的实际(自然)尺寸是显示尺寸的两倍时,图像确实看起来更好。

如您所见,64x64 图片比 32x32 图片清晰得多。我的问题是这两个因素是否有什么特别之处。我可以将其制作为 128x128 的图片并将其显示为 32x32 以使其看起来更好吗?

【问题讨论】:

  • 使用大于要求的图片会增加加载时间...

标签: html image css


【解决方案1】:

网络上的大多数图像都是由数十万像素组成的位图1图像。例如,32x32 的图像将有 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

【讨论】:

    【解决方案2】:

    图像清晰度取决于像素,如果您将高分辨率图像用于小型显示器,这不是一个好主意,因为高分辨率图像尺寸总是很大。你的网站会很慢。

    您可以使用此示例 - 自然尺寸 (64x64) 像素,您可以显示 (50x50) 像素,而不是图像像素的大差异。

    它还会清晰地显示您的图像。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多