我想要具有 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>
预先感谢您的帮助! :)