图像分辨率和更大功率调整

Question

我在html文档中有一些关于图像使用的问题我无法找到答案。

• 为什么标准的12x12 / 24x24 / 48x48 / 96x96 / ...而不是8x8 / 16x16 / 32x32 / 64x64 / ...？
• 为什么130x130px图像被浏览器调整为50x50px（by 在html doc中设置它的宽度/高度会变得更加模糊 比调整为50x50的100x100图像？ （它更容易吗？ 浏览器将大小除以2？）
• 对于值得使用的图像是否有特定的分辨率 更友好的4k？例如，使用384x384px图像而不是 适用于4K屏幕所有者的96x96？

Answer 1

1。为什么有图标大小标准？

首先，图标没有“标准”尺寸，但创建具有相等比例=正方形图像的图标总是一个好主意。这并不意味着你不被允许违反规则，但它取决于你正在创建图标的媒介。 Android使用与iOS不同的基本大小，因为它们需要支持不同的分辨率。对于桌面，从16px的比例作为基础开始总是好的。 reference for icon sizes

2。为什么调整大小时图像模糊？

您是浏览器的图像，您需要将120x120px像素图像重新绘制为50x50画布。你现在面临的问题是你需要决定选择哪种颜色，特别是边缘？浏览器的作用是混合边缘的颜色，他知道没有更多的空间可以显示它的清晰。这导致“模糊”效果。不要考虑将120x120调整为一半。这样更容易，因为你不再需要混合颜色了。或者用更多技术术语：

  

在向任一方向缩放时，光滑的图像都会出现一些异常现象。当你把它们做得更大时，显而易见的是 - 事情会迅速变得像素化。当你缩小它们时，无论渲染什么，它都必须猜测像素在哪里。 https://css-tricks.com/forums/topic/scaling-down-images-with-css-makes-them-blurry/#post-188194

3。是否有特定的图像分辨率

这基本上是一个非常好的问题，并打开了“响应式”图像的主题。如您所知，4k显示器/智能手机上的像素密度比常规屏幕高很多。图像无法通过自身缩放信息这一事实使得它们在放大时会像素化，在缩小时会变得模糊。最好的情况是尽可能多地使用SVG，图标最适合用于图标。通常只需将bigges图像放在网上即可完成任务，但从性能上讲，这将是灾难性的。如果你想掌握这个主题，我可以给你一些很好的潜水链接：

• https://css-tricks.com/optimizing-large-scale-displays/
• https://css-tricks.com/responsive-images-css/

希望这至少可以解决你的担忧：）