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!