ampproject / ampproject/amp-toolbox-php

Transformer: Add blurred placeholders for images and video posters

Open
#15 0 comments 0 reactions 1 assignee Claimed by @schlessera View on GitHub
Optimizer P2 Performance
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.