Transformer: Add blurred placeholders for images and video posters

[schlessera]

Feature description

Add a new transformer BlurredPlaceholders that adds blurred placeholders into the HTML markup for images and video posters.

These placeholders are very lightweight inline representations of the images that are available as soon as the HTML was loaded and shown while the actual full-size images are being transferred.

Related ampproject/amp-wp#4213

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• All images and video posters have a lightweight inline placeholder representation directly in the HTML markup
• The inline placeholder is swapped out for the full-size image as soon as that has been fully transferred

Implementation brief

• See https://github.com/ampproject/amp-toolbox/blob/master/packages/optimizer/lib/transformers/AddBlurryImagePlaceholders.js

QA testing instructions

1. Verify: AMP optimization is enabled
2. Go to the AMP version of a page with many images below the fold
3. While scrolling new images into view which are being lazy-loaded, there will be an immediate display of a blurred version of the image until the full-size version was fully transferred and swapped in

Demo

Changelog entry