No WEBP for PNG & Animated GIF

398 views
Skip to first unread message

Saumya Majumder

unread,
Feb 25, 2016, 7:18:50 AM2/25/16
to ngx-pagespeed-discuss
Hi,
I've enabled convert _to_webp_losless and animated webp filter, but still when I load my pages, pagespeed only provides me the webp version for .jpeg images but for png, gif (both animated and non animated) I see filename1234pagespeed1234.png type file. No webp. Any idea why?

I'm using the latest pagespeed version on top of nginx.

Otto van der Schaaf

unread,
Feb 25, 2016, 7:24:18 AM2/25/16
to ngx-pagesp...@googlegroups.com
Does adding ?PageSpeedFilters=+debug provide any information? 
The debug filter may write comments in the html source about decisions it made while optimizing the image.
If that didn't clear things up, can you post a link to an image that you would have expected to be converted to webp?

Otto

--
You received this message because you are subscribed to the Google Groups "ngx-pagespeed-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ngx-pagespeed-di...@googlegroups.com.
Visit this group at https://groups.google.com/group/ngx-pagespeed-discuss.
For more options, visit https://groups.google.com/d/optout.

Saumya Majumder

unread,
Feb 25, 2016, 7:46:12 AM2/25/16
to ngx-pagespeed-discuss
I see this for one of the gif files:

<!--Image does not appear to need resizing.--><!--Image has no transparent pixels, is sensitive to compression noise, and has animation.--><!--The image was not inlined because it has too many bytes.-->

and these for some png files

<!--Image does not appear to need resizing.--><!--Image has no transparent pixels, is sensitive to compression noise, and has no animation.-->


On Thursday, February 25, 2016 at 5:54:18 PM UTC+5:30, Otto van der Schaaf wrote:
Does adding ?PageSpeedFilters=+debug provide any information? 
The debug filter may write comments in the html source about decisions it made while optimizing the image.
If that didn't clear things up, can you post a link to an image that you would have expected to be converted to webp?

Otto
On Thu, Feb 25, 2016 at 1:18 PM, Saumya Majumder <mai...@isaumya.com> wrote:
Hi,
I've enabled convert _to_webp_losless and animated webp filter, but still when I load my pages, pagespeed only provides me the webp version for .jpeg images but for png, gif (both animated and non animated) I see filename1234pagespeed1234.png type file. No webp. Any idea why?

I'm using the latest pagespeed version on top of nginx.

--
You received this message because you are subscribed to the Google Groups "ngx-pagespeed-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ngx-pagespeed-discuss+unsub...@googlegroups.com.

Huibao Lin

unread,
Feb 25, 2016, 9:09:00 AM2/25/16
to ngx-pagespeed-discuss
I was able to see images optimized to WebP format when I enabled one (and only one) filter, i.e., https://www.isaumya.com/?PageSpeed=on&PageSpeedFilters=convert_to_webp_lossless.

However, when I tried to enable multiple filters, e.g., https://www.isaumya.com/?PageSpeed=on&PageSpeedFilters=rewrite_css,rewrite_images, browser complained that "This webpage has a redirect loop". It seems that your server has some configuration issues.

Were the images which PageSpeed failed to convert loaded by JS?

Saumya Majumder

unread,
Feb 25, 2016, 10:08:08 AM2/25/16
to ngx-pagespeed-discuss
Yes, that can be possible. Because this is a wordpress site and I'm using the Retina plugin for wordpress which uses picturefill to load ratina images via JS.

Also do you want me to post my pagespeed config here so that take a look all the things that are activated on my server?

Saumya Majumder

unread,
Feb 25, 2016, 10:20:11 AM2/25/16
to ngx-pagespeed-discuss
Here is my pagespeed conf file if you need this anyhow.

pagespeed on;

#######################################################
# File cache settings 
######################################
# needs to exist and be writable by nginx

 pagespeed FileCacheSizeKb          102400;
 pagespeed FileCacheCleanIntervalMs 360000;
 pagespeed FileCacheInodeLimit      500000;
 pagespeed LRUCacheKbPerProcess     8192;
 pagespeed LRUCacheByteLimit        16384;

######################################################
# Mapping domain for HTTPS & Enabling HTTPS Fetch
######################################################

 pagespeed LoadFromFileMatch "^https?://www.isaumya.com/" "/home/nginx/domains/isaumya.com/public/";
pagespeed LoadFromFileRuleMatch disallow .*;
pagespeed LoadFromFileRuleMatch allow \.css$;
pagespeed LoadFromFileRuleMatch allow \.jpe?g$;
pagespeed LoadFromFileRuleMatch allow \.png$;
pagespeed LoadFromFileRuleMatch allow \.gif$;
pagespeed LoadFromFileRuleMatch allow \.js$;
 pagespeed Domain *.isaumya.com/*;

#######################################################
# By default, ngx_pagespeed adds an X-PageSpeed header with a value of the version of 
# ngx_pagespeed being used. This directive lets you specify the value to use instead:
# pagespeed XHeaderValue "ngx_pagespeed";
  
#######################################################
# let's speed up PageSpeed by storing it in the super duper fast memcached
# Ensure Memcached server installed http://centminmod.com/memcached.html
# default install for centmin mod is on port 11211, so localhost:11211 is correct
# uncomment - remove hash # in front of below 2 lines to enable
# timeout set at 100 milliseconds
#  pagespeed MemcachedThreads 1;
#  pagespeed MemcachedServers "localhost:11211";
#  pagespeed MemcachedTimeoutUs 100000;

#######################################################
######################################
# pagespeed UsePerVhostStatistics on;

#######################################################
## 1.7.30.1 beta defaults
######################################
pagespeed PreserveUrlRelativity on;
pagespeed MaxCombinedCssBytes -1;
pagespeed ImageResolutionLimitBytes 16777216;
# pagespeed EnableFilters inline_google_font_css;

#######################################################
## 1.6.29.3 beta defaults
######################################
pagespeed AvoidRenamingIntrospectiveJavascript on;
pagespeed ImageInlineMaxBytes 3072;
pagespeed CssImageInlineMaxBytes 0;
pagespeed MaxInlinedPreviewImagesIndex -1;
pagespeed MinImageSizeLowResolutionBytes 3072;

#######################################################
## ngx_pagespeed filters settings below ##
######################################

  # show half the users an optimized site, half the regular site
  # change UA-XXXXXXXXXX-1 to your GA unique id
  # uncomment - remove hash # in front of below 5 lines to enable
#  pagespeed RunExperiment on;
#  pagespeed AnalyticsID UA-XXXXXXXXXX-1;
#  pagespeed ExperimentVariable 1;
#  pagespeed ExperimentSpec "id=1;percent=50;level=CoreFilters;enabled=collapse_whitespace,remove_comments;";
#  pagespeed ExperimentSpec "id=2;percent=50";
 
  # Filter settings
  pagespeed RewriteLevel CoreFilters;
  pagespeed EnableFilters collapse_whitespace,remove_comments;

  # make_google_analytics_async
  pagespeed EnableFilters make_google_analytics_async;

  # make_show_ads_async
  pagespeed EnableFilters make_show_ads_async;

  # responsive_images, responsive_images_zoom
  pagespeed EnableFilters responsive_images;
  pagespeed EnableFilters responsive_images_zoom;

  # convert_to_webp_animated
  pagespeed EnableFilters convert_to_webp_animated;

  # inline_google_font_css
  pagespeed EnableFilters inline_google_font_css;
  # require FetchHttps if using https site
   pagespeed FetchHttps enable;

  # inline_css
#   pagespeed EnableFilters inline_css;
#   pagespeed CssInlineMaxBytes 2048;

  # prioritize_critical_css
 #  pagespeed EnableFilters prioritize_critical_css;

  # move_css_to_head
  pagespeed EnableFilters move_css_to_head;

  # move_css_above_scripts
  pagespeed EnableFilters move_css_above_scripts;

  # combine_css 
  pagespeed EnableFilters combine_css;

   # Uncomment this if you want to prevent mod_pagespeed from combining files
   # (e.g. CSS files) across paths
   #
#  pagespeed CombineAcrossPaths off;

  # combine_javascript
  pagespeed EnableFilters combine_javascript;
  pagespeed MaxCombinedJsBytes 122900;

  # extend_cache
  pagespeed EnableFilters extend_cache;

  # rewrite_css
  pagespeed EnableFilters rewrite_css;

  # rewrite_javascript
  pagespeed EnableFilters rewrite_javascript;

  # inline_preview_images
  pagespeed EnableFilters inline_preview_images;

  # lazyload_images
 # pagespeed EnableFilters lazyload_images;

  # rewrite_images
  pagespeed EnableFilters rewrite_images;
  pagespeed EnableFilters inline_images;
  pagespeed EnableFilters recompress_images;
  pagespeed EnableFilters jpeg_subsampling;
  pagespeed EnableFilters convert_png_to_jpeg;
  pagespeed EnableFilters resize_images;
  pagespeed EnableFilters convert_jpeg_to_webp;
  pagespeed EnableFilters convert_to_webp_lossless;
#   pagespeed EnableFilters insert_image_dimensions;
#   pagespeed DisableFilters rewrite_images;
#   pagespeed DisableFilters recompress_images;
#   pagespeed DisableFilters convert_png_to_jpeg;
#   pagespeed DisableFilters extend_cache_images;
#   pagespeed EnableFilters convert_png_to_jpeg;
#  pagespeed EnableFilters convert_jpeg_to_webp;
#  pagespeed EnableFilters convert_to_webp_lossless;

  # sprite_images
 pagespeed EnableFilters rewrite_css,sprite_images;

  # insert_dns_prefetch
  pagespeed EnableFilters insert_dns_prefetch;

  # InPlaceResourceOptimization
  # Enabled by default as of 1.9.32.1
  pagespeed InPlaceResourceOptimization off;

#######################################################



Huibao Lin

unread,
Feb 25, 2016, 10:20:53 AM2/25/16
to ngx-pagespeed-discuss
PageSpeed Conf file is very helpful for us to investigate. In the mean time, you can also check that your conf file has enabled these filters: "convert_jpeg_to_webp", "convert_to_webp_lossless" and "convert_to_webp_animated". As the name suggests, these filters convert images to WebP. Filters "convert_jpeg_to_webp" and "convert_to_webp_lossless"  are implied by filter "rewrite_images" so enabling the latter is also fine.

Saumya Majumder

unread,
Mar 8, 2016, 4:02:52 PM3/8/16
to ngx-pagespeed-discuss
Thanks a lot for your reply. What I've figured out is that pagespeed only convert gifs to webp if they arre relatively small. But for larger gifs, it compress the image and keep it as gif.

Thanks for all your helps.

Jeff Kaufman

unread,
Mar 8, 2016, 4:04:07 PM3/8/16
to ngx-pagesp...@googlegroups.com
It shouldn't be doing that; can you link us to an example large gif
that PageSpeed is unwilling to convert to webp?
> --
> You received this message because you are subscribed to the Google Groups
> "ngx-pagespeed-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to ngx-pagespeed-di...@googlegroups.com.

Saumya Majumder

unread,
Mar 8, 2016, 4:13:39 PM3/8/16
to ngx-pagespeed-discuss
Ofcourse I can if you check this article of mine for instance: https://www.isaumya.com/get-must-useful-features-gmail-inbox-mixmax/

Here are some gifs that are getting compressed by pagespeed but still staying at gif format:

and

But, here are a few animated gifs from that same page which has been changed to webp.


So, I truly don't find any other pattern in this phenomenon beside the file size idea.

Also there are a few wired things too. Like for instance the logo at top is an png file which pagespeed has converted to webp as I have lossless conversion enable. But PNG images like these:


Getting compressed by pagespeed by remaining in png.







Jeff Kaufman

unread,
Mar 8, 2016, 4:18:09 PM3/8/16
to ngx-pagesp...@googlegroups.com, Huibao Lin
Here are the +debug comments PageSpeed gave for the first example gif:

<p><!--ResponsiveImageFilter: Any debug messages after this refer to
the virtual 1.5x image with
src=https://www.isaumya.com/wp-content/uploads/2016/03/slash-command-2.gif.pagespeed.ce.Dw0_cA8WER.gif
width=1800 height=1512--><!--Image does not appear to need
resizing.--><!--Image has no transparent pixels, is sensitive to
compression noise, and has animation.--><!--ResponsiveImageFilter: Any
debug messages after this refer to the virtual 2x image with
src=https://www.isaumya.com/wp-content/uploads/2016/03/slash-command-2.gif.pagespeed.ce.Dw0_cA8WER.gif
width=2400 height=2016--><!--Image does not appear to need
resizing.--><!--Image has no transparent pixels, is sensitive to
compression noise, and has animation.--><!--ResponsiveImageFilter: Any
debug messages after this refer to the virtual 3x image with
src=https://www.isaumya.com/wp-content/uploads/2016/03/slash-command-2.gif.pagespeed.ce.Dw0_cA8WER.gif
width=3600 height=3024--><!--Image does not appear to need
resizing.--><!--Image has no transparent pixels, is sensitive to
compression noise, and has animation.--><!--ResponsiveImageFilter: Any
debug messages after this refer to the virtual inlinable 3x image with
src=https://www.isaumya.com/wp-content/uploads/2016/03/slash-command-2.gif.pagespeed.ce.Dw0_cA8WER.gif
width=3600 height=3024--><!--Image does not appear to need
resizing.--><!--Image has no transparent pixels, is sensitive to
compression noise, and has animation.--><!--The image was not inlined
because you have chosen to only inline the critical images but this
image is not critical.--><!--ResponsiveImageFilter: Any debug messages
after this refer to the virtual full-sized image with
src=https://www.isaumya.com/wp-content/uploads/2016/03/slash-command-2.gif.pagespeed.ce.Dw0_cA8WER.gif
width=1200 height=1008--><!--Image does not appear to need
resizing.--><!--Image has no transparent pixels, is sensitive to
compression noise, and has animation.--><img class="alignnone
size-full wp-image-6703"
src="https://www.isaumya.com/wp-content/uploads/2016/03/slash-command-2.gif.pagespeed.ce.Dw0_cA8WER.gif"
alt="slash-command-2" width="1200"
height="1008"/><!--ResponsiveImageFilter: Not adding 1x candidate to
srcset because it is the same as previous
candidate.--><!--ResponsiveImageFilter: Not adding 3x candidate to
srcset because it is the same as previous
candidate.--><!--ResponsiveImageFilter: Not adding 2x candidate to
srcset because it is the same as previous
candidate.--><!--ResponsiveImageFilter: Not adding 1.5x candidate to
srcset because it is the same as previous candidate.--><!--Image does
not appear to need resizing.--><!--Image has no transparent pixels, is
sensitive to compression noise, and has animation.--></p>

Huibao: I don't see anything in there clarifying why we wouldn't be
making an animated webp? Is it the "sensitive to compression noise"
or something else?

Saumya Majumder

unread,
Mar 8, 2016, 4:23:11 PM3/8/16
to ngx-pagespeed-discuss
So, will you recommend me to disable the responsive image filter? Do you think there are any filters which are enabled on my site which I should disbale - and it will eventually make my site to load faster?

Huibao Lin

unread,
Mar 8, 2016, 5:42:52 PM3/8/16
to ngx-pagesp...@googlegroups.com
Hi Saumya,

The animated GIFs were not converted to WebP because they fit GIF format better. These images have constant background with only a portion changing from frame to frame. GIF allows to only compress a portion of the frames and the software which generated these images did take advantage of that. For example, the second frame of slash-command-2.gif only encodes the region of 650x586 pixels, while the first frame has 1200x1008 pixels.

On the other hand, WebP always encodes the entire frame, i.e., 1200x1008 pixels in this case. Thus, when this image was converted to WebP, the file expands. Therefore PageSpeed uses the original one. 

You may wonder that WebP might use motion compensation so the constant background would be encoded with only a few bytes, however, WebP decided (by design) to encode each frame indecently to avoid implementation complexity.

Here is what I got from "error_log":

Recompressing image `http://localhost:8080/mod_pagespeed_example/images/slash-command-2.gif' (543979 -> 750666 bytes) doesn't save space; dropped.

Recompressing image `http://localhost:8080/mod_pagespeed_example/images/mixmax-template.gif' (255659 -> 649690 bytes) doesn't save space; dropped.

Recompressing image `http://localhost:8080/mod_pagespeed_example/images/mixmax-send-later-2.gif' (158102 -> 433988 bytes) doesn't save space; dropped.

For the 2 PNGs which you mentioned, I did see one of them failed to be improved by WebP nor by the recompression in PNG so the original was served. Here is the log:

Recompressing image `http://localhost:8080/mod_pagespeed_example/images/studiopress-themes-2.png' (1792 -> 1886 bytes) doesn't save space; dropped.
Recompressing image `http://localhost:8080/mod_pagespeed_example/images/studiopress-themes-2.png' (1792 -> 1994 bytes) doesn't save space; dropped.

For the other PNG image, however, I was able to see it converted to WebP: https://www.isaumya.com/wp-content/uploads/2016/03/xpolls-qa-04-1024x991.png.pagespeed.ic.AZjqRiPujJ.webp

Huibao


On Tue, Mar 8, 2016 at 4:23 PM, Saumya Majumder <mai...@isaumya.com> wrote:
So, will you recommend me to disable the responsive image filter? Do you think there are any filters which are enabled on my site which I should disbale - and it will eventually make my site to load faster?

--

Saumya Majumder

unread,
Mar 9, 2016, 4:59:51 AM3/9/16
to ngx-pagespeed-discuss
Thank you very much form the in-depth explanation. It is really helpful.

Thanks again.
Reply all
Reply to author
Forward
0 new messages