响应的图像

上传图像的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限制。您的浏览器将根据设备大小和分辨率提供最好的变体。例如，如果你上传了一个4000像素宽的原始图像，但它在移动设备上只以300像素的宽度渲染，你的浏览器将提供500像素的webflow创建的变体。

是否导出响应式变体?

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

有用的资源

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

我们还建议Eric Portis在A List Apart中的文章对于那些想要深入了解响应式图像技术的人。