具有srcset和sizes属性的图像加载大图像

发布于 2025-01-11 22:22:13 字数 776 浏览 2 评论 0原文

我有 3 种不同尺寸的相同图像，我将根据设备的视口和 DPR（像素密度比）对其进行优化。

为此，我有以下目标：

<img src="${item.imageUrl}" alt="${item.alt!!}"
srcset="'/static/img/common/testImg/500.jpg' 500w,
        '/static/img/common/testImg/1000.jpg' 1000w,
        '/static/img/common/testImg/1500.jpg' 1500w"

sizes="(min-width: 500px) 1500px, (min-width: 900px) 1000px, 500w">

我想要实现的目标：

从 0px 到 500px =>我想显示
从 500px 到 900px 的 500.jpg =>我想显示
从 900px 到 XXXX => 的 1500.jpg我想显示 1000.jpg

问题：如果我在 900px 宽后加载页面，则会加载 1500.jpg img。顺便说一句，我已经清除了我的现金，DPR 为 1，这是我的视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

谢谢

原文

I have the same image in 3 different sizes that i would to optimize according to the viewport and the DPR (pixel density ratio) of the device.

To do so, I have the following:

<img src="${item.imageUrl}" alt="${item.alt!!}"
srcset="'/static/img/common/testImg/500.jpg' 500w,
        '/static/img/common/testImg/1000.jpg' 1000w,
        '/static/img/common/testImg/1500.jpg' 1500w"

sizes="(min-width: 500px) 1500px, (min-width: 900px) 1000px, 500w">

What I want to achieve:

from 0px to 500px => I would like to display the 500.jpg
from 500px to 900px => I would like to display the 1500.jpg
from 900px to XXXX => I would like to display the 1000.jpg

The issue:
If i'm loading the page after 900px wide, the 1500.jpg img is loaded.
By the way, i have clear my cash, DPR is 1 and here is my viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

顾铮苏瑾 2025-01-18 22:22:13

根据 W3Schools.com，这应该有效：

<picture>
   <source media="(min-width:500px)" srcset="/static/img/common/testImg/500.jpg">
   <source media="(min-width:1000px)" srcset="/static/img/common/testImg/1000.jpg">
   <source media="(min-width:1500px)" srcset="/static/img/common/testImg/1500.jpg">
   <img src="/static/img/common/testImg/500.jpg" alt="image" style="width:auto;">
</picture>

如果您有兴趣，可以在这里了解更多信息：W3Schools 源srcset 属性

According to W3Schools.com this should work :

<picture>
   <source media="(min-width:500px)" srcset="/static/img/common/testImg/500.jpg">
   <source media="(min-width:1000px)" srcset="/static/img/common/testImg/1000.jpg">
   <source media="(min-width:1500px)" srcset="/static/img/common/testImg/1500.jpg">
   <img src="/static/img/common/testImg/500.jpg" alt="image" style="width:auto;">
</picture>

If you are interested you can find out more here : W3Schools source srcset Attribute

回复收藏 0 原文

爱已欠费 2025-01-18 22:22:13

我不记得在哪里，但我看到浏览器只使用第一个匹配的 madia 查询。您应该尝试使用

<img src="${item.imageUrl}" alt="${item.alt!!}"
  srcset="'/static/img/common/testImg/500.jpg' 500w,
          '/static/img/common/testImg/1000.jpg' 1000w,
          '/static/img/common/testImg/1500.jpg' 1500w"
  sizes="(min-width: 900px) 1000px, (min-width: 500px) 1500px, 500px">

（PS：您使用了错误的后备大小单位，w而不是px）

请记住，浏览器将根据需要使用每个源。在高显示屏幕下，浏览器可以使用1000.jpg来显示500px宽的图像，以更好的质量渲染图像。

I don't remember where but I saw that only the first matched madia query is used by browsers. You should try with

<img src="${item.imageUrl}" alt="${item.alt!!}"
  srcset="'/static/img/common/testImg/500.jpg' 500w,
          '/static/img/common/testImg/1000.jpg' 1000w,
          '/static/img/common/testImg/1500.jpg' 1500w"
  sizes="(min-width: 900px) 1000px, (min-width: 500px) 1500px, 500px">

(PS: you used a bad unit for the fallback size, w instead of px)

Remember that browsers will use every sources as they want. With a high display screen, a browser can use 1000.jpg for the 500px wide image, to render the image in a better quality.

回复收藏 0 原文

~没有更多了~