用户头像的自然大小是显示大小的两倍

Question

我是网络开发的新手，我对个人资料图片的自然尺寸与实际尺寸有疑问。

我注意到当我检查热门网站上的个人资料图片上的元素时，头像图像的自然大小通常是显示大小的两倍。

一些例子：

当我自己尝试这个时，我注意到当你确保图像的实际（自然）尺寸是显示尺寸的两倍时，图像确实看起来更好。

正如您所看到的，64x64图片看起来比32x32图片更清晰。我的问题是，这个双因素是否有什么特别之处。我可以将其设为128x128图片并将其显示为32x32以使其看起来更好吗？

Answer 1

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

你可以使用这个例子 - 自然尺寸（64x64）px你可以显示（50x50）px而不是Image Pixel的巨大差异。

它也会显示您的图像清晰。

Answer 2

网络上的大多数图片都是位图 ¹ 图片，这些图片由数十万像素组成。例如，32x32图像将具有32 * 32 = 1024像素。要显示图像，浏览器必须遍历图像中的每个像素。因此，图像中的像素越多，加载它的时间就越长。

至于为什么图像看起来更好或更清晰是因为无论您放大或缩小图像的数量，原始图像中的像素数（自然尺寸）都是相同的。

因此，当您放大图像时，您会得到以下结果：

（图片来自http://scientificcuriosity.blogspot.com/2006/09/how-is-digital-photo-stored.html）

＆＃34; square＆＃34;你看到的是个别像素。

但如果缩小，则会产生相反的效果：

（图片来自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