ampproject / ampproject/amp-toolbox-php
Transformer: Add blurred placeholders for images and video posters
- Dominant language
- PHP
- Stars
- 74
- Forks
- 25
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 3
Description
## 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
*
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.