Deduplicate Inlined Images

Configuration

The 'Deduplicate Inlined Images' filter is enabled by specifying:

Apache:

ModPagespeedEnableFilters dedup_inlined_images

Nginx:

pagespeed EnableFilters dedup_inlined_images;

in the configuration file.

Objective

Reduce the transfer size of HTML files by eliminating redundant image data URLs.

PageSpeed Rule

This rewriter implements the PageSpeed rule for optimizing images.

Description

dedup_inlined_images replaces repeated inlined images with JavaScript that loads the image from the first occurence of the image. If the first image doesn't have an id, one is generated and added to it.

Operation

dedup_inlined_images rewrites inlined images:

• If the image's data URL has not appeared earlier in the page then, if it doesn't already have one an id attribute is generated and added to the tag, then the existing/added id is recorded along with the data URL for comparison with subsequent inlined images.
• Otherwise, the <img> tag is replaced with an inline <script> tag that replaces itself with an <img> tag, loading the data URL from the preceding <img> tag with the id matching this tag's data URL.

Example

The effect of this filter can be observed on modpagespeed.com before and after rewriting.

Requirements

The inline_images filter should be enabled for this filter to have any effect although it will apply to inlined images in the original HTML.

Risks

dedup_inlined_images is considered low risk. It is possible for the resulting HTML to be larger than the original due to the size of the injected JavaScript but this is expected to be rare and not a large increase.