我发现使用srcset和size属性对我来说是最好的选择。我的问题是最好支持多少个视口？写完这篇文章之后，似乎很多，但是如果浏览器会选择最好的一个，而其他的没有加载，为什么不做一堆，这样我就可以为 1x 和 2x 用户提供最佳体验呢？我还应该考虑 1.5x 和 3x 用户吗？我只包括我定位的 1x 尺寸。可以想象，如果我添加 1.5x、2x 和 3x 大小，这个列表会长得离谱。下面是示例：
<img src="image-320.jpg" sizes="100vw"
srcset="image-320.jpg 320w, image-480.jpg 480w,
image-768.jpg 768w, image-960.jpg 960w,
image-1024.jpg 1024w, image-1280.jpg 1280w,
image-1366.jpg 1366w, image-1680.jpg 1680w,
image-1920.jpg 1920w, image-2048.jpg 2048w,
image-2560.jpg 2560w, image-2880.jpg 2880w" alt="...">
在我开始之前，我很好奇最佳实践以及我是否以正确的方式看待这个问题。谢谢！
我四处寻找相同的答案并遇到了这篇文章。这些建议基于经验数据，偏向于全宽图像，但它确实为确定我们应该支持哪些尺寸提供了一个很好的起点。
https://medium.com/hceverything/applying-srcset-choosing-the-right-sizes-for-responsive-images-at-different-breakpoints-a0433450a4a3
本文建议100vw视口建议使用以下大小：
- 1920px(覆盖全高清及以上屏幕( 1600 像素
- (这将覆盖 1600 像素的台式机和几台纵向模式下的平板电脑，例如宽度为 768 像素的 iPad，这将要求 2 倍 1536 像素及以上的图像(
- 1366px(这是最普遍的桌面分辨率(
- 1024px(1024x768 屏幕，不包括高密度的 iPad，很少见，但我认为您需要在两者之间有一些图像尺寸，不要在像素大小之间留下太大的差距，以防市场变化(
- 768px(适用于 2x 375px 移动屏幕，以及任何实际请求接近 768px 的设备(
- 640像素(适用于智能手机(
顺便说一句，我还发现以下文章在理解所有内容方面非常有用：
https://www.html5rocks.com/en/mobile/high-dpi/
我想知道您是否遇到过您的查询的答案？