fix(common): Add fetchpriority to ngOptimizedImage preloads (#48010)

Add fetchpriority='high' to ngOptimizedImage preloads to so their priority matches the priority of the image element itself

PR Close #48010

aio/content/guide/image-directive.md

@@ -60,6 +60,7 @@ Marking an image as `priority` applies the following optimizations:
 
 *   Sets `fetchpriority=high` (read more about priority hints [here](https://web.dev/priority-hints))
 *   Sets `loading=eager` (read more about native lazy loading [here](https://web.dev/browser-level-image-lazy-loading))
+*   Automatically generates a [preload link element](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) if [rendering on the server](/guide/universal).
 
 Angular displays a warning during development if the LCP element is an image that does not have the `priority` attribute. A page’s LCP element can vary based on a number of factors - such as the dimensions of a user's screen, so a page may have multiple images that should be marked `priority`. See [CSS for Web Vitals](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp) for more details.
 

packages/common/src/directives/ng_optimized_image/preload-link-creator.ts

@@ -65,6 +65,7 @@ export class PreloadLinkCreator {
     renderer.setAttribute(preload, 'as', 'image');
     renderer.setAttribute(preload, 'href', src);
     renderer.setAttribute(preload, 'rel', 'preload');
+    renderer.setAttribute(preload, 'fetchpriority', 'high');
 
     if (sizes) {
       renderer.setAttribute(preload, 'imageSizes', sizes);

packages/common/test/directives/ng_optimized_image_spec.ts

@@ -68,6 +68,7 @@ describe('Image directive', () => {
       expect(preloadLink!.getAttribute('as')).toEqual('image');
       expect(preloadLink!.getAttribute('imagesizes')).toEqual('10vw');
       expect(preloadLink!.getAttribute('imagesrcset')).toEqual(`${rewrittenSrc}?width=100 100w`);
+      expect(preloadLink!.getAttribute('fetchpriority')).toEqual('high');
 
       preloadLink!.remove();
     });