可适应的视觉效果

将图片上传到您的网站后，Webflow 会生成您上传的图片的变体，以确保它们无缝适应并在任何设备上快速加载。这可以将移动页面加载速度提高 10 倍。

为了使视觉效果具有适应性，你的浏览器会根据页面上的尺寸和屏幕分辨率提供不同大小的视觉效果版本（通过合并 源码 和 尺寸 属性到你的 <img> 元素）。为了让浏览器能够访问不同大小的视觉效果版本，Webflow 会为上传后的每幅视觉效果制作一组变体，然后为浏览器提供编码指令，以确定何时提供每个变体。

至关重要的： 如果您的初始视觉效果被充分压缩，Webflow 将采用您的原始视觉效果。

在整个网站中手动创建自适应视觉效果的指南

Webflow 会评估您的视觉效果，并在您与网站页面互动时生成可适应的变化。不过，您可能会引入影响其他页面视觉效果的修改（例如，编辑组件或 category）。为确保所有视觉效果保持可适应性，您可以导航到受影响的页面或使用键盘快捷键 命令 + 转移 + 我 （在 Mac 上）或 控制 + 转移 + 我 （在 Windows 上），设计器将为您分析并重新校准所有页面。

2016 年 9 月之前建立的网站生成自适应视觉效果的说明

如果您的网站是在 2016 年 9 月 14 日之前创建的，则需要执行一个简单的过程才能在您的网站上生成可适应的视觉效果。下次您访问设计器时，将出现一个对话框提示您开始迁移过程。 

此过程可能需要几分钟，具体取决于您网站的大小。如果您希望稍后执行此操作，您可以随时从 资源面板 或使用键盘快捷键 命令 + 转移 + 我 （在 Mac 上）或 控制 + 转移 + 我 （在 Windows 上）。

决定反对适应性视觉效果

要针对特定视觉效果停用此功能（例如，如果您希望强制浏览器使用原始视觉尺寸）：

1. 选择画布上的视觉效果
2. 使用权 设置面板 > 图像设置
3. 取消选择 图像可适应 checkbox

通过交互控制自适应视觉效果

Webflow 从常规状态（而不是悬停状态或可能调整视觉效果大小的交互）中获取可适应的视觉效果。一旦您嵌入悬停状态样式或交互，建议在发布之前彻底检查您的网站。

在某些情况下，您可能需要加入补充设计来覆盖尺寸属性对视觉元素尺寸的影响。例如，您可能需要将视觉元素的宽度指定为 100% 以占据其容器。 

经常问的问题

支持哪些类型的视觉效果？

此功能为所有内联 JPG、PNG 和 WebP 图像（通过富文本元素集成的图像除外）创建可定制版本。此外，它不适用于背景图像。我们建议对复杂或基于矢量的图像使用 SVG 和 PNG，因为它们具有无损压缩功能。

每个视觉效果创建了多少个变体？

Webflow 生成的变体数量取决于原始视觉效果的大小。如果宽度超过 3200px，Webflow 将生成 7 种变体：3200px、2600px、2000px、1600px、1080px、800px 和 500px。

上传的图像应该采用什么尺寸？

您可以上传任意尺寸的视觉效果，只要不超过 4MB 的限制。您的浏览器将根据设备尺寸和分辨率提供最佳版本。例如，如果您上传的原始视觉效果宽度为 4000px，但在移动设备上仅显示宽度为 300px，则您的浏览器将呈现 Webflow 创建的 500px 版本。

可适应变体是否已导出？

肯定的、适应性强的视觉效果将在导出的站点中具有 srcset 和 size 属性，并且变体将与原始视觉效果一起存储在 .zip 文件的 /images 目录中。

在 Webflow 博客上进一步了解自适应视觉效果. 对于有兴趣深入研究自适应视觉技术的个人， Eric Portis 在 A List Apart 上的文章 也可能被证明是有益的。