在整天阅读了关于一种方法或另一种方法的信息后，我仍然不确定什么对我来说是最好的，所有站点都在解释同一件事，但是当我想知道真正让我担心的事情时，没有人谈论这件事。
我的情况：我几乎所有图像的宽度和宽度都自动设为100％，并且图像容器具有动态尺寸，例如30vw或40％等（不确定在这种情况下是否仍需要设置高度和img标签中的宽度值）
如果我也想为图像和webp格式提供不同的大小，并由浏览器决定选择什么，该怎么办？
我可以提供没有图片和源标签的webp图像吗？我可以使用图片方法，仍然让浏览器选择显示的图像吗？
也不知道为什么我们需要为简单的img选择img src作为最小的图像，在这种情况下，如果有人使用IE和大屏幕输入图像，则图像始终会被像素化。在这种情况下，我希望让一些用户等待的时间比为他们提供低分辨率图像的时间更长。另外，如果具有具有后备选项的低分辨率图像，则不能确定如何影响单个图像的seo排名。
您的描述看起来像是响应图像的常见用例。例如，如果您有一个图像在大屏幕上以50％的宽度显示，而在小于900px的视口中以100％的宽度显示，则HTML可能如下所示：
<picture>
<source
type="image/webp"
sizes="(min-width: 900px) 50vw, 100vw"
srcset="image-500.webp 500w, image-1000.webp 1000w, image-1500.webp 1500w"
>
<img
sizes="(min-width: 900px) 50vw, 100vw"
srcset="image-500.jpg 500w, image-1000.jpg 1000w, image-1500.jpg 1500w"
src="image-1000.jpg"
>
</picture>
通过这种方式，支持<picture>和webp选择图像的浏览器选择其中一个image-*.webp文件，支持srcset并sizes选择其中一个image-*.jpg文件的浏览器，所有其他浏览器都显示image-1000.jpg。
使用此技术最重要的部分是sizes正确指定属性，以便浏览器可以正确决定要加载的图像。您可以在此处找到有关它的更多信息：https : //ericportis.com/posts/2014/srcset-sizes/
您可以通过该src属性自由选择要在“旧”浏览器上显示的图像。或者，您可以通过JavaScript使用Picturefill或respimage之类的工具“填充”该功能。
您可以省略<picture>和<source>元素，并通过HTTPsAccept标头在服务器端进行类型切换。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句