This video goes into it all...
I'm excited about this because we deal with this problem on DEV. Generating the proper height and width attributes on user generated content is not table stakes, but this change makes ultimately getting it right way less hacky.
I've been really annoyed by this browser behavior and considered some unconventional ways to deal with this. I'm glad we didn't try to do something overly hacky.
This is a total aside to this feature in general, but in case you're curious, I made an issue about how we can implement this on DEV's user-generated content if anyone wants to take a hack at it...
Detect image height and width in markdown parser
#4616
As per this video, browsers will begin laying out images based on height and width attributes so they don't "jump" on load.
Of course, with user-generated content, we can't always know the height and width of an image, but we could.
We do various forms of image manipulation in the markdown_parser, i.e.
html = prefix_all_images(html)
html = wrap_all_images_in_links(html)
And in that process we set some attributes such as img["loading"] = "lazy". In that area we could also set img["height"] and img["width"].
In terms of "how" to do this, the library FastImage looks like a good one to me, but I didn't do an extensive search. I'd think we'd want to create a method which Rails caches the output of the image we fetch, so we don't need to make this network fetch every time we hit "preview" or re-save an article. FastImage also lets us set a timeout, which we should definitely make use of because this is not critical behavior we'd want to cause a major slowdown with.
Anyway, if we can make this work without making things meaningfully more fragile or slow, I think we should do this. Having awareness of aspect ratios seems generally useful.
If anybody has more info about this in Chrome than is mentioned in the video, please drop a comment.
Happy coding ❤️
Top comments (10)
Can't wait 2030 when this is supported everywhere
Chrome is shipping this behavior as well in Chrome 79.
chromestatus.com/feature/569526613...
Discussions:
groups.google.com/a/chromium.org/d...
groups.google.com/a/chromium.org/d...
I am not really a web developer (although I have done my bit of share of web developing) but as a user, I never really cared, on how images were rendered, for me the user experience was and is exactly the same. But I did laugh a bit when I learned that there is an actual term to describe this.
Yes! I will suffer a little less in my day to day now 😍
😂
Didn't know Mozilla had a Youtube channel. Do other browsers have this issue or was Firefox the only outlier?
As far as I know, other browsers like Chrome have this issue.
Hi Jen and All,
What happened when the browser not supporting the feature, I see, will it ignore the CSS? how to implement a fallback for this.
Thanks, #smile
Ok, not Jen. She is inside iFrame
Awesome!