DEV Community

Cover image for Firefox (and other browsers) will be making better use of height and width attributes for modern sites
Ben Halpern
Ben Halpern Subscriber Community Curator

Posted on

Firefox (and other browsers) will be making better use of height and width attributes for modern sites

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)
💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด 💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด

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)

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
xowap profile image
Rémy 🤖 •

Can't wait 2030 when this is supported everywhere

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
myakura profile image
Masataka Yakura •

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...

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
varjmes profile image
james •

Yes! I will suffer a little less in my day to day now 😍

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
ben profile image
Ben Halpern •

😂

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
elasticrash profile image
Stefanos Kouroupis •

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.

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
codevault profile image
Sergiu Mureşan •

Didn't know Mozilla had a Youtube channel. Do other browsers have this issue or was Firefox the only outlier?

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
varjmes profile image
james •

As far as I know, other browsers like Chrome have this issue.

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
windo profile image
Herwindo Artono •

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

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
windo profile image
Herwindo Artono •

Ok, not Jen. She is inside iFrame

💬 ชาวเน็ตแห่แชร์: ben/firefox and other browsers will be making better use of height and width attributes for modern sites kpm - สรุปดราม่าล่าสุด
 
kylefilegriffin profile image
Kyle Griffin •

Awesome!