问题标签 [picture-element]

pictureHTML5元素的优缺点是什么？

特别是浏览器是否会下载所有图片？或者浏览器只下载匹配媒体查询的图像？

本文picture很好地解释了响应式图像、用例和新的 HTML5元素。

更新：更具体地说，我的意思是响应式图像，针对不同设备调整大小的图像。更小的图像重量，因此更快的加载网站。重量减轻多达72%。

显示的示例只是文件名（没有路径），实际上它会更详细，例如：

每次设置完整路径似乎很尴尬。

我更喜欢这个：

顺便说一句，对于可读性和编程逻辑，我更喜欢路径中的响应式内容而不是文件名中的内容。你可以这样做

如果您放弃对某个宽度的支持，只需删除该目录即可。

但主要问题是，我们需要为 1 张图片编写大量代码。

因此，要限制这一点（没有任何 JS 解决方案）：

我可以设置类似pathsrc属性或作用域的基本元素吗？

据我所知，srcsetandsizes属性更侧重于为设备的大小和分辨率应用适当缩放的图像。

似乎没有工具可以使用这些属性来根据屏幕尺寸选择替代图像，例如裁剪或定向不同的图像。

这是对情况的正确理解吗？这是否意味着我们将不得不等待该picture元素被广泛支持来完成这项任务？

假设您有一个类似于此的图片元素：

但是假设图像的上下文对于每个断点都是不同的。也许在大尺寸的情况下，图片是一个人站在树前。但在移动尺寸下，它只是一棵树的图片。

有时，某些图片在移动尺寸下效果很好，而其他图片不依赖于页面布局等。

无论如何，对于图片元素，您只能alt=在单个位置为整个图片元素指定属性。但是如果图像上下文在每个断点之间发生变化，是否有可能以某种方式指定不同的alt=属性？您是否必须为此使用 JavaScript（可能对屏幕阅读器友好也可能不友好）？

我有这样的事情：

我也在使用图片填充。

我的问题是 firefox 和 chrome（我目前正在测试的 2 个）都只会加载 big.jpg，即使在小屏幕上也是如此。还检查了控制台的网络跟踪。

我的 css 将 img 设置为基本流体：

那么我的代码有什么问题？

图片元素为

在 Angular 4 中不起作用它为所有视口宽度选择第一个源，在上面的示例中是 image1.png

对此有任何解决方案吗？

无论如何可以在 IE11 上查看 webp 图像格式，或者可以在此浏览器上使用 javascript 代码将其转换为另一种格式？我尝试了“图片”元素，但似乎不能像 Chrome62 那样工作

我想开始在我的网站上使用 WebP。我正在转换如下所示的代码：

要编写如下所示的代码：

放置width和height属性的正确位置在哪里？即使选择了图像，仅在元素中使用heightandwidth属性是否有效？<img><source>

当我使用该picture元素时，浏览器（chrome）不会将图像与其他资源一起加载。但是，当我<picture>只替换<img>元素时，它可以正常工作：

为什么会这样？

我正在使用<picture>标签。我的目标群体使用现代浏览器，因此只要Firefox 支持 WebP，就无需使用该<img>标签。

现在：

很快：

有没有办法在不使用标签时实现alt属性？<picture><img>