html - 如何根据容器大小明智地选择图像分辨率？

Question

鉴于：

1. 我有一个 64px * 64px 的容器，用于显示图像
2. 我有一个非常高分辨率的图像（5000px * 5000px）

什么分辨率最适合图像？

假设该网站不会被缩放，并且我希望图像在所有可能的设备上看起来都很完美。

PS 我的假设是 64px * 64px 不是适合图像的分辨率，因为有些设备的像素比 > 1。

标签： htmlimageperformancewebcompression

Answer 1

如果您的容器大小为 64*64 像素，那么您应该寻找相同的纵横比，在这种情况下它是 1x1。获得纵横比后，您应该将图像裁剪为相同大小。通常你会为你的网站提供几张不同纵横比的图片，让用户的浏览器找出哪一张是最好的。台式机和手机具有不同的纵横比，对于我的台式机网站，我倾向于使用分辨率高达 1600x1000 的 4x3 纵横比图像，有时甚至高达 1920x1200，而对于手机，我会使用分辨率高达 800x1200 的 3x4 纵横比图像。在生产中，您不需要像 5000x5000 那样大的分辨率，因为实际上不需要它，而且在部署之前，您应该优化 Web 图像以使其文件大小更小 - 主要使用 .jpg 和 .svg 扩展名。