为什么 srcset 导致图像下载多次?
Why is srcset causing images to download multiple times?
我有以下图像标签,使用 srcset
和 sizes
属性插入响应图像:
<img srcset="/designed/logo-abihaus-1600x500.png 1600w,
/designed/logo-abihaus-1200x375.png 1200w,
/designed/logo-abihaus-960x300.png 960w,
/designed/logo-abihaus-800x250.png 800w,
/designed/logo-abihaus-480x150.png 480w"
src="/designed/logo-abihaus-1600x500.png"
sizes="100vw" alt="">
据我所知,我只是告诉浏览器我可用的所有图像尺寸,它应该只根据视口尺寸等下载最合理的尺寸。如果我调整浏览器 window (Chrome) 变小并刷新页面,“网络”选项卡告诉我它正在下载我期望的图像(在本例中为 800px),加上最大的图像(我假设来自 src
属性).
我在使用和不使用 picturefill.js 的情况下都尝试过,我在 OS X 10.10.5 上使用 Chrome 45,所以我认为这不是浏览器兼容性问题。我的语法有问题还是我只是误解了 srcset?
我有以下图像标签,使用 srcset
和 sizes
属性插入响应图像:
<img srcset="/designed/logo-abihaus-1600x500.png 1600w,
/designed/logo-abihaus-1200x375.png 1200w,
/designed/logo-abihaus-960x300.png 960w,
/designed/logo-abihaus-800x250.png 800w,
/designed/logo-abihaus-480x150.png 480w"
src="/designed/logo-abihaus-1600x500.png"
sizes="100vw" alt="">
据我所知,我只是告诉浏览器我可用的所有图像尺寸,它应该只根据视口尺寸等下载最合理的尺寸。如果我调整浏览器 window (Chrome) 变小并刷新页面,“网络”选项卡告诉我它正在下载我期望的图像(在本例中为 800px),加上最大的图像(我假设来自 src
属性).
我在使用和不使用 picturefill.js 的情况下都尝试过,我在 OS X 10.10.5 上使用 Chrome 45,所以我认为这不是浏览器兼容性问题。我的语法有问题还是我只是误解了 srcset?