响应式图像，带有srcset的图片与img，后备问题 [英] Responsive image, picture vs img with srcset, fallback issue

问题描述

整天阅读了关于一种方法或另一种方法的信息后，我仍然不确定什么对我来说是最好的，所有站点都在解释同一件事，但是当我想知道真正让我担心的事情时，没有人谈论这件事./p>

我的情况:我几乎所有的图像都使用宽度为100％且高度为auto的图像，并且图像容器具有动态尺寸，例如30vw或40％等(不确定是否在这种情况下，我仍然需要在img标签中设置高度和宽度值)

如果我也想为图像和webp格式提供不同的大小，并由浏览器决定选择什么，该怎么办?

我可以提供不带图片和源标签的webp图像吗?我可以使用图片方法，仍然让浏览器选择显示的图片吗?

不知道为什么我们需要选择简单的img src作为最小图像的后备，在这种情况下，如果有人使用IE和大屏幕输入，则图像将始终被像素化.在这种情况下，我宁愿让一些用户等待比向他们提供低分辨率图像多一点的时间.另外，如果使用具有后备选项的低分辨率图像，则不确定如何影响单个图像的seo排名.

解决方案

您的描述看起来像是响应图像的常见用例.例如，如果您有一个图像在大屏幕上以50％的宽度显示，而在小于900px的视口中以100％的宽度显示，则HTML可能如下所示:

 < picture><来源type ="image/webp"size =(最小宽度:900px)50vw，100vw"srcset ="image-500.webp 500w，image-1000.webp 1000w，image-1500.webp 1500w">< imgsize =(最小宽度:900px)50vw，100vw"srcset ="image-500.jpg 500w，image-1000.jpg 1000w，image-1500.jpg 1500w"src ="image-1000.jpg"></图片> 

通过这种方式，支持< picture> 和 webp 图像的浏览器会选择 image-*.webp 文件之一，这些浏览器会支持 srcset 和 sizes 选择 image-*.jpg 文件之一，所有其他浏览器都显示 image-1000.jpg .

此技术最重要的部分是正确指定 sizes 属性，以便浏览器可以很好地决定要加载的图像.您可以在此处找到有关它的更多信息: https://ericportis.com/posts/2014/srcset-sizes/

要在旧"浏览器上显示的图像可以通过 src 属性自由选择.或者，您可以使用 Picturefill 或 解决方案

Your description looks like a common use case for responsive images. If you have for example an image that is shown at 50% width on large screens and at 100% width on viewports smaller than 900px, your HTML could look like this:

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

This way browsers that support <picture> and webp images select one of the image-*.webp files, browsers that support srcset and sizes select one of the image-*.jpg files and all other browsers show the image-1000.jpg.

The most important part with this technique is to specify the sizes attribute correctly so browsers can make good decisions which image to load. You can find more information about it here: https://ericportis.com/posts/2014/srcset-sizes/

The image you want to display on "old" browsers can be freely selected via the src attribute. Or you "polyfill" the feature via JavaScript with tools like Picturefill or respimage.

You can omit the <picture> and <source> elements and do the type switch on the server side via HTTPs Accept header as an alternative.

这篇关于响应式图像，带有srcset的图片与img，后备问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！