Enhance aspect ratio handling by leveraging native width/height support on <source> elements

[jimblue]

Bug description

Chrome, Firefox, and Safari now support setting the width and height attributes on <source> elements within <picture> elements. You can read more about this in the web.dev article on optimizing CLS. This enhancement allows browsers to better handle layout shifts and varying aspect ratios for responsive images.

How to reproduce

Current Behavior:

Currently, Statamic Responsive Images does not take advantage of this browser capability. As a result, when multiple sources are provided, the appropriate width and height attributes are not applied to <source> elements, which may lead to layout shifts due to varying aspect ratios.

Proposed Enhancement:

Set appropriate width and height attributes on <source> elements based on their aspect ratios.

Benefits:

• Improved Visual Stability: Reduce Cumulative Layout Shift (CLS) by providing browsers with the correct dimensions upfront.
• Better Performance: Modern browsers can allocate the correct space for images during page load.
• Enhanced Responsiveness: Accurately reflect different image aspect ratios for a more consistent user experience.

Environment

Environment
Application Name: local
Laravel Version: 11.41.3
PHP Version: 8.3.16
Composer Version: 2.8.5
Environment: development
Debug Mode: ENABLED
URL: local.test
Maintenance Mode: OFF
Timezone: Europe/Paris
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: NOT CACHED

Drivers
Broadcasting: null
Cache: file
Database: sqlite
Logs: stack / single
Mail: smtp
Queue: redis
Session: file

Statamic
Addons: 3
Sites: 1
Stache Watcher: Disabled (auto)
Static Caching: Disabled
Version: 5.46.1 PRO

Statamic Addons
rias/statamic-redirect: 3.9.3
spatie/statamic-responsive-images: 5.2.1
statamic/seo-pro: 6.5.0

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

regex (default)

Additional details

Leveraging native width and height support on <source> elements can lead to significant improvements in layout stability and overall performance on modern browsers. This enhancement would allow the package to better handle responsive images by using up-to-date browser capabilities.

Thanks for considering this enhancement!

[ncla]

I no longer contribute to this project but saw this in issue in my email. This is interesting. Is width/height attribute on <source> tag something new? I attempted this feature/fix in an older PR #218 Though I used a wrapper <div> with aspect ratio hack back then. If you are up for it, you could attempt another try at this PR.

[jimblue]

Hi @ncla

The width/height attributes on the <source> element aren’t new, it’s just not very well known yet. In fact, browser support is already strong, at about 95.16%, and the WHATWG specs are quite clear on their usage.

That said, there's another related issue: the math behind the current width and height calculations appears to be off, as discussed in #257. It might be best to correct that first before fully implementing the addition of width and height attributes to the <source> element.

Thanks again for your previous work on PR #218.