Inline Images

Benefits

This optimization replaces references to small images by an inline data: URL, eliminating the need to initiate another connection to fetch the image data.

inline_images injects JavaScript that uses a beacon to report back to the server the images that are visible in the client's initial viewport (above the fold). It takes a few accesses of a page for the data to be reported back and processed but eventually the above-the-fold images will be known and will be inlined while all below-the-fold images will not be inlined; until then all small images will be inlined.

The use of beacons can be disabled using the CriticalImagesBeaconEnabled directive. If they are disabled, inline_images will not inject the JavaScript and will revert to inlining all images (subject to its usual restrictions).

Configuration

Enable pagespeed EnableFilters inline_images
Disable pagespeed DisableFilters inline_images

Risk Classification

Unclassified

Example

soon available