网站上的图片答案

【问题标题】：Images on websites网站上的图片
【发布时间】：2011-04-28 00:40:03
【问题描述】：

我需要一些关于某些图像策略的利弊的建议。在创建图片非常重的网站时，重要的是所有图片都是最好的质量，对性能的影响最小。让我们以一个模仿产品评论的页面为例。您可能有一个正常大小的产品照片和多个不同大小的缩略图。

解决此问题的两种技术可能是，使用产品照片并通过复制原始图像创建所有必要的缩略图，然后将其调整大小或裁剪为所有所需的大小，或者一种可以通过调整大小“按需”创建这些不同大小的缩略图他们在必要时向客户发送“临时”图像。

有没有人对如何实现这一点有任何其他经验，或者上述方法的优缺点？

谢谢，

【问题讨论】：

【解决方案1】：

我同意 Andy 和 Petah（数据 URI 除外，因为它不能被缓存或被广泛支持）。

不过要更进一步。我更喜欢按需调整大小。这可能是资源密集型的，但通过适当的缓存，这是保持原始高质量图像和动态交付设计所需的所有图像大小的最佳平衡。

你注意到PHP，我用过SLIR Library。

【讨论】：

所有主流浏览器都支持数据 URI，包括 Gecko (Firefox)、Konqueror、Opera、Safari、Chrome、IE 8+，并且 IE 5.5+ 支持 MHTML 数据 URI。它们也是可缓存的，因为它们是用 CSS 编写的，你是说你不能缓存 CSS？此外，“按需调整大小”和“缓存”几乎相互矛盾。
@Petah - 可以在外部样式表的 CSS 中缓存。所以你的计划是为一个图像重的网站的所有小图像输出数据URI？祝你好运！至于支持 - IE7 呢？最后，在您对调整大小和缓存做出假设之前，请查看 SLIR 库。
@Jason，IE 7 支持 MHTML。
@Petah，我收集到了。所以我不仅要为我的所有小图像编写数据 URI，而且现在如果我想支持 IE7，我必须有条件地添加 MHTML？听起来工作量很大，而且没有任何好处。数据 URI 很好，但鉴于 OP 规范，我不会使用或建议使用它们。

【解决方案2】：

存储通常比带宽和处理更便宜，因此在大多数情况下 - 尤其是当您只谈论一组相当有限的缩略图时 - 最好预先进行处理。这还具有使缓存策略更容易的优势。

【讨论】：

【解决方案3】：

按需调整大小和裁剪是非常耗费资源的。你应该做一次然后缓存它。

对于图像较多的网站，所有图像都应进行 jpeg 编码并压缩，直到您可以开始在图像中看到压缩伪影。

如果您有很多小图像，或者每次请求都会加载图像，请考虑使用数据 URI 将它们放入您的 CSS：http://en.wikipedia.org/wiki/Data_URI_scheme

【讨论】：