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

Question

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

难题是，考虑到所有移动设备、平板电脑和桌面设备，我应该创建多少张图片？ 通过这样做，我想节省带宽。

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

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

如果我创建所有尺寸的图像并使用 picturefill JS 加载它，它会对性能有任何影响吗？

Answer 1

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

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

1. 手机A（宽度320px）
2. 手机B（宽度480px）
3. 手机C（宽度600px）
4. 平板电脑 D（宽度 1024px）
5. tablet/desktop E (宽度 1440px)

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

因此，虽然可能有 15 个断点，但为了您自己的理智，最好确定几个关键断点。