Image spriting with mod_pagespeed

问题

I've installed Google mod_pagespeed on Apache 2.2 and everything seems to be working except for the fact the image spriting is not working.

I've set the LogLevel to debug and the only message I'm getting is:

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

No further messages related to spriting show up in the logs.

I can also confirm the Image Spriting is switched on:

/mod_pagespeed_statistics?config

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

回答1:

The image spiriting filter has a lot of limitations, probably your site is hitting one or more of these issues.

From Sprite Images documentation:

Limitations

The Sprite Images filter is still experimental, and currently has a number of limitations:

Only PNG amd GIF images are supported; JPG will come in a future release.

Only CSS backgrounds are supported; <img> tags will come in a future release.

A background image can't be safely sprited if the HTML element is larger than the background image (since this would allow the combined image's extra pixels to show around the edges). Accordingly, the CSS must have explicit width and height in the same declaration as the background URL, and the width and height must be smaller than or equal to those of the image.

The CSS must not include any background-position declarations without background-url declarations. Such a naked background-position declaration could apply to any background-image, and since we don't know which one, it isn't safe to do any spriting.

The Sprite Images filter currently arranges images in a vertical strip, which might not be the most efficient arrangement. More advanced layouts will come in a future release.

回答2:

I, actually, DONT recommend to use spriting images if you use pagespeed module, because, if you do so, you will prevent it from inlining small logos etc. What you actually can do is play with

ModPagespeedImageInlineMaxBytes

and you will get better results with that!

Here is a research, proving this: Hyperlinks Media Research Center

回答3:

This example CSS declaration seems to work:

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

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

You could do the same with an img instead of an anchor.

来源：https://stackoverflow.com/questions/22305351/image-spriting-with-mod-pagespeed

标签

apache

css-sprites

pagespeed