SharePoint Online 的图像优化

网页的加载速度取决于呈现页面所需的所有组件(包括图像、HTML、JavaScript 和 CSS)合并后的大小。图像是让网站更具吸引力的好方法,但是其大小会影响性能。通过压缩和调整大小来优化图像,并使用子画面,可以让超大图像的效果产生偏移。使用 SharePoint 图像呈现形式,你可以上传单张大图并显示图像的部分内容,从而重复使用图像而不重新加载。

使用子画面加速 SharePoint Online 中的图像加载

图像子画面包括许多较小的图像。使用 CSS 选择以绝对定位的形式显示在页面特定部分的复合图像的一部分。实际上你不加载多个图像,而是在整个页面上移动单个图像并使其一小部分通过小窗口可见,并在该窗口中向最终用户显示子画面图像的所需部分。SharePoint Online 使用子画面以显示其在子画面 spcommon.png 中的多种图标。

此处包含

  • 图像压缩

  • 图像优化

  • SharePoint 图像呈现形式

spcommon 的屏幕截图

由于不下载多个图像而只下载一个并将其缓存和重复使用,所以这可以提升性能。即使不保持缓存图像,但这种方法使用一个而非多个图像,仍可减少向服务器发出 HTTP 请求的次数,从而减少页面加载时间。这实际上是图像捆绑的一种形式。如果不频繁更改图像(例如图标),这是一种非常有用的技术,如上面提供的 SharePoint 示例所示。你可以使用 Web Essentials(一个基于社区的第三方开源项目)在 Microsoft Visual Studio 中轻松实现此目的。有关详细信息,请参阅 SharePoint Online 中的缩小和捆绑

使用图像压缩和优化加速 SharePoint 中的页面加载

图像压缩和优化是为了缩小网站上所用图像文件的大小。通常情况下,缩小图像大小的最佳方法是将图像调整为网站上将显示的最大尺寸。使图片大于将显示的尺寸毫无意义。使用图像编辑器确保图像的尺寸正确是缩小页面的一种简便快捷的方式。

一旦图像的大小合适,下一步就是优化图像压缩。有许多可用于压缩和优化的工具,包括照片库和第三方工具。压缩的关键是尽可能减小文件大小而不使最终用户感到质量下降。请确保在高清显示器上测试你压缩的文件以确保其外观效果仍然良好。

通过使用 SharePoint 图像呈现形式加速页面下载。

图像呈现形式是 SharePoint Online 中的一项功能,允许你基于预定义的图像尺寸提供不同版本的图像。当存在用户生成的图像内容或网站上的 CSS 固定了图像尺寸(如宽度和高度)时,这尤为重要。即使 CSS 固定了图像,仍将加载高分辨率图像。在这种情况下,可以通过使用图像呈现形式缩小文件大小。

注意: 只有启用了发布时,SharePoint 呈现形式才可用。可以在“设置”>“网站设置”>“管理网站功能”>“SharePoint 服务器发布”下启用发布。否则将不显示该选项。

图像呈现形式采用你定义的最小尺寸重新调整宽度或高度,然后基于锁定纵横比自动重设图像另一方向的尺寸。默认情况下,它将按剩余尺寸从中心裁剪图像。例如,如果你定义的呈现形式是宽 100px 高 50px,而原始图像宽 1000px 高 800px,则会对其重设大小,使 800px 方向变为 50px,并从图像的中心裁剪 1000px 方向(现为 62.5px)。

这些步骤相对简单,但是对于使用图像呈现形式的图像,这些呈现形式必须在你添加图像之前位于 SharePoint 网站上。此外,你还需要打开 SharePoint​​ 服务器发布基础结构(网站集级别)和 SharePoint 服务器发布(网站级别​​)功能。

添加图像呈现形式以加速页面加载

  1. 验证正在执行此过程的用户帐户至少具有网站集的顶级网站的“设计”权限,并验证网站正在被发布到网页。

  2. 在 Web 浏览器中,转到发布网站集的顶级网站。

  3. 选择“设置”图标。

  4. 在“网站设置”页面上,在“外观”部分中,你将看到内置图像呈现形式。

    可以使用现成的呈现形式,或选择“图像呈现形式”以创建新的呈现形式。

    图像呈现形式的屏幕截图
  5. 在“图像呈现形式”页面上,选择“添加新项目”。

    “添加新项目”的屏幕截图
  6. 在“新建图像呈现形式”页面上,在“名称”框中输入呈现形式的名称。

  7. 在“宽度”和“高度”文本框中,输入呈现形式的宽度和高度(以像素为单位),然后选择“保存”。

    图像呈现形式名称的屏幕截图

通过 SharePoint 中的图像呈现形式进行自定义裁剪

默认情况下,图像呈现形式从图像中心产生。通过裁剪你想要使用的图像部分,可以调整单个图像的图像呈现形式。你可以对每个呈现形式逐个进行裁剪。通过使用 SharePoint 的博客缓存创建每个呈现形式的图像的版本,裁剪图像可以加速页面加载。这种方法可以减小服务器负荷,因为仅调整一次图像大小即可多次向用户提供。有关如何裁剪图像呈现形式的详细信息,请参阅裁剪图像呈现形式

扩展你的技能
了解培训
抢先获得新功能
加入 Office 预览体验计划

此信息是否有帮助?

谢谢您的反馈!

谢谢你的反馈! 可能需要转接到 Office 支持专员。

×