需要对<图片>进行一些说明标签 - 我是初学者

发布于 2025-01-16 03:54:41 字数 1803 浏览 0 评论 0原文

我正在尝试编写一个标签，让我可以控制图像的多个方面，例如：

响应式图像尺寸
艺术方向
部分支持的图像格式，如 avif 或 webp
回退到常见的图像格式，如 JPG 和 webp 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>

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

原文

I'm trying to write a tag that lets me to control several aspects of an image like:

Responsive image sizes
Art direction
Partially supported image formats like avif or webp
Fall backs to common image formats like JPG & PNG

I'm a beginner and I'm still trying to work out way to do this, I know there are many resources around but I haven't been able to find one that covers these at the same time, and I'm not sure how to write it myself. I've tried:

                    <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>

The values above are just examples, I'd be very grateful if anyone could clarify for me how a tag that covers those aspects should look like when written down properly.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笔落惊风雨 2025-01-23 03:54:41

关于你的方法。第一次尝试就可以了，效果很好:)。不过，您应该做一些调整。

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

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

如果您的设计/客户端不是'在纵向与横向图像中使用其他图像裁剪/方向是没有用的。

关于文件格式我一般都是这种做法。除非不涉及透明度，否则请使用 JPG，然后自然是 PNG。关于其他文件格式，这个问题可能很深，并且取决于许多因素，例如客户/项目/预算/技术/区域，如果有意义的话就去吧。使用

webp 需要考虑的事情比 avif
根据用例和项目（客户端或非客户端），确保有软件可以生成它们。

对于主要问题。正如我上面所解释的，我对您的代码做了一些调整，应该可以正常工作。

如果您认为这很困难，有一些在线工具可以帮助您设置断点（我自己就是这样做的，这没有什么问题）。 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>

About your approach. It's ok and good work for a first try :). There are a few tweaks you should do though.

have a source tag for each file format
if you have 200w as available size in srcset I would say remove the (min-width) in sizes as it's not representative

This point is more information then commenting on your approach

if your design/client isn't using another image crop/orientation for the image in portrait vs landscape there is no use for it.

About file formats I generally have this approach. Use JPG unless there isn't transparency involved, then naturally PNG. About other file formats, that question can be deep and depend on many factors, things like client/project/budget/tech/region, if it makes sense go for it. Things to consider using

webp has broader support then avif
depending on the use case and project (client or not), make sure there is software to generate them.

To the main question. I made a few tweaks to your code as I explained above that should work ok.

There are online tools that can help you with breakpoints if you think that is hard (I do so myself there is nothing wrong with that). Cloudinary has a tool that is ok. Other then that I would recommend watching other large and respected Ecommerce/"regular" sites and inspecting their code.

<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>

回复收藏 0 原文

~没有更多了~