Skip to content

PreloadHeroImage should use imagesrcset attribute not srcset #823

Closed
#828
Closed
PreloadHeroImage should use imagesrcset attribute not srcset#823
#828
@westonruter

Description

@westonruter
westonruter
opened on Jun 5, 2020

I just noticed that the PreloadHeroImage transformer is adding a preload link with a srcset attribute when it should rather be adding imagesrcset per https://web.dev/preload-responsive-images/

amp-toolbox/packages/optimizer/lib/transformers/PreloadHeroImage.js

Lines 62 to 81 in 4b59cdc

const preload = createElement('link', {
'rel': 'preload',
'href': heroImage.src,
'as': 'image',
'data-hero': '',
});
if (heroImage.media) {
preload.attribs.media = heroImage.media;
}
if (heroImage.srcset) {
try {
parseSrcSet(heroImage.srcset);
preload.attribs.srcset = heroImage.srcset;
} catch (err) {
this.log.warn(
`Invalid srcset '${heroImage.srcset}' for amp-img src '${heroImage.src}'`,
err.message
);
}
}

Also, should not an imagesizes attribute be added to the link if the img has sizes attribute?

Lastly, it seems that the Validator hasn't been updated to allow srcset (or imagesrcset) or sizes (or imagesizes) on the link element:

https://github.com/ampproject/amphtml/blob/1b84e3c0d9899d826c32bdccd99597409ccf0e1d/validator/validator-main.protoascii#L287-L304

Doesn't the transformer currently thus create invalid AMP?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions