有推荐还是＆＃34;最佳实践＆＃34;不同设备的不同媒体查询的图像分辨率？

Question

就像标题所说：我想知道2016年不同设备的不同媒体查询是否有一些推荐的图像分辨率，以便在手机上由于图像尺寸较小，图像加载速度更快？

Answer 1

我不这么认为。

图像的尺寸 ¹ 是图像重量 ¹ 的一个重要因素，但它们远非唯一的一个。如果颜色较少，PNG将会更小。 JPG有自己的怪癖（我无法记住）。结果是具有完全相同尺寸的图像可以在重量上变化。

理解了这一点，你就会明白为什么没有一套既定尺寸对每张图片都特别有效。

我可以想到几条不同的路线：

1. 以重量增量（例如10KB，20KB，40KB，您决定）制作不同的图像，然后制作与这些权重相对应的图像。他们将有许多不同的维度。使用srcset和sizes属性告诉浏览器对于任何给定的屏幕尺寸使用哪个图像。
2. 查找最常见的设备尺寸列表（this site has a few，但您可能希望根据流量对其进行自定义），并专门针对每种设备制作图像。 此方法不适合未来。这样做可能需要更改支持的解决方案＆＃34;每隔几年列出一次when new devices get popular。并且，如前所述，如果新尺寸不会比原始图像轻得多，某些图像可能不会值创建自定义尺寸。

只是为了澄清：第二种选择是个坏主意。

有关响应式图像的更多信息，请参阅：

• Responsive Images，MDN
• Responsive Images 101，由Jason Grigsby撰写（Part 9特别相关）
• Responsive Images Breakpoints Generator，作者：Jason Grigsby

注意：

1. 因为＆＃34;尺寸＆＃34;这里有点模糊，我使用＆＃34;维度＆＃34;指的是图像的宽度/高度和＆＃34;重量＆＃34;引用磁盘上的大小（字节，KB，MB等）。