HTML：仅为多次调用加载图片

Question

我正在开发基于社交网络的Laravel应用程序。图像存储在S3存储桶中，其中定价基于GET / PUT / DELETE ....请求的数量。我希望以任何方式减少发送到S3存储桶的请求数量。

场景：想象一下facebook帖子和评论

在页面加载时，正在从S3存储桶中提取用户的个人资料图片。在帖子的评论部分中，用户评论了10次。我像往常一样编写代码

<img src="https://s3-ap-southeast-1.amazonaws.com/somebucket/32431435696950423.jpg">

每个评论都会向桶发送新请求？或者默认情况下，图像在第一个请求之后被缓存，并从缓存中拉出来用于其余部分？

如何避免单个图像的多个GET请求？

Answer 1

这取决于浏览器的实现和您的图片Cache-Control标头。大多数现代浏览器都支持缓存。如果允许您的图像被缓存，它们将缓存您的图像，反之亦然。查看When multiple instances of same images are embedded in an HTML, does that load the image once?问题。

可以将AWS S3配置为允许缓存对象（阅读how to add cache control in AWS S3）。

但是，如果您的网站流量很大，我建议您使用AWS CloudFront而不是纯S3。它是CDN（内容分发网络）。它比正常的S3更快，更便宜。

Answer 2

＆＃34;或者默认情况下，图像在第一个请求之后被缓存，并从缓存中拉出来用于其余部分？＆＃34;只有当图像具有相同的源和文件名时，它才是正确的答案。

所以来自一个URL的相同图像将被下载一次。