DEV Community

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

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

ben profile image Ben Halpern ・1 min read

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)
Enter fullscreen mode Exit fullscreen mode

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 ❤️

Discussion (10)

pic
Editor guide
Collapse
xowap profile image
Rémy 🤖

Can't wait 2030 when this is supported everywhere

Collapse
myakura profile image
Collapse
varjmes profile image
james

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

Collapse
ben profile image
Collapse
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.

Collapse
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?

Collapse
varjmes profile image
james

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

Collapse
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

Collapse
windo profile image
Herwindo Artono

Ok, not Jen. She is inside iFrame

Collapse
kylefilegriffin profile image