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

Ben Halpern - Oct 27 '19 - - Dev Community

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .