响应的图像

webflow创建上传图像的变体。首先是原始图像，然后是大小为2000px、1600px、1080px、800px和500px的变体图像。

当你上传图片到你的网站时，Webflow会创建你上传图片的变体，以确保它们在任何设备上都能快速响应和加载。这可以帮助您的移动页面加载速度高达10倍。

使图像具有响应性意味着您的浏览器可以根据页面上图像的大小和屏幕分辨率(通过添加srcset而且大小您的属性< img >元素)。为了让浏览器访问不同大小的图像版本，Webflow在上传时为每个图像创建一组变体，然后对浏览器的指令进行编码，以便知道何时提供每个变体。

重要的是:如果您的原始图像压缩到足够的程度，Webflow将使用您的原始图像。

手动生成跨站点的响应图像

Webflow测量您的图像，并在您在网站页面上工作时生成响应式变体。但您可能会对其他页面上的图像进行更改(例如，更新符号或类)。为确保所有图像保持响应，您可以访问受影响的页面，或使用快捷方式命令+转变+我(Mac)或控制+转变+我(在Windows上)，设计器将为您扫描和重新测量所有页面。

为2016年9月之前建造的网站生成响应性图像

如果您在2016年9月14日之前创建了您的网站，您将需要通过一个快速过程在您的网站上生成响应式图像。下次打开设计器时，您将看到一个模式，要求您开始迁移过程。

这个过程可能需要几分钟，具体时间取决于站点的大小。如果您更愿意稍后执行此操作，您可以从资产面板或者使用快捷键命令+转变+我(Mac)或控制+转变+我(在Windows上)。

禁用响应式图像

要禁用特定图像的此功能(例如，如果您需要强制浏览器使用原始图像大小):

1. 在Webflow画布上选择图像
2. 类型命令+转变+O(Mac)或控制+转变+O(在Windows上)
3. 开放设置面板>图像的设置
4. 取消的响应的图像复选框

管理具有交互作用的响应式图像

Webflow从正常状态创建响应图像——而不是悬停状态或可能改变图像大小的交互。添加悬停状态样式或交互后，最好在发布之前检查一下站点，确保一切正常。

在某些情况下，您可能需要添加额外的样式来覆盖尺寸属性对图像元素尺寸的影响。例如，您可能需要将图像的宽度设置为100%以填充其容器。

关于响应式图像的常见问题

支持哪些图像类型?

该功能为所有内联jpg、png和WebP图像生成响应式变体，通过富文本元素添加的除外。它也不适用于背景图像。对于高细节或基于矢量的图像，我们推荐svg和png，因为它们具有无损压缩。

每张图像生成多少个变量?

Webflow生成的变量的数量取决于图像的原始大小。如果宽度大于3200px, Webflow将生成7个变体:3200px、2600px、2000px、1600px、1080px、800px和500px。

我应该上传多大尺寸的图片?

你可以上传任何你想要的图片大小，只要它小于我们的4MB限制。您的浏览器将根据设备大小和分辨率提供最好的版本。例如，如果你上传了一个4000px宽的原始图像，但它在移动设备上只呈现300px宽，你的浏览器将提供500px的webflow创建的变体。

是否导出响应式变量?

是的，响应图像将在导出的站点中具有srcset和sizes属性，并且变量将与您的原始图像一起在.zip文件的/images文件夹中。

有用的资源

您可以在我们的详细信息中了解更多有关响应图像的信息关于这个主题的博客文章．

我们还推荐埃里克·波蒂斯在《分开的名单》上的文章对于那些想要深入研究响应式图像技术的人。