149899 2015-10-07 14:46:22 -0700 Responsive images (srcset, sizes, w) don't load higher resolution when viewport is enlarged. 2026-03-30 01:00:33 -0700 1 1 1 Unclassified WebKit Images Safari 9 Mac OS X 10.11 NEW https://bugs.webkit.org/show_bug.cgi?id=245656 BrowserCompat, InRadar P2 Normal --- 1 duncan webkit-unassigned bdakin dev dino eoconnor moritz.mahringer simon.fraser thorton webkit-bug-importer yoav oldest_to_newest 1131434 0 262646 duncan 2015-10-07 14:46:22 -0700 Created attachment 262646 testcase The attached test case defines a 100% size image. The srcset attribute indicates different resolution images to be loaded. The sizes attribute indicates the image is going to be 100% of the viewport size. The test case file should be opened after the browser window has been made as narrow as possible, or reloading the page after having made the browser window as narrow as possible. This ensures the browser starts with the smallest size image it needs. The placeholder images (sourced from placehold.it) show the image size. The initial image is typically 800 pixels on a retina Mac, with the Safari window as narrow as possible, as indicated by the "800w" text in the image. The expected behavior is for the image to be reloaded when the viewport size changes, so making the browser window wider should show a new text, such as 1000w or 1200w, and so on. The actual behavior in Safari 9 is no new image is ever loaded, until the whole page is reloaded. The current version of Chrome (45....) properly loads larger images. While this is under- or un-specified in the relevant spec (https://html.spec.whatwg.org/multipage/embedded-content.html) the sensible approach is to load proper assets for the current viewport. Otherwise images will appear fuzzy or pixellated. On the desktop the switch can be dramatic (perhaps 400 to 1200+), but even on mobile a portrait/landscape rotation can almost double the required image size, and a split screen 320 pixel wide mobile safari can become a 1000+ pixel wide full screen browser. 1131560 1 yoav 2015-10-08 00:20:58 -0700 Switching resources when the viewport changes have not yet been implemented. This behavior is not specified on purpose, leaving UAs to do what they see fit, which means that current behavior is spec compliant. With that said, I believe we should implement such dynamic loading, for the reasons you stated. 1645005 2 moritz.mahringer 2020-04-23 16:39:18 -0700 This is still a problem. We have to add an event listener to manually change the srcSet attribute to make it reevaluate. Chrome correctly automatically updates to a larger size on resize. 1645216 3 webkit-bug-importer 2020-04-24 09:25:59 -0700 <rdar://problem/62318091> 262646 2015-10-07 14:46:22 -0700 2015-10-07 14:46:22 -0700 testcase srcset2.html text/html 645 duncan PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAg PHRpdGxlPnNyY3NldCB0ZXN0IDI8L3RpdGxlPgo8c3R5bGU+CmltZyB7IHdpZHRoOiAxMDAlOyB9 Cjwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgPGltZyBzcmM9Imh0dHA6Ly9wbGFjZWhvbGQuaXQv MjAwP3RleHQ9ZmFsbGJhY2siCglzcmNzZXQ9Imh0dHA6Ly9wbGFjZWhvbGQuaXQvMTAwP3RleHQ9 MTAwdyAxMDB3LCBodHRwOi8vcGxhY2Vob2xkLml0LzIwMD90ZXh0PTIwMHcgMjAwdywgaHR0cDov L3BsYWNlaG9sZC5pdC80MDA/dGV4dD00MDB3IDQwMHcsIGh0dHA6Ly9wbGFjZWhvbGQuaXQvNjAw P3RleHQ9NjAwdyA2MDB3LCBodHRwOi8vcGxhY2Vob2xkLml0LzgwMD90ZXh0PTgwMHcgODAwdywg aHR0cDovL3BsYWNlaG9sZC5pdC8xMDAwP3RleHQ9MTAwMHcgMTAwMHcsIGh0dHA6Ly9wbGFjZWhv bGQuaXQvMTIwMD90ZXh0PTEyMDB3IDEyMDB3LCBodHRwOi8vcGxhY2Vob2xkLml0LzE0MDA/dGV4 dD0xNDAwdyAxNDAwdywgaHR0cDovL3BsYWNlaG9sZC5pdC8xNjAwP3RleHQ9MTYwMHcgMTYwMHcs IGh0dHA6Ly9wbGFjZWhvbGQuaXQvMTgwMD90ZXh0PTE4MDB3IDE4MDB3IiBzaXplcz0iMTAwdnci Pgo8L2JvZHk+CjwvaHRtbD4K