Apache 具有mod_pagespeed的图像精灵

我已经在Apache2.2上安装了Google mod_pagespeed，除了图像精灵不工作之外，其他一切似乎都正常

我已将LogLevel设置为debug，我得到的唯一消息是：

[Mon Mar 10 17:51:58 2014] [info] [mod_pagespeed 1.6.29.7-3566 @26487] Attempting to sprite css background.

日志中没有显示更多与精灵相关的消息

我还可以确认图像精灵已打开：

/mod_pagespeed_统计信息？配置

Configuration:
Version: 13: on

Filters
ah  Add Head
cw  Collapse Whitespace
cc  Combine Css
jc  Combine Javascript
gp  Convert Gif to Png
jp  Convert Jpeg to Progressive
mc  Convert Meta Tags
pj  Convert Png to Jpeg
dj  Defer Javascript
ec  Cache Extend Css
ei  Cache Extend Images
es  Cache Extend Scripts
fc  Fallback Rewrite Css 
if  Flatten CSS Imports
hw  Flushes html
ci  Inline Css
ii  Inline Images
il  Inline @import to Link
ji  Inline Javascript
js  Jpeg Subsampling
ll  Lazyload Images
tu  Left Trim Urls
pr  Prioritize Critical Css
rj  Recompress Jpeg
rp  Recompress Png
rw  Recompress Webp
rc  Remove Comments
ri  Resize Images
cf  Rewrite Css
jm  Rewrite Javascript
cu  Rewrite Style Attributes With Url
is  Sprite Images
cp  Strip Image Color Profiles
md  Strip Image Meta Data

---

图像精神过滤器有很多限制，可能你的网站遇到了一个或多个这样的问题

发件人：

限制

精灵图像过滤器仍处于实验阶段，目前已完成 一些限制：

• 仅支持PNG和GIF图像；JPG将在未来发布
• 仅支持CSS背景<代码>标签将在未来的版本中提供
• 如果HTML元素大于背景图像，则无法安全地对背景图像进行sprit（因为这将允许组合 图像边缘周围显示的额外像素）。因此，CSS 必须在与 背景URL，并且宽度和高度必须小于或等于 对那些形象
• CSS必须不包含任何没有背景url声明的背景位置声明。如此赤裸裸 背景位置声明可以应用于任何背景图像， 而且因为我们不知道是哪一个，所以任何喷洒都是不安全的
• “精灵图像”过滤器当前以垂直条带排列图像，这可能不是最有效的排列方式。更多 高级布局将在未来发布

---

图像精神过滤器有很多限制，可能你的网站遇到了一个或多个这样的问题

发件人：

限制

精灵图像过滤器仍处于实验阶段，目前已完成 一些限制：

• 仅支持PNG和GIF图像；JPG将在未来发布
• 仅支持CSS背景<代码>标签将在未来的版本中提供
• 如果HTML元素大于背景图像，则无法安全地对背景图像进行sprit（因为这将允许组合 图像边缘周围显示的额外像素）。因此，CSS 必须在与 背景URL，并且宽度和高度必须小于或等于 对那些形象
• CSS必须不包含任何没有背景url声明的背景位置声明。如此赤裸裸 背景位置声明可以应用于任何背景图像， 而且因为我们不知道是哪一个，所以任何喷洒都是不安全的
• “精灵图像”过滤器当前以垂直条带排列图像，这可能不是最有效的排列方式。更多 高级布局将在未来发布

---

此CSS声明示例似乎有效：

a.icon:before {
   background: transparent url('/img/icons/link.png') no-repeat 0 0;
   height: 16px;
   width: 16px;

   /* Optional? */
   display: block;
   content: ' ';
}

---

您可以使用img而不是锚定来执行相同的操作。

此示例CSS声明似乎有效：

a.icon:before {
   background: transparent url('/img/icons/link.png') no-repeat 0 0;
   height: 16px;
   width: 16px;

   /* Optional? */
   display: block;
   content: ' ';
}

---

你可以用img而不是锚来做同样的事情。

事实上，如果你使用pagespeed模块，我不建议你使用spriting图像，因为如果你这样做，你会阻止它内联小徽标等。你真正能做的就是玩它

ModPagespeedImageInlineMaxBytes

你会得到更好的结果

以下是一项研究，证明了这一点：

---

事实上，如果您使用pagespeed模块，我不建议您使用spriting图像，因为如果您这样做，您将阻止它内联小徽标等。您实际上可以做的是玩游戏

ModPagespeedImageInlineMaxBytes

你会得到更好的结果

以下是一项研究，证明了这一点：

---

mod_pagespeed中的图像喷洒模块非常挑剔。你看过图像精灵过滤器文档的详细说明了吗？mod_pagespeed中的图像精灵模块非常挑剔。你看过图像精灵过滤器的文档吗？谢谢你的帖子。我从源代码中注意到你是PageSpeed的软件工程师之一。这一限制似乎是主要原因：因此，CSS必须在与背景URL相同的声明中具有明确的宽度和高度。我说级联样式是否具有正确的宽度和高度无关紧要，它必须与背景或背景图像声明处于完全相同的CSS声明中，对吗？有没有办法打开更多日志记录以获得确切原因？你知道过滤器什么时候会退出实验阶段吗？这个过滤器最近不是很重要。我认为我们发现速度节省并没有我们希望的那么高，并且摆脱这些限制比我们预期的要困难。但是你的建议很好，我刚刚添加了一个功能请求：非常感谢，这将非常有帮助。谢谢你的帖子。我从源代码中注意到你是PageSpeed的软件工程师之一。这一限制似乎是主要原因：因此，CSS必须在与背景URL相同的声明中具有明确的宽度和高度。我说级联样式是否具有正确的宽度和高度无关紧要，它必须与背景或背景图像声明处于完全相同的CSS声明中，对吗？有没有办法打开更多日志记录以获得确切原因？你知道过滤器什么时候会退出实验阶段吗？这个过滤器最近不是很重要。我想我们发现节省的速度是n