通过使用 Cloudimage 为任何设备自动优化所有图像来提高网站性能

已发表: 2020-04-22

根据 Lighthouse 的说法,图像优化是网站速度和性能不佳的最常见问题之一。

未优化的图像可能会使您的页面加载速度减慢 9 秒以上,在某些情况下甚至更多。

缓慢的页面导致更高的跳出率和更低的 SERP 定位,这反过来意味着更少的流量和更少的付费客户。

图像优化包括什么?

通过使用 Cloudimage 1 为任何设备自动优化所有图像来提高网站性能

优化您网站上的所有图像是一项非常复杂的工作,需要专业知识和相当多的时间才能正确完成。

插件可以帮助节省一些时间,但如果处理不当,它们也会破坏您的整个网站结构并永久删除您的一些媒体。

要了解为什么我们认为这是一项复杂的工作,这里有一个 Cloudimage 认为对正确图像优化至关重要的 20 点清单:

  1. 整合 CDN 交付
  2. 优化 TTFB
  3. 使用 360 度产品视图
  4. 确保您的图像是响应式的
  5. 正确调整图像大小
  6. 使用正确的图像格式
  7. 压缩图像
  8. 优化alt属性
  9. 清楚地说明图片
  10. 照顾好你的产品角度
  11. 知道如何混合颜色
  12. 创建情感融合的视觉效果
  13. 使用产品对应背景
  14. 优化您的缩略图
  15. 使用图片站点地图
  16. 应用色度二次采样
  17. 延迟加载非关键图像
  18. 部署图像精灵
  19. 开始缓存图片资源
  20. 预加载关键图像资产

从技术方面来看,上面列表中最重要的点是调整大小、格式优化、延迟加载、图像压缩、响应性和 CDN 交付。

如果您的网站上有 11.000 张图片。

完成优化需要多长时间?

现在想象一下能够自动做到这一点!

这就是 Cloudimage 所做的。

通过使用 Cloudimage 2 为任何设备自动优化所有图像来提高网站性能
通过使用 Cloudimage 3 为任何设备自动优化所有图像来提高网站性能

您可以通过我们的软件批量上传所有图片,它们将自动兑现并上传到云端。

之后是优化。

图像调整大小

Cloudimage 的大小调整服务器,位于全球三个数据中心(加拿大、法国和新加坡),将从 origin_image_url 下载您的原始图像,根据操作和过滤参数进行转换,最后通过火箭显示在您的网站或移动应用程序上- 快速 CDN。

原始图像托管在您的 Web 服务器、Amazon S3 存储桶或任何其他可通过 HTTP 访问的存储上的示例。

当您同时指定宽度和高度时,可以忽略或保持原始图像比例。 此外,您可以选择向图像添加填充。 Cloudimage 提供以下调整大小模式:

通过使用 Cloudimage 4 为任何设备自动优化所有图像来提高网站性能

庄稼

保持图像比例切割图像以适合定义的宽度和高度。

合身

调整图像大小,保持比例添加填充以满足所需的尺寸。

边界

尝试在保持比例的同时调整图像大小。 类似于 fit 但没有填充。

覆盖

忽略原始图像比例,将图像调整为给定的宽度和高度。

旋转

将图像逆时针旋转指定角度

修剪

移除图像周围的单色框。

图像压缩

您可以使用压缩过滤器更改图像的压缩(输出格式和质量)。

您可以在调整大小操作和图像过滤器的同时使用压缩过滤器。

默认情况下,Cloudimage 将图像作为 WebP 交付。 如果客户端浏览器不支持该格式,则会回退到 JPEG 或 PNG。

通过使用 Cloudimage 5 为任何设备自动优化所有图像来提高网站性能

Optipress – 基于机器学习的图像压缩

JPEG 压缩的主要挑战是为每个不同的图像找到最佳的压缩因子。

使用相同压缩参数压缩的不同图像可能会导致不同的感知质量。

此外,不同尺寸的相同图像可能需要不同的压缩策略来实现最大尺寸增益,而不会造成明显的质量损失。

为了克服这个问题,我们开发了 Optipress JPEG 压缩算法。

Optipress 通过分析特定图像特征和当前压缩参数找出最佳 JPG 压缩方法。

机器学习模型确定此图像的最佳压缩策略。

然后基于人类视觉系统的模拟模型评估质量,以实现最佳压缩,而不会感知质量下降。

转换预设

如果您希望在许多图像上应用相同的变换,您可以定义预设并仅使用预设名称 (X) 应用变换。

p=X

任何调整大小的转换或图像过滤器都可以包含在预设中,以及水印和图像压缩参数。

这使得批量优化过程可以节省超过 50% 的图像优化时间,并且任何相关人员都可以轻松完成。

响应式图像变得容易

响应式图像根据最终用户的屏幕尺寸调整图像尺寸,从而允许您的网站或移动应用程序在各种屏幕尺寸上更快地加载。

Cloudimage 团队开发了一个 JS 插件来为您自动化一切。

通过使用 Cloudimage 6 为任何设备自动优化所有图像来提高网站性能
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

Cloudimage JS 库将自动调整您的所有 URL,并提供内置的响应式设计、延迟加载和更多功能,以使您的网站响应迅速,并为您的图像添加漂亮的加载效果。

通过延迟加载和启用缓存,您可以确定您的网站加载时间将至少提高 40%。 将 CDN 添加到其中,百分比甚至上升到 60%。

内容交付网络

Cloudimage 利用内容交付网络来加速您的图像在全球范围内的交付。 我们与多家 CDN 提供商合作,以优化您的图像交付并提供卓越的可靠性。

通过使用 Cloudimage 7 为任何设备自动优化所有图像来提高网站性能

除了加速您的图像之外,CDN 还提供 DDoS(分布式拒绝服务)保护,这将充当您的服务器的屏障并避免任何停机时间。

只要最终用户请求图像,CDN 通常会缓存图像。

分分钟实施

Cloudimage 的独特之处在于它的服务可以非常快速地实现。

如果您的网站正在经历疯狂的流量高峰,您可以随时联系 cloudimage,优化您的图像,并确保这些高峰会立即被吸收。

这使您在各种设备上都能获得完美的性能和快速的页面加载速度。

此外,实施非常简单,使团队(负责网站从内容制作到发布和监控的团队)之间的协作过程简单高效。

当我们大多数人在接下来的一段时间内被迫使用我们的家庭办公室时,这一点尤其重要。
有关 Cloudimage 服务如何工作的更多信息,请访问我们的 cloudimage.io