最近我读到了关于网页设计艺术指导的文章，并试图提高我对响应图像的了解。到目前为止，我阅读了一些关于图片HTML元素的文章，源代码和img元素如何在图片元素中工作，以及一些关于lazysies.js.的教程
我大体上理解了这个想法，但有两件事我不确定；所以，如果我不需要艺术指导，只关心加载相同大小的图像，img标签就足以得到我们想要的。然而，如果我们想为横向和纵向视口定义特定的图像，我们需要使用pictureHTML元素。我很好奇的是，当我查看img中srcset属性中定义的图像名称时，我发现我们只给出了320w、480w这样的宽度信息。浏览器是否检查图像的纵横比并拒绝加载具有不同纵横比的图像？或者，我们可以在同一个img标签中提供人像和风景框图像，并使用媒体查询对CSS进行调整，这将允许我们只使用img元素进行艺术指导吗？是什么让艺术指导必须使用图片元素？
我的第二个问题是，假设我使用pictureHTML元素为移动设备和桌面定义不同的图像，同时使用lazysize。
据我所知，在一个图片元素中，我们只定义了一个img，我应该在其中加载我的低质量占位符图像。但是，由于我在datasrc集中同时有纵向视图和lanscape视图，我如何告诉浏览器或lazysize在img中加载横向占位符(当它是桌面时(，并在移动设备时加载纵向视图占位符图像？因为，我认为，由于我们只能定义一个带有src属性的img，在其中我们定义低质量的占位符图像，所以我只能选择人像或风景框图像，如果浏览器选择另一个框选项作为最合适的图像，这会看起来有点奇怪。我是错了，还是在所有关于这个问题的信息轰炸中迷失了方向？
提前感谢
为Portrait和Landscape使用不同的图像可能不是一个好方法。最后，在Lazy加载之后，将加载一个图像src，如果用户旋转设备并从纵向转到横向，他将看不到正确的图像。
有一个选项可以创建两个容器-一个用于肖像，一个用于桌面，并使用CSS媒体查询(https://caniuse.com/mdn-css_at-rules_media_orientation)用于显示正确容器的无/块。在每个容器中，您可以延迟加载适当的图像。缺点是，将加载2个图像。