需要澄清一下<picture>标签-我是个初学者

Question

我正在尝试编写一个标记，它允许我控制图像的几个方面，例如：

• 响应图像大小
• 艺术方向
• 部分支持的图像格式，如avif或webp
• 缩回常见的图像格式，如JPG和PNG

我是个初学者，我还在努力想办法做到这一点，我知道周围有很多资源，但我还没有找到一个同时涵盖这些资源的资源，我不知道如何自己编写它。我试过：

                    <picture>
                      <source media="(orientation: landscape)"
                              srcset="land-small-test-image.avif 200w,
                                      land-medium-test-image.avif 600w,
                                      land-large-test-image.avif 1000w
                                      land-small-test-image.jpg 200w,
                                      land-medium-test-image.jpg 600w,
                                      land-large-test-image.jpg 1000w"

                              sizes="(min-width: 700px) 500px,
                                    (min-width: 600px) 400px, 100vw">
                    
                      <source media="(orientation: portrait)"
                              srcset="port-small-test-image.avif 700w,
                                      port-medium-test-image.avif 1200w,
                                      port-large-test-image.avif 1600w
                                      port-small-test-image.jpg 700w,
                                      port-medium-test-image.jpg 1200w,
                                      port-large-test-image.jpg 1600w"
                                 
                              sizes="(min-width: 768px) 700px,
                                    (min-width: 1024px) 600px, 500px">
                       
                      <img src="land-medium-test-image.jpg" alt="Car">
                    </picture>

上面的值只是一些例子，如果有人能为我澄清一个覆盖这些方面的标签在正确地写下来时应该是什么样子的话，我将非常感激。

Answer 1

关于你的方法。第一次尝试还不错:)。不过，你应该做一些调整。

• 为每种文件格式都有一个源标记
• 如果在srcset中有200 W的可用大小，我会说删除(最小宽度)的大小，因为它不具有代表性。

这一点是更多的信息，然后评论您的方法。

• 如果您的设计/客户端没有使用另一个图像裁剪/方向在肖像和景观中的图像，那么它是没有用的。

关于文件格式，我通常有这样的方法。除非不涉及透明度，否则使用JPG，然后自然使用PNG。关于其他文件格式，这个问题可能很深，并且取决于许多因素，比如客户机/项目/预算/技术/区域，如果它有意义的话。要考虑使用的东西

• webp比阿维夫有更广泛的支持
• 根据用例和项目(客户端或非客户端)，确保有软件生成它们。

主要问题。我对您的代码做了一些调整，就像我前面解释的那样，应该可以正常工作。

有一些在线工具可以帮助你找到断点，如果你认为这很难的话(我自己也是这样做的，这没什么错)。Cloudinary有一个没问题的工具。另外，我建议观看其他大型和受人尊敬的电子商务/“常规”网站，并检查它们的代码。

<picture>
  <source media="(orientation: landscape)" srcset="land-small-test-image.avif 200w,
                                      land-medium-test-image.avif 600w,
                                      land-large-test-image.avif 1000w" sizes="400px, 100vw">

  <source media="(orientation: landscape)" srcset="
                                      land-small-test-image.jpg 200w,
                                      land-medium-test-image.jpg 600w,
                                      land-large-test-image.jpg 1000w" sizes="400px, 100vw">

  <source media="(orientation: portrait)" srcset="port-small-test-image.avif 700w,
                                      port-medium-test-image.avif 1200w,
                                      port-large-test-image.avif 1600w" sizes="600px, 500px">

  <source media="(orientation: portrait)" srcset="
                                      port-small-test-image.jpg 700w,
                                      port-medium-test-image.jpg 1200w,
                                      port-large-test-image.jpg 1600w" sizes="600px, 500px">

  <img src="land-medium-test-image.jpg" alt="A car">
</picture>