图像源集：响应式 + Webp + Retina

如何解决图像源集：响应式 + Webp + Retina

我想要具有 webp 和 Retina 替代方案的响应式图像，但我不确定如何组合所有这些条件。我正在挖掘这个主题，现在我迷路了。

我有 1 张图像有 2 个断点：

• 768 像素前 400 像素的宽度
• 768 像素之后的 800 像素宽度。

所以我应该写这个吗？ :

<picture>
  <source type="image/webp" sizes="400px" srcset="
      image-800x400.webp 1x,image-1600x800.webp 2x">
  <img sizes="400px" srcset="
      image-400x200.jpg 400w,image-600x300.jpg 600w,image-800x400.jpg 800w"
      src="image-400x200.jpg" alt="" width="400" height="200">
</picture>

或者包含 webp 的媒体查询？ :

<picture>
  <source media="(min-width: 768px)" type="image/webp" sizes="800px" srcset="
    image-800x400.webp 1x,image-1800x800.webp 2x">
  <source media="(min-width: 320px)" type="image/webp" sizes="400px" srcset="
    image-400x200.webp 1x,image-800x400.webp 2x">
  <img sizes="400px" srcset="
      image-400x200.jpg 400w,image-800x400.jpg 800w"
      src="image-400x200.jpg" alt="" width="400" height="200">
</picture>

预先感谢您的帮助！ :)