image - Cloudinary，Imgix等服务的效率

Question

我想建立一个包含很多图像的网站，并因此对图像进行处理，例如亚马逊，ebay，flipkart等。建议我使用Cloudinary，Imgix等服务来调整图像大小，因为最好存储每个图像的一个版本，尽管我需要多个具有不同大小的版本。我想知道这些服务的效率如何。有什么问题吗？我希望我的网站能够快速响应。我听说过这样的担忧，例如“请注意您至少将传输延迟加倍，这通常会占用完成图像操作所需的时间。

正常:最终用户->您的用户->最终用户

通过这些服务:end_user-> your_user-> you-> your_user-> end_user”

Answer 1

(免责声明:我在imgix处理开发人员关系，并将在适用于我们堆栈的情况下回答此帖子)

您完全正确地认为，对于完全未缓存的图像，将涉及更多的“跃点”来提供图像。对于第一个查看图像的用户，这可能会导致延迟稍有增加。但是，此后，图像由我们的渲染群集和全局CDN缓存，这使得基于原始图像的后续任何图像请求都更快。无论哪种方式，通过将大小正确的图像提供给浏览器而节省的字节数几乎总是超过初始请求图像所带来的额外延迟。

这是一个简单的图，显示了尚未缓存图像时的流程:

                      ┌─────────────────┐  4. Origin responds
                      │   Your Origin   │  with full-size
                      │ (S3/web folder) │  `dogs.png` image.
                      └─────────────────┘
                        ▲             │
                        │             │
                        │             │
                        │             ▼
      3. Image is not ┌─────────────────┐  5. imgix caches the
cached at imgix, send │      imgix      │  full-size image, then
request to origin for │                 │  resizes it to 300px
           `dogs.png` └─────────────────┘  wide and caches that
                        ▲             │    derivative.
                        │             │
                        │             ▼
      2. Image is not ┌─────────────────┐  6. The imgix CDN
       cached at CDN, │ imgix CDN (edge │  caches the 300px wide
     forward to imgix │nodes worldwide) │  variant and serves it
   rendering cluster. └─────────────────┘  to the browser.
                        ▲             │
                        │             │
                        │             │
                        │             ▼
  1. Browser requests ┌─────────────────┐  7. The browser
     `dogs.png?w=300` │ User's Browser  │  receives and renders
                      │                 │  300px wide `dogs.png`.
                      └─────────────────┘

一旦缓存了图像(在一个用户请求后)，循环就变得更加紧密:

 2. The imgix CDN has ┌─────────────────┐
 this variant cached, │ imgix CDN (edge │
 and serves it to the │nodes worldwide) │
             browser. └─────────────────┘
                        ▲             │
                        │             │
                        │             │
                        │             ▼
  1. Browser requests ┌─────────────────┐  3. The browser
     `dogs.png?w=300` │ User's Browser  │  receives and renders
                      │                 │  300px wide `dogs.png`.
                      └─────────────────┘

将原始图像缓存在我们的渲染集群中之后，生成派生类也要快得多(在这种情况下，是600px宽的版本)，因为它们不需要到原始服务器的额外行程:

3. Full-size image is ┌─────────────────┐  4. imgix resizes the
    already cached at │      imgix      │  cached full-size image
     imgix, no origin │                 │  to 600px wide and
      request needed. └─────────────────┘  caches that
                        ▲             │    derivative.
                        │             │
                        │             ▼
      2. Image is not ┌─────────────────┐  5. The imgix CDN
       cached at CDN, │ imgix CDN (edge │  caches the 600px wide
     forward to imgix │nodes worldwide) │  variant and serves it
   rendering cluster. └─────────────────┘  to the browser.
                        ▲             │
                        │             │
                        │             │
                        │             ▼
  1. Browser requests ┌─────────────────┐  6. The browser
     `dogs.png?w=600` │ User's Browser  │  receives and renders
                      │                 │  600px wide `dogs.png`.
                      └─────────────────┘