Image Prioritizer fails to preload LCP images for picture elements #1312
Description
The Image Prioritizer plugin adds a preload link tag with fetchpriority=high for the URL contained in the src attribute of the img. When the Modern Image Formats plugin is active and the "Use <picture> element" option is enabled, then the img is wrapped in picture with other source elements for WebP and AVIF image formats. Because of this, the preload link will usually be wrong because the actual URL being used for the LCP image will be the WebP or AVIF image, not the JPEG fallback.
For example, a page containing this LCP element:
<picture class="wp-picture-13">
<source type="image/webp" srcset="http://localhost:8888/wp-content/uploads/2024/06/bison1-1024x668-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/06/bison1-300x196-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/06/bison1-768x501-jpg.webp 768w" sizes="(max-width: 1024px) 100vw, 1024px">
<source type="image/jpeg" srcset="http://localhost:8888/wp-content/uploads/2024/06/bison1-1024x668.jpg 1024w, http://localhost:8888/wp-content/uploads/2024/06/bison1-300x196.jpg 300w, http://localhost:8888/wp-content/uploads/2024/06/bison1-768x501.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">
<img fetchpriority="high" width="1024" height="668" src="http://localhost:8888/wp-content/uploads/2024/06/bison1.jpg" class="attachment-1024x668 size-1024x668 not-transparent" alt="" data-has-transparency="false" data-dominant-color="8c7d58" style="width:100%;height:65.23%;max-width:1024px;--dominant-color: #8c7d58;">
</picture>Is getting this preload link:
<link data-od-added-tag="" rel="preload" fetchpriority="high" as="image" href="http://localhost:8888/wp-content/uploads/2024/06/bison1.jpg" media="screen">In this specific example, the LCP element is the same across all breakpoints, so the fetchpriority=high on the img itself is sufficient and the preload link is not required. Nevertheless, if the LCP element is not the same across all breakpoints, the fetchpriority=high attribute cannot be added to the img or else it will get loaded with high priority for some breakpoints for which it is not the LCP image. This basically uncovers a performance problem with using <picture> as it cannot be reliably loaded with high priority to improve LCP. This is essentially a known issue per GoogleChrome/web.dev#6150.
For Image Prioritizer, the preload link needs to be omitted when the related LCP element is a picture element. It can still add fetchpriority=high to the img as it does now when all breakpoints share it as the LCP element.
Cheers to @aaemnnosttv for talking this through with me at WCEU.