以编程方式在PHP中组合图像

时间:2008-12-17 16:30:18

标签: php css optimization image

我是雅虎recommendations加速网站的忠实粉丝。其中一个建议是在可能的情况下组合图像以减小大小和请求数量。但是,我注意到虽然可以很容易地将CSS精灵用于布局,但其他图像使用并不容易组合。我想到的主要示例是博客或文章列表,其中每个博客或文章也有与之关联的图像。这些图像会极大地影响加载时间和页面大小,尤其是在未进行优化的情况下。在概念或实践中,我正在寻找的是一种动态组合这些图像的方法,同时使用PHP通过无损压缩来运行它们。

一些额外的想法或担忧:

  • 合并图像并生成 一个动态的CSS样式表来定位 图像的背景可能 是一种方法去做,但我 也担心可访问性和 语义。据我所理解, CSS图像应该用于布局 元素和img标签(与 应该使用alt属性) 想传达的图像 信息。我可以设置图像 作为div元素的背景和 替换标题属性 alt属性,但我不确定 可访问性和语义 这样做的含义。
  • GD库可能会很好 这样的候选人? 你能推荐其他选择吗?

2 个答案:

答案 0 :(得分:7)

如果我是你,我不会走这条路。当然,你可以通过减少请求的数量来节省协议开销中的几个字节,但这可能会更容易弄巧成拙。

想象一下这种情况: 一个博客网站,其首页一次有10篇文章。每篇文章都有自己与之相关的图像。要保存一个或两个传输时间,可以编程方式创建所有10个文章图像的合成图像。你现在有两个问题之一。

  1. 每次发布​​新帖时,您都必须更新合成图像,因为最近的10张图片将包含一组经过修改的内容。
  2. 您决定动态创建每个请求的新合成。
  3. 显然,#1在这里是优选的,并且不难实现。但是,如果用户搜索标记有“SQL”一词的所有帖子,该怎么办?您不太可能拥有已为此简单查询创建的前10个结果的合成图像,更不用说更复杂的图像了。此外,如果您想更新或删除图像会发生什么?您必须再次触发复合材料的背景创建。

    像Google阅读器这样的RSS聚合器怎么样?它没有必要的逻辑来确定它需要显示的合成图像的哪个部分,并且可能显示完整的图像。 (我提到谷歌阅读器,因为我很少直接访问博客网站,倾向于信任像RSS阅读的RSS聚合服务)

    如果是我,我会单独留下单张照片。凭借现代化的连接速度,额外的带宽开销和服务器上的处理时间之间的权衡不太可能赢得您的好处。

    话虽如此,如果你决定沿着这条路走下去,我会说GD库是一个很好的起点。

答案 1 :(得分:1)

你几乎肯定会更好地减少文章中图像的文件大小,而不是将它们组合起来。我同意您建议的方法可能存在可访问性问题。另外,我认为这取决于你所说的“动态” - 如果你正在考虑将这些图像组合起来并为每个页面加载生成CSS,你可能会发现这会导致平均连接速度较慢的用户的页面加载时间变慢

至于你的第二点,GD当然可以解决这个问题。更好地使用GD来减少页面加载时间可能会降低文章图像的图像质量,从而减少文件大小,在文章创建时,而不是在页面加载时。