从amazon s3和cloudFront

Question

我正在使用amazon s3服务来托管图片。我的网站上有很多图像。 我也使用CloudFront Distributions作为cdn。 图片网址很好。

但与其他顶级和竞争对手的网站相比，我的图片仍在缓慢加载。

有没有办法更快地加载图片？

由于

Answer 1

图像可能存在许多其他问题：

• 在页面上加载太多图像。确保您在初始渲染时看不到图像的延迟加载。
• 使用错误尺寸的图像。这可以通过调整图像大小来修正。此外，不要忘记响应式图像。您可以阅读有关他们的更多信息here
• 使用下一代格式。例如，请使用WEBP表示Chrome浏览器，JPEG2000表示使用Safari。

您可以使用Lighthouse工具在上面列出的所有问题上测试您的网站。

此外，可能值得考虑对pixboost.com等图像使用专门的CDN。

Answer 2

使用像Cloudfront这样的CDN是加速图像的第一步。它解决了全球分销的挑战（您的网站在欧洲托管，但您有来自澳大利亚的访客=＆gt;图片将从澳大利亚的Cloudfront节点加载，显然比从欧洲旅行更快）。此外，它有助于吸收交通高峰，例如在销售，圣诞节期间......

要进一步了解图像加速，您需要自己处理图像并专注于两件事：

1. 将图像调整为目标尺寸（缩略图，预览，完整尺寸......），并针对不同的屏幕尺寸使用不同的尺寸。

2. 使用图像压缩算法“缩小”图像。您可以使用JPEG压缩或其他图像格式，如WebP，JPEG 2000，JPEG XR，......这些格式通常可以执行（缩小）更好的JPEG，但它们有很大的局限性：它们仅受特定浏览器的支持。请访问caniuse.com获取浏览器支持信息：https://caniuse.com/#feat=webp

最重要的是，您最终需要相同图片的15-20个版本才能在所有浏览器，设备屏幕尺寸，用例等方面实现最大优化...

有多种方法可以自动执行此操作，例如使用ImageMagick。它是一个很棒的库，但它需要编码和维护，因为它非常动态地发展。

另一种选择是使用基于云的图像加速和传送服务。这些服务通常将图像大小调整和CDN交付捆绑在一起，并且可能会在与多个CDN供应商协商大型合同时为您提供更好的CDN定价。

我们使用https://cloudimage.io，但还有其他很棒的工具。谷歌是你最好的朋友:)。

祝你好运加速你的页面，更快的图像肯定会产生很大的影响。