wp-asset-manager icon indicating copy to clipboard operation
wp-asset-manager copied to clipboard

Add support for preloading responsive images

Open goodguyry opened this issue 1 year ago • 0 comments

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.

goodguyry avatar Oct 30 '23 22:10 goodguyry