apache / incubator-pagespeed-ngx

Automatic PageSpeed optimization module for Nginx
http://ngxpagespeed.com/
Apache License 2.0
4.36k stars 364 forks source link

rewrite_css for images doesn't work under media queries #969

Open VarunBatraIT opened 9 years ago

VarunBatraIT commented 9 years ago

Pagespeed Configuration

        pagespeed EnableFilters rewrite_images;
        pagespeed EnableFilters recompress_images;
        pagespeed ImageRecompressionQuality 80;
        pagespeed EnableFilters rewrite_css;
        pagespeed EnableFilters sprite_images;
        pagespeed EnableFilters rewrite_style_attributes;

Original CSS

.parallax-bg-4
{
  background-image: url(http://www.stumento.com/assets/parallax/mobile/writing-c4ed5b0467ca93a2a02d6141c6f9ed3c.jpg);
}
@media screen and (min-width: 768px)
{
  .parallax-bg-2
  {
    background-image: url(http://www.stumento.com/assets/parallax/mobile/writing-c4ed5b0467ca93a2a02d6141c6f9ed3c.jpg);
  }
}

Current Output

Rewrite didn't happen for .parallax-bg-2

.parallax-bg-4
{
  background-image: url(http://www.stumento.com/assets/parallax/mobile/xwriting-c4ed5b0467ca93a2a02d6141c6f9ed3c.jpg.pagespeed.ic.4zTzy_hob0.jpg);
}
@media screen and (min-width: 768px)
{
  .parallax-bg-2
  {
    background-image: url(http://www.stumento.com/assets/parallax/mobile/writing-c4ed5b0467ca93a2a02d6141c6f9ed3c.jpg);
  }
}

Expected Output

Both of above files are same. Thus one should expect

.parallax-bg-4
{
  background-image: url(http://www.stumento.com/assets/parallax/mobile/xwriting-c4ed5b0467ca93a2a02d6141c6f9ed3c.jpg.pagespeed.ic.4zTzy_hob0.jpg);
}
@media screen and (min-width: 768px)
{
  .parallax-bg-2
  {
    background-image: url(http://www.stumento.com/assets/parallax/mobile/xwriting-c4ed5b0467ca93a2a02d6141c6f9ed3c.jpg.pagespeed.ic.4zTzy_hob0.jpg);
  }
}

Other Details

  1. nginx version: nginx/1.8.0
  2. X-Page-Speed:1.9.32.3-4448
  3. Reference link https://developers.google.com/speed/pagespeed/module/filter-css-rewrite
  4. Website URL http://StuMento.com/
  5. Ubuntu 15.04 (GNU/Linux 3.19.1-x86_64-linode53 x86_64)
VarunBatraIT commented 9 years ago

For the time being I have disabled the compression of images and I am relying on available opensource libraries to compress. I did this because of multiple urls for same image (virtually same one compressed and other uncompressed)

jeffkaufman commented 9 years ago

Could you try enabling fallback_rewrite_css_urls? https://developers.google.com/speed/pagespeed/module/filter-css-rewrite

Sometimes PageSpeed has trouble parsing complex media queries, but in these cases we can still identify url(...) if fallback_rewrite_css_urls is on.

VarunBatraIT commented 9 years ago

Hey Jef Thanks for your response. I did what you suggested, it is still not working. I will keep this filter enable until you see or till your next comment. File is application.css You can search for 'writing' Two of them are included one under media query other otherwise.