我正在试图找到一种方法来为iOS8客户端提供高dpi图像,同时还为支持w语法的浏览器提供响应式图像资源.根据W3C标准,应该可以在一个srcset属性中混合使用两种语法:
<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
(来源:http://drafts.htmlwg.org/srcset/w3c-srcset/)
但是,当我在Chrome 38(OS X,没有高dpi)中运行该示例时,在其他情况下支持w语法,浏览器总是加载最大的图像(banner-HD.jpeg),而不管视口大小如何.当我添加
banner.jpeg 1x
到srcset Chrome使用该图像,但仍然忽略100w图像.
在我的情况下,我想指定一个较小版本的图像以及两个资源:
<img src="default.png"
srcset="small.png 480w, small@2x.png 480w 2x, medium.png 1x, medium@2x.png 2x">
这似乎适用于2x iOS8设备,选择medium@2x.png因为它们不支持w语法.但是,无论视口大小如何,Chrome似乎都不关心并加载medium.png.
我在这里做错了什么,或者这是Chrome的srcset实现中的一个已知问题？
当使用响应图像设置<img>没有断点(即没有sizes属性)您通常提供不同的分辨率相同的图像,你然后在限定的多个版本srcset使用像素密度的语法,例如属性1x,2x,3x
但是,通常1x图像的版本与src属性中已定义的图像相同,因此有点多余.因此我想知道 - 在参数中定义1x一个真正必要/强制的版本？<img>srcset
仅使用时
<img src="http://placehold.it/350x150" srcset="http://placehold.it/700x300 2x">
代替
<img src="http://placehold.it/350x150" srcset="http://placehold.it/350x150 1x, http://placehold.it/700x300 2x">
然后至少Firefox将正确地显示350x150图像,并尽快缩放级别/ DPPX是> 1它将使用700x300图像.
省略1x定义srcset将节省几个字节,尤其是在具有大型缩略图库的页面上.
我正在尝试创建一个支持 WebP 的图片标签。
（如果屏幕尺寸超过 1024px，则加载 image-full，最大宽度为 1024px 时加载 image-1024，最大宽度为 768px 时加载 image-768，最大宽度为 500px 时加载 image-500）
我有这段代码，w3 验证器抱怨：当 srcset 属性具有任何带有宽度描述符的图像候选字符串时，尺寸属性也必须存在。
我如何在其中实现尺寸？我应该有更好/不同的方法吗？
<picture>
// load webp in different sizes if browser supports it
<source media="(min-width: 1025px)"
srcset="webp/image-full.webp"
type="image/webp">
<source media="(max-width: 1024px)"
srcset="webp/image-1024.webp"
type="image/webp">
<source media="(max-width: 768px)"
srcset="webp/image-768.webp"
type="image/webp">
<source media="(max-width: 500px)"
srcset="webp/image-500.webp"
type="image/webp">
// load jpg in different sizes if browser doesn't support webp
<source media="(min-width: 1025px)"
srcset="siteimages/image-full.jpg"
type="image/jpeg">
<source media="(max-width: 1024px)"
srcset="siteimages/image-1024.jpg"
type="image/jpeg">
<source media="(max-width: 768px)"
srcset="siteimages/image-768.jpg"
type="image/jpeg">
<source media="(max-width: 500px)" …我正在处理具有以下标记的页面:
<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
/banner_home.600x400.jpg 480w,
/banner_home.728x242.jpg 768w,
/banner_home.920x306.jpg 960w,
/banner_home.1234x400.jpg 1280w">
而且似乎在最新的Chrome和Opera中,他们忽略了屏幕大小,只输出最后列出的文件(所以我的情况下是1234x400.jpg).
使用Picturefill,Firefox和Safari都可以在较小的屏幕上显示正确的图像.
在我今天的测试中,我推出了Opera,我暂时没有打开.它首次推出时是在v25,它会在较小的屏幕尺寸下显示正确的图像.
然后我注意到已经下载了更新,所以我运行它,更新到v27,然后Opera显示与最新Chrome相同的问题.
所以似乎Blink最近发生了一些变化.
任何人都可以证实这一点,或者我只是做错了吗？
Codepen来说明我的意思.
em在响应式图像中使用时，浏览器如何理解该单位？
<img alt="A giraffe" src="giraffe.jpg"
srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]"
sizes="(max-width: 40em) 40em">
这验证了，我没有在浏览器控制台中看到警告。但是，如果图像预加载器的全部目的是在下载和解析 CSS之前获取图像，那么浏览器有什么用em？
它只是font-size适用于它的默认值<html>吗？rem为了清楚起见，我应该使用吗？用户缩放时两者有区别吗？
这不是理论上的；我用em我的媒体查询断点，以及一些图片被限制由容器大小的最佳线路长度（使用em，当然）。
我检查了规范，但它对新的响应式图像功能非常简洁。
我在试图环绕使用我的头的过程srcset和sizes上img标签.
虽然我认为我掌握了基础知识 - 主要归功于这篇文章 - 我在实际应用sizes属性方面苦苦挣扎.
在我可以找到的所有示例中,事物都被大量简化,并且size属性被声明为好像在每个断点处,图像宽度将是视口宽度的精确比例,允许使用vm单位.例如:
sizes="(min-width: 36rem) 33.3vw,
100vw"
当然,在现实生活中,图像通常位于其他容器内,这些容器本身可能位于其他容器内等等,每个容器都有自己的边距,填充或定位.
可以公平地说除了最简单的情况(当图像具有流体宽度并且不仅仅是视口的精确百分比时),calc必须使用,可能会在html标记中添加可怕的复杂计算,因为图像尺寸需要计算从视口宽度,向下通过任何容器到图像？例如,如何计算位于具有7px填充的容器的图像的正确大小,该容器本身位于容器的45%容器内,其容量为15px,位于侧边栏内,占主页容器的25% 15px的填充,最小宽度为1220px？
sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)),
100vw"
试图在sizes属性中计算这个似乎很荒谬,特别是考虑到所有这些都可能在每个断点处发生变化.必须保持这个大规模复杂的计算与CSS的变化同步似乎是疯狂的.然后你有了补丁的浏览器支持calc.
我觉得我错过了一些明显的东西,但它是什么？
注意:我知道Alexander Farkas优秀的Lazy Sizes,它通过使用data属性为您进行大小计算,但我对标准用法感兴趣.
我一直在试图让这个网站,我要建,只是在我以为它会很好,我看它的iPad的视网膜屏幕上的工作响应的图像辛勤工作,它选择了错误的图像.它不仅尺寸错误,而且还显示为风景,而不是肖像.我不知道它为什么这样做,因为我已经为所有不同的屏幕尺寸创建了自定义图像尺寸,并且还创建了用于视网膜屏幕的XL版本.
这是带有srcset和大小的图像的HTML.
<img class="scene_element scene_element--fadeinup" src="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg"
srcset="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017.jpg 3684w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-768x1151.jpg 768w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1010x1514.jpg 1010w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg 505w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-415x622.jpg 415w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-720x1080.jpg 720w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-360x540.jpg 360w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-293x440.jpg 293w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1110x800.jpg 1110w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-455x306.jpg 455w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-355x238.jpg 355w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-640x600.jpg 640w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-320x300.jpg 320w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-2340x1258.jpg 2340w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1170x629.jpg 1170w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-940x627.jpg 940w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-555x400.jpg 555w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1910x1274.jpg 1910w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-955x637.jpg 955w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1574x1250.jpg 1574w,
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-787x625.jpg 787w"
sizes="(-webkit-min-device-pixel-ratio: 1.5) 1010px,
(max-width: 767px) 767px, (min-width: 768px) and (max-width: 991px) 415px,
(min-width: 992px) and (max-width: 1199px) 415px,
(min-width:1200px) 505px, 505px" itemprop="thumbnail" alt="Image description" >
由于视网膜屏幕是双像素我首先尝试将其添加到目标iPad的尺寸,但没有发生任何事情:
(min-width: 2048px) 1010px
有趣的是我有一个尺寸为1010像素的图像,并且在尺寸中指定当它是使用此图像的像素的两倍时.相反,它使用这个尺寸:940x627.jpg
谁能解释为什么会这样呢？
我已经研究 CSS 有一段时间了，但是srcset图像sizes元素让我感到困惑。这是一个我认为可行的例子。
<img alt="Background image flowers"
srcset="img/flowers-480.jpg 480w,
img/flowers-480@2x.jpg 480w 2x,
img/flowers-768.jpg 768w,
img/flowers-768@2x.jpg 768w 2x,
img/flowers-960.jpg 960w,
img/flowers-960@2x.jpg 960w 2x,
img/flowers-1280.jpg 1280w,
img/flowers-1280@2x.jpg 1280w 2x"
sizes="(max-width: 1279px) 100vw,
(min-width: 1280) 1280px"
src="img/flowers-960.jpg">
这个想法是让图像占视口的 100%，直到视口宽度达到 1280 像素或更宽，然后图像将是固定大小。但是，为了补偿更高 DPI 的设备，我认为建议添加 DPI 描述符（1.5x、2x 等），如此处和此处的建议。
我认为上面的代码会做的是：
但是，当我将其通过验证器时，我收到以下错误：
错误：元素 img 上的属性 srcset 值错误：图像宽度
img/flowers-480@2x.jpg与图像宽度相同img/flowers-480.jpg
很明显，我完全忽略了 srcset 和 size 的工作原理。我究竟做错了什么？
我似乎无法辨别使用picture元素还是仅将img元素与srcset属性之间的功能或含义上的区别。我了解他们的工作方式；我只是不完全理解为什么或何时选择一个。
看起来imgelement是更轻便，更简洁的代码，但这意味着和做相同的事情吗？我在代码中使用它来提供同一图像的不同缩放版本：
<img src="default.jpg"
srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
sizes="(max-width: 800px) 100vw, 12em"
alt="something" />
就提供正确的缩放图像而言，它确实可以满足我的要求，并且似乎可以在Chrome，Firefox，Edge和Opera中运行。
我知道可以使用以下代码完成相同的操作：
<picture>
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
media="(max-width: 800px)"
sizes="100vw" />
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w"
media="(min-width: 800px)"
sizes="12em" />
<img src="default.jpg" alt="something" />
</picture>
那么，功能上有什么区别？为什么我要使用更多的代码来做基本上相同的事情？
有语义上的区别吗？那会是什么？
来自w3.orgimg：
一个
img元素表示的图像和它的后备内容。
同样来自w3.orgpicture：
该
picture元素是一个容器，它为其包含的img元素提供多个源，以允许作者基于屏幕像素密度，视口大小，图像格式和其他因素，以声明方式控制或提示要使用的图像资源。 。它代表它的孩子。
如果srcset属性已经对该img元素执行此操作，为什么我们需要一个picture元素作为容器？我想念什么？语义上有区别吗？
我在此处阅读了另一篇文章 …
我正在使用图像滑块（猫头鹰旋转木马 2）并实现了图像，如下所示：
<img loading="lazy" itemprop="image" srcset="
image-320.jpg 320w,
image-480.jpg 480w,
image-640.jpg 640w"
sizes="(max-width: 680px) 320px, 480px"
src="image-640.jpg"
width="480" height="720">
在 Chrome 开发工具中针对移动视图运行 Lighthouse 时，我收到（除其他外）以下“投诉”：
**Properly size images**
Serve images that are appropriately-sized to save cellular data and improve load time.
由此 Lighthouse 引用image-640.jpg
然而，根据我的图像标签中的定义，应该考虑 image-320.jpg 。至于 SRC 属性，我想保留 image-640.jpg 变体。
我的图片标签的结构有问题吗？
预先非常感谢并致以最良好的祝愿，亚历克斯