Just a quick one as I’m still in the developer tools headspace after The Sneetches and other DevTools.
On the weekend I saw that support for responsive images – via the <picture>
element – landed in Chrome 38. Naturally I tried out the test page listed in the article to see how it was put together.
After a short time inspecting the page, I realised that while the Chrome browser has support for <picture>
, the Chrome DevTools don’t. When inspecting a <picture>
element I found myself completely unable to tell which image was actually showing at any one time.
Obviously this feature is still in its infancy and I’m sure the developer tools will catch up soon. In the meantime, though, I’m going to present my completely-not-asked-for suggestions for Chrome DevTools support of <picture>
.
Suggestion #1: Fade out non-matching sources
Within a <picture>
element there are multiple sources of images for the browser to choose from. These are provided by <source>
elements with an <img>
element as the final fallback image (to ensure compatibility with browsers that don’t support <picture>
).
My suggestion is to use the technique seen in the Styles panel and fade out any sources that are not being shown, only highlighting the currently-visible source.
In fact, a <source>
element can define multiple images in its srcset
parameter to support multiple resolutions. This technique could be extended to the srcset
parameter as well, to show which specific part of the srcset
is currently applied.
Of course, the <img>
element is the one actually doing the display of the chosen source, so it’s debateable whether it should be faded out. Either way, I’m just playing with ideas here.
Suggestion #2: Hover previews for srcset
<img>
elements show a preview of the image when you hover over the src
attribute.
This should also be extended to the srcset
parameter of a <source>
element, even if they list multiple sources.
Suggestion #3: Explicitly indicate the currently visible image source
I don’t know if “computed attributes” (my made-up term) are likely to become a thing in devtools, but here is an attempt anyway. The basic idea is to show an attribute on the <img>
element that indicates the current source image, as a representation of the currentSrc
property.
(Clearly it’s not a perfect visual design, but it gets the point across.)
Conclusion
I don’t have one, other than saying that using devtools to alter devtools is a surprising amount of fun, and that this mini project was a wonderful distraction from whatever it was I was meant to be doing in my spare time.
Great suggestions! 🙂
I’ve filed https://code.google.com/p/chromium/issues/detail?id=415147
Cheers! That was quick. 🙂
Great ideas, I hope it will come soon!
you win gold for most well thought out feature request. i’ll bet you 10 dollars they implement it
We’ll see. 😉
I’d say this has more chance of being implemented than my previous suggestions (The Sneetches and other DevTools), which were much more wide-ranging and ambitious.