Skip to content

Guide users to not use heavy assets when creating stories #2332

@westonruter

Description

@westonruter

The AMP Stories editor currently relies on users to only use pre-optimized assets (images and videos). This is not user-friendly. We should try to do this for them or else warn when we can't.

Images

Currently the images that are added to a story can be much larger than necessary. For example, when selecting this image for background media:

image

This image is used as-is in the editor. This is a violation of the oversized-images Feature Policy. It's true that the AMP Cache should resize the image down, but this doesn't help when viewing the image on origin. Instead of being 3024x4032 and 2MB, it should rather be 1080x1440 and ~301kB (with WordPress's default 82% JPEG compression quality).

One caveat here is that we need to eventually support landscape stories, so there will always be wasted bytes when selecting a landscape image and the focal point picker is used for selecting the right “crop” in portrait. At the very least, if the image gets a height of 1440 as opposed to 3024 then this will still be an improvement.

So I suggest we add_image_size() for amp_story_page, with an unbounded width and a constrained height without cropping:

add_image_size( 'amp_story_page', 99999, 1440, false );

Then when an image is picked from the media library, we should use this image size as opposed to the full size.

This should also apply when automatically supplying a video's featured image as its poster, or when selecting an image as the poster generally.

Videos

Update: This has been continued in #2560.

Uploading videos taken from one's phone to the media library is a much bigger challenge, as WordPress has no native transcoding ability for videos. A 2-second video extracted from a Motion Photo taken on a Pixel 3 is 7MB:

image

The issue would be much worse if this wasn't just extracted from a Motion Photo. Imagine someone trying to use a 4K video at 60fps.

The ideal here I think would be to allow users to embed control-less YouTube videos in stories, but this is not yet allowed. See ampproject/amphtml#15847. YouTube is not going to be good to rely on, per amphtml Slack conversation with @newmuis:

image

☝️ Edit: YouTube videos are rarely portrait.

So perhaps we should add a warning to users when a video seems to be too large. I'm not sure what “too large” is, but perhaps we should target 1 megabyte per second? So we'd show no warning if there is a 7-second video that is 7MB.

The dog video in the Hello World example is 2MB for 3 seconds:

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions