标签: srcset
使用srcset时如何强制加载较低分辨率的图像
我需要横幅广告才能在许多屏幕尺寸上以全宽显示。为此，我有4个版本的横幅图像。
- banner-long@2x.jpg（2880x640）
- banner-long.jpg（1440x320）
- banner-short@2x.jpg（1440x640）
- banner-short.jpg（720x320）
我正在使用该srcset属性。
<img
src="/images/interface/banner-long.jpg"
srcset="/images/interface/banner-long@2x.jpg 2880w,
/images/interface/banner-long.jpg 1440w,
/images/interface/banner-short@2x.jpg 1439w,
/images/interface/banner-short.jpg 720w">
但是，如果我从宽浏览器开始，以便加载长版本，然后缩小浏览器的宽度，则短版本将永远不会加载，因为已缓存了长版本。浏览器（Chrome）认为它已经下载了高分辨率版本，因此不必费心加载较小的版本。但是，具有较小版本的要点是长宽比更适合移动设备（即长宽比更小）。我想强制加载较小的图片资源
有什么办法吗？
推荐指数
解决办法
查看次数
正确的方法来调整srcset图像的大小
调整srcset图像大小的正确方法是什么？例如,假设我的图像是2000 x 1337.我将其大小调整为255 x 170.对于2x srcset应该是:
- 510 x 340(根据当前图片)
- 510 x 339(基于原始图像)
编辑
澄清我想知道srcset是如何工作的.例如,如果我使用510 x 339图像(技术上更正确的尺寸基于原始尺寸)2x将浏览器"创建"510 x 340容器(当前尺寸x 2)然后调整510 x 339图像的大小以适应内部它？
推荐指数
解决办法
查看次数
容器元素中img srcset的正确大小？
使用LazySizes插件(https://github.com/aFarkas/lazysizes)我正在尝试构建一个图像网格,每个图像都有一个替代版本用于较小的视口.网格(容器)是基于列/行的简单百分比布局.
我不太确定如何声明图像,我只看到更大的版本.我选择使用高分辨率图像,并将容器的最大宽度缩小50%.这是图像的标记样本:
<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 100vw"
data-src="images/grid/image-small.jpg"
data-srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
alt="" class="lazyload" />
我只需要一个768px的断点.令人困惑的部分是data-sizes属性.我应该在这里声明另一个尺寸,因为图像是高分辨率还是我应该让它们具有全宽？
补充:脚本启动时生成的标记:
<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
data-src="images/grid/image-small.jpg"
data-srcset="images/grid/image-small.jpg720w, images/grid/image-big.jpg 1440w"
alt="" class=" lazyloaded"
sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
src="images/grid/image-small.jpg">
推荐指数
解决办法
查看次数
什么是正确的srcset大小顺序和媒体查询
我正在尝试为我的srcset图像实现以下大小：
- 桌面电脑（最小宽度：1024像素）：100vw
- 平板电脑（最小宽度：768px）：150vw
- 电话+其他：200vw
（由于它是动画的，因此应该比屏幕大）。但是，sizes属性中的正确顺序是什么？
这不起作用（加载了较大的图像）：
sizes="(min-width: 768px) 150vw, (min-width: 1024px) 100vw, 200vw"
这似乎暂时有效：
sizes="(min-width: 1024px) 100vw, (min-width: 768px) 150vw, 200vw"
在我的1440px Macbook Air上，未加载可用的1440px图像，而是更大的1700px版本。但这可能是浏览器的决定。
但从理论上讲，min-width: 786px它也适用min-width: 1024px，因为大于1024px的屏幕也大于768px。在CSS中，使用了最后一个true参数（在这种情况下，这将是错误的768px大小），但是HTML和srcset呢？
我需要做这样的事情吗？
sizes="(min-width: 1024px) 100vw, (min-width: 768px) and (max-width: 1023px) 150vw, 200vw"
但是我以前从未见过...
推荐指数
解决办法
查看次数
为什么srcset无法正常工作？
所以我有这个代码:
<html>
<head>
</head>
<body>
<img src="small.jpg" srcset="https://media.kulturbanause.de/blog/2014/09/responsive-images/small.jpg 320w, https://media.kulturbanause.de/blog/2014/09/responsive-images/medium.jpg 600w, https://media.kulturbanause.de/blog/2014/09/responsive-images/large.jpg 900w" alt="">
</html>根据代码,应该为不同的视口大小加载不同的图像.但是,当我在手机上运行此代码时,即使320w(视口宽度)仍然显示large.jpg,应该加载小的.
推荐指数
解决办法
查看次数
具有 srcset 和延迟加载的全宽响应式背景图像
我正在开发一个网站，该网站的主页上有一系列“英雄”面板，其中的文本覆盖在大背景图像上。
理想情况下，我想使用内联图像srcset，sizes这样浏览器就可以根据屏幕尺寸选择最合适的图像，而不是仅仅将尽可能大的图像作为 a background-image，然后将其缩小以适应较小的屏幕。
到目前为止，我的标记如下所示：
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
srcset="/img/trekking_320.jpg 320w,
/img/trekking_480.jpg 480w,
/img/trekking_600.jpg 600w,
/img/trekking_768.jpg 768w,
/img/trekking_960.jpg 960w"
data-sizes="100vw"
class="lazyload"
>
和CSS：
img {
position: absolute;
height: 100%; width: auto;
}
并overflow:hidden在容器上。
图像的高度为 320 像素到 768 像素，然后为 480 像素到 960 像素，然后最大高度为 600 像素。
我做了一个Codepen来说明这个问题。在所有不同屏幕尺寸（手机、平板电脑、笔记本电脑）的视网膜屏幕上一切正常，在普通 dpi 屏幕上，宽度达到 768 像素也很好，但之后图像不会填满屏幕。
那么我在标题中要求的所有事情都可以做吗？我走在正确的道路上还是需要采取完全不同的方法？
推荐指数
解决办法
查看次数
Microsoft Edge 16中的图像被压缩 - Edge中的小图像
Microsoft Edge 16中存在一个错误(已多次报告并在此处得到确认:https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7778808/.
它将图像调整到30像素的高度.这是一个例子:
为什么会发生这种情况？如何解决？
推荐指数
解决办法
查看次数
srcset 和 size 属性：Retina 设备会选择正确的双倍尺寸图像吗？
不幸的是，我没有要测试的视网膜设备。这是我的代码：
<img src="http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&w=960&h=480&q=80&zc=1"
srcset="
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&w=240&h=120&q=80&zc=1 240w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&w=480&h=240&q=80&zc=1 480w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&w=960&h=480&q=80&zc=1 960w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&w=1440&h=720&q=80&zc=1 1440w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&w=1920&h=960&q=80&zc=1 1920w"
sizes="(min-width:960px) 960px,100vw"
alt="Animal X">
正常屏幕总是按预期选择正确的图像（已测试）。但是我想知道 Retina 设备（分辨率为 1.5x 或 2x）是否会为主题选择正确的图像？
例如，浏览器窗口中 1200 像素的视网膜屏幕应该选择 1920w 图像，而不是 960w 图像。
推荐指数
解决办法
查看次数
在 srcset 中指定图像大小和像素密度
这是我的img标签：
<img src="https://myserver.com/image?w=667&h=375 667w"
srcset="https://myserver.com/image?w=1366&h=1024 1366w 1x,
https://myserver.com/image?w=1366&h=1024&dpr=2 1366w 2x,
https://myserver.com/image?w=1366&h=1024&dpr=3 1366w 3x,
https://myserver.com/image?w=1024&h=768 1024w 1x,
https://myserver.com/image?w=1024&h=768&dpr=2 1024w 2x,
https://myserver.com/image?w=1024&h=768&dpr=3 1024w 3x,
https://myserver.com/image?w=800&h=480 800w 1x,
https://myserver.com/image?w=800&h=480&dpr=2 800w 2x,
https://myserver.com/image?w=800&h=480&dpr=3 800w 3x" sizes="100%">我正在使用 imgix，它根据dpr查询参数以正确的像素密度返回图像。以上似乎不起作用，图像未以正确的尺寸呈现。我没有使用正确的格式吗？
推荐指数
解决办法
查看次数
标签 统计
srcset ×9
html ×6
image ×4
css ×2
browser ×1
html5 ×1
image-size ×1
responsive ×1
src ×1
wordpress ×1