How to disable encoding of images as “data:image/png;base64…”?

Question

I Enable This Feature in my .htaccess file, to speed up the image load process and unable to figure it out how to disable it.

My .htaccess file is.

<IfModule pagespeed_module>
   ModPagespeed on
ModPagespeedEnableFilters combine_css
ModPagespeedEnableFilters inline_css
ModPagespeedEnableFilters inline_javascript
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters elide_attributes
ModPagespeedEnableFilters rewrite_javascript
ModPagespeedEnableFilters recompress_images
ModPagespeedEnableFilters inline_images
ModPagespeedEnableFilters remove_comments
ModPagespeedEnableFilters remove_quotes
ModPagespeedEnableFilters rewrite_css
ModPagespeedEnableFilters trim_urls
ModPagespeedEnableFilters move_css_to_head
<FilesMatch "\.(jpg|jpeg|gif|png|js|css)$">
        Header unset Etag
        Header set Cache-control "public, max-age=1814400"
</FilesMatch>

I have one more question: My page contains 150 small images of 3-8 kb including duplicates and all images are in my hosting directory.

When i fetch my page with google it shows the "data:image/png;base64...." and the encoded text takes almost 2600 characters space which causes to fetch partial content.

I want to know is it normal or should i disable this image encoding??

Answer 1

Based on your .htaccess config, you have inline_images enabled, which is why you're seeing the data URI's in your document. Two solutions:

1. disabled image inlining
2. lower the inlining KB threshold

The reason for inlining small images is that for small requests the HTTP and TCP overhead can be very high.