html - 网站不同屏幕宽度的最佳标准图像尺寸

Question

我正在使用 picturefill.js 库在不同的屏幕宽度上提取不同尺寸的相同图像。

困境是我应该记住所有移动设备、平板电脑、台式机创建的图像数量应该是多少？通过这样做，我想节省带宽。

现在，我正在创建具有不同以下尺寸的相同图像。图像大小以像素为单位

240   
320 
640   
480 
600 
768 
960
992
1200
1368
1600
2400
2500
3200
4000

如果我创建所有尺寸的图像并使用图片填充 JS 加载它，它会对性能有什么影响吗？

Answer 1

从技术上讲，您可以继续使用所有 15 种分辨率，并在您的媒体查询中设置 15 个断点。应该不会对性能产生任何负面影响。然而，另一方面是：你可能会疯狂地维护所有这些媒体查询。想象一下，根据分辨率，您的声明将包含 15 个不同的文件需要多长时间。

明智而实际的做法是针对几个分辨率，并为每个分辨率使用最佳图像。您需要与您的 UX 工程师（可能是您自己）合作来识别这些断点。例如，您的目标是：

1. 手机A（宽320px）
2. 手机B（宽480px）
3. 移动C（宽度600px）
4. 平板电脑 D（宽度 1024 像素）
5. 平板电脑/台式机 E（宽度 1440 像素）

您将在上述断点处设置媒体查询。并在您的整个网站中始终如一地使用它们。因此，您只能使用具有这些宽度的图像，假设它们都是全宽图像。如果您希望它们即使在高 DPI（视网膜）上也看起来很清晰，请记住将每个尺寸加倍。很可能，您最终会得到 5 或 6 张不同的图像。

因此，虽然可能有 15 个断点，但最好还是确定几个关键断点。