Спрайтинг изображений с помощью mod_pagespeed

Я установил Google mod_pagespeed на Apache 2.2, и все, кажется, работает, за исключением того, что спрайт изображений не работает.

Я установил LogLevel для отладки, и единственное сообщение, которое я получаю:

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

Никаких дальнейших сообщений, касающихся спрайтов, в журналах не появляется.

Я также могу подтвердить, что 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
Источник

3 ответа

Решение

Фильтр спиритов изображений имеет множество ограничений, возможно, ваш сайт сталкивается с одной или несколькими из этих проблем.

Из документации Sprite Images:

Ограничения

Фильтр Sprite Images все еще является экспериментальным и в настоящее время имеет ряд ограничений:

  • Поддерживаются только изображения PNG и GIF; JPG выйдет в будущем выпуске.
  • Поддерживаются только CSS-фоны; <img> теги появятся в будущем выпуске.
  • Фоновое изображение не может быть безопасно выделено, если элемент HTML больше фонового изображения (так как это позволит дополнительным пикселям объединенного изображения показываться по краям). Соответственно, CSS должен иметь явную ширину и высоту в том же объявлении, что и фоновый URL, а ширина и высота должны быть меньше или равны таковым на изображении.
  • CSS не должен включать никаких объявлений background-position без объявлений background-url. Такое обнаженное объявление background-position может применяться к любому background-image, и поскольку мы не знаем, какое из них, спрайты не безопасно.
  • Фильтр Sprite Images в настоящее время размещает изображения в вертикальную полосу, что может быть не самым эффективным способом. Более продвинутые макеты появятся в будущем выпуске.
Источник

Я, на самом деле, не рекомендую использовать спрайт-изображения, если вы используете модуль PageSeded, потому что, если вы сделаете это, вы не сможете встроить небольшие логотипы и т. Д. Что вы можете сделать, так это поиграть с

ModPagespeedImageInlineMaxBytes

и вы получите лучшие результаты с этим!

Вот исследование, доказывающее это: Hyperlinks Media Research Center

Источник

Этот пример объявления CSS, кажется, работает:

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

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

Вы можете сделать то же самое с img вместо якоря.

Источник
Другие вопросы по тегам