Question

我已经在Apache 2.2上安装了Google mod_pagespeed，除了图片spriting无效之外，一切似乎都在工作。

我已将LogLevel设置为debug并且我收到的唯一消息是：

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

日志中不再显示与spriting相关的消息。

我还可以确认Image Spriting已打开：

/ mod_pagespeed_statistics？配置

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

Answer 1

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

来自Sprite Images documentation：

<强>限制

Sprite Images 过滤器仍然是实验性的，目前已经过   一些限制：


仅支持PNG和GIF图片; JPG将在未来发布。

仅支持CSS背景; <img>标记将在未来版本中出现。

如果HTML元素大于背景图像，则无法安全地显示背景图像（因为这样可以合并   图像的额外像素显示在边缘周围）。因此，CSS   必须在与声明相同的声明中具有显式宽度和高度   背景URL，宽度和高度必须小于或等于   对于那些形象。

CSS必须不包含任何没有background-url声明的背景位置声明。这样的裸体   背景位置声明可以应用于任何背景图像，   因为我们不知道哪一个，所以做任何精灵都是不安全的。

Sprite Images过滤器当前将图像排列在垂直条带中，这可能不是最有效的排列。更多   高级布局将在未来版本中出现。

Answer 2

我实际上，不要建议使用精简图像，如果你使用pagespeed模块，因为如果这样做，你将阻止它内联小徽标等。你实际上可以做的是玩与

ModPagespeedImageInlineMaxBytes

你会得到更好的结果！

这是一项研究，证明了这一点： Hyperlinks Media Research Center

Answer 3

此示例CSS声明似乎有效：

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

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

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

使用mod_pagespeed进行图像spriting

3 个答案: