Inline Preview Images
The 'Inline Preview Images' filter is enabled by specifying:
pagespeed EnableFilters inline_preview_images;
in the configuration file.The 'Resize Mobile Images' filter is enabled by specifying:
pagespeed EnableFilters resize_mobile_images;
The 'Inline Preview Images' filter generates low quality versions of the
images that are inlined in the HTML page. Users experience faster rendering of
the page and the low quality images are replaced by high quality versions after
an onload event is triggered. The filter works on images found in
The 'Resize Mobile Images' filter works like Inline Preview Images, but is applied only for mobile browsers, and shrinks the size in pixels of the placeholder images on mobile devices to better fit the device screen size. If Inline Preview Images is activated and Resize Mobile Images is not, full-resolution preview images will be served to both desktop and mobile browsers.
resize_mobile_images should be used together
insert_image_dimensions to avoid reflow as the images load.
OperationThe 'Inline Preview Images' filter changes the
data-pagespeed-high-res-srcbased on a few parameters which are described in next section. It generates low quality versions of the images and replaces the
srcattribute with these. The low quality images are replaced by high quality versions after an onload event is triggered.
Parameters that affect optimization
pagespeed MaxInlinedPreviewImagesIndex IndexNumber;
IndexNumber images on the page are replaced by low
quality images. Negative numbers will result in
all images being rewritten. Zero means no image will be
rewritten. The default value of this parameter is -1. Refer to the Risks section
for trade offs on setting this value.
pagespeed MinImageSizeLowResolutionBytes MinBytes;
MinBytes, a positive integer, is the minimum size in bytes of
any image for which a low quality image is generated. No images will be
rewritten for zero and negative values.
This filter is considered moderately risky. The main risk is that the HTML
becomes bloated due to the embedded low quality image data.
MaxInlinedPreviewImagesIndex should be chosen appropriately;
otherwise, if images below the fold are inlined, there is no user perceivable
gain, but the page takes longer to load due to the extra bytes in the HTML.
MinImageSizeLowResolutionBytes should not be used to disable
inlining of preview images (for example by setting either parameter to
0). Instead, the
resize_mobile_images filters themselves should be disabled.