Spring mvc 使用src集的图像分辨率响应需要澄清

我有一个Spring MVC+Thymeleaf应用程序，我使用Cloudinary使图像的分辨率和大小响应，尽管我认为我做得不对，因为从网络选项卡上看，浏览器似乎总是使用带有1024px的图像url，这是其中最大的一个

这是我的代码：

<img
    loading="lazy"
    th:attr="srcset=|
       @{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_256/image.png'} 256w,
       @{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_512/image.png'} 512w,
       @{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_768/image.png'} 768w,
       @{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_1024image.png'} 1024w,
       @{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_1280/image.png'} 1280w|"
    th:src="@{${cloudinaryBaseUrl} + ${cloudinaryTransfCommon} + 'w_auto' + 'image.png'}"
    class="lazyload img-fluid" alt="youtube icon" style="width: 6rem"
 />

我做错了什么

注意：我省略了数据大小属性，因为如果我理解的话，它用于告诉浏览器根据条件使用不同的宽度（例如，“如果屏幕宽度为300，则使用宽度：50%”）

---

感谢您的时间和经验

您提到它将始终加载最大版本，但基于1280px而不是1024px的代码。如果您从一个小窗口开始打开该页面，浏览器会选择请求什么？它仍然是1024px吗？需要注意的是，如果初始窗口大小较大，比如说它请求1024px版本，那么如果将窗口大小调整为较小的大小，浏览器将不会请求较小的版本，而只使用缓存中已有的版本。要测试这一点，最好从一个小窗口开始，然后展开它，并在展开时监视请求。