Deduplicate Inlined Images

PageSpeed Service was turned off on August 3rd, 2015. Please see Turndown Information for PageSpeed Service.

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

Deduplicate 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

Deduplicate 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 rewriter can be observed on pssdemos.com before and after rewriting.

Risks

Deduplicate 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.