[Taks] vf-hero: Update vf-hero component for optimised responsive image delivery and performance

[bhushan-ebi]

The current hero image strategy relies primarily on CSS background images and can be optimised further. It also does not provide a standard responsive image approach for mobile, desktop, and large displays.

This ticket is to update the vf-hero component to support responsive hero image delivery and better performance by rendering a discoverable image in initial HTML and exposing consistent image APIs across Nunjucks, React, and Angular.

Scope:

1. Add responsive image support using picture and img for vf-hero.
2. Ensure LCP optimisation defaults:

• fetchpriority set to high
• loading set to eager
• explicit width and height defaults for layout stability

3. Add support for responsive sources:

• mobile image source
• desktop/default image source
• large/high-resolution image source
• optional sizes and alt text

4. Keep backward compatibility with existing background-image behaviour.
5. Update React and Angular implementations to match Nunjucks behavior.
6. Update component config examples and README documentation.
7. Add/adjust unit tests for React and Angular responsive media behaviour.

Recommended image dimensions:

1. Mobile: 360 x 200
2. Desktop: 1920 x 1080
3. Large/high-res: 2560 x 1440

Acceptance criteria:

1. vf-hero can render responsive hero images.
2. Hero image request is present in initial document HTML (not CSS-only).
3. Default hero image attributes include:

• fetchpriority high
• loading eager
• width 1920
• height 1080

4. React and Angular wrappers accept and render the same responsive image inputs as Nunjucks.
5. Existing vf_hero_image and vf_hero_image_size behavior remains functional.
6. Documentation includes usage examples for responsive image fields and recommended dimensions.

[bhushan-ebi]

WIP changes added at 6e79b59

Test further and then commit to 'develop' branch.

[Adedoyinebi]

@bhushan-ebi I am adding a link to the documentation ticket for reference when this task reaches the documentation stage.