Framer中的图片如何优化

当你上传图片到 Framer 时，我们会自动对其进行优化。你无需手动将其转换为 WebP/AVIF 格式，也无需调整大小以适应内容。

TL;DR：最佳实践

JPEG、PNG、WebP 和 GIF 图像：直接上传即可，并在“填充”部分的“图像”设置中将分辨率设为“自动”。Framer 会自动将大多数图像转换为 AVIF，并调整其大小以匹配网站上的宽度和屏幕分辨率。
SVG 图像：通过绘制一个框架并选择“填充”选项，然后选择“图像”，将其作为图像上传。

移动设备用户拥有更小的屏幕。如果你为桌面布局上传一张 3000×2000 像素的图像，在分辨率为 390×890 的手机屏幕上下载这张图像将会浪费网络资源。为了避免这种情况，Framer 会自动调整图像大小，并让浏览器根据屏幕选择最合适的版本。

每个上传的 JPEG、PNG、WebP、AVIF 和 GIF 图像都会被缩小至 512、1024、2048 和 4096 像素。
- 我们从不放大图像。例如，如果一张图像宽 3000 像素，我们只会将其缩小为 512、1024 和 2048 像素。
- 调整图像大小时，我们测量图像较长边的尺寸。以上述例子为例，如果图像是 3000 像素高且高度大于宽度，我们将生成高度为 512、1024 和 2048 像素的变体。
对于每一个 <img> 标签（极少数例外情况除外），我们会生成 srcset 和 sizes 属性。sizes 告诉浏览器图像的实际显示尺寸，而 srcset 提供所有已调整大小的版本（加上原始尺寸），以便浏览器选择最适合的版本。
此逻辑由“填充 → 图像”中的“分辨率”下拉菜单控制：

“小”、“中”、“大”和“完整”选项会跳过自动缩放逻辑，分别强制使用 512、1024、2048 和 4096 像素的尺寸。
我们依然不会放大图像。如果图像宽度为 1500 像素，“大”和“完整”选项将提供宽 1500 像素的图像。

AVIF 是一种图像格式，相比 JPEG、PNG 甚至 WebP，能够实现更高的压缩效率。

图像将以质量等级 80 的有损方式转换为 AVIF。
例外情况：
- 在“分辨率”选项中选择“自动（无损）”（通过“填充”后选择“图像”访问）将使用无损 WebP 而非有损 AVIF。这会导致文件体积更大，但可确保没有压缩伪影。
- 动画图像保持为有损 WebP，因为 Framer 目前无法将动画转换为 AVIF。
- 首次请求时，系统会先提供质量等级为 90 的有损 WebP，同时在后台进行 AVIF 转换。完成后，AVIF 将替换 WebP。
- 如果某个图像的 AVIF 或 WebP 版本比原始文件更大，Framer 将直接提供原始文件。
Framer 在现代浏览器（如 Safari 16.4+）中提供 AVIF 支持；对于不支持 AVIF 的浏览器，则提供 WebP；如果两者都不支持，则提供重新压缩后的原始文件。

问：“为什么对 PNG 使用有损压缩，而 PNG 本身是无损格式？” 我们注意到，许多用户上传到 Framer 的 PNG 图像实际上是截图！这类图像使用有损压缩可以显著减小体积，而且由于我们将质量保持在 90，不会出现可见的压缩伪影。

许多 PNG 上传内容（例如截图）在质量设为 90 时使用有损压缩可显著减小文件大小而无可见伪影。

Framer 使用 SVGO 对上传的 SVG 图像进行优化，适用于上传的 SVG 图形以及作为图像填充的 SVG。

提示：SVG 图形在实际站点中渲染为 <svg> 标签。如果你的 SVG 包含大量路径和图层，可能会影响站点性能。建议将 SVG 作为图像填充上传（绘制一个框架 → 选择“填充” → 选择“图像”）。

如果你仍然遇到问题，请通过我们的联系页面与我们联系以获取进一步帮助。