wp-asset-manager
wp-asset-manager copied to clipboard
Add support for preloading responsive images
Description
<link rel="preload">
now supports responsive image resource hints.
https://web.dev/preload-responsive-images/
We should add support for declaring imagesrcset
and imagesizes
attributes when preloading responsive images.
Example based on the article's example:
am_preload(
[
'handle' => 'preload-wolf',
'src' => 'wolf.jpg',
'version' => '1.0.0',
'as' => 'image'
'mime_type' => 'image/jpeg',
'imagesrcset' => 'wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w',
'imagesizes' =>'50vw',
]
);
Alternatively, we may find declaring imagesrcset
as an array beneficial:
am_preload(
[
'handle' => 'preload-wolf',
'src' => 'wolf.jpg',
'version' => '1.0.0',
'as' => 'image'
'mime_type' => 'image/jpeg',
'imagesrcset' => [
400 => 'wolf_400px.jpg',
800 => 'wolf_800px.jpg',
1600 => 'wolf_1600px.jpg',
],
'imagesizes' =>'50vw',
]
);
Use Case
The linked article has a few examples of use-cases. One we recently ran up against is preloading a hero image to reduce LCP.