Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 27, 2019 04:07 pm GMT

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

GitHub logo 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


Original Link: https://dev.to/ben/firefox-and-other-browsers-will-be-making-better-use-of-height-and-width-attributes-for-modern-sites-4kpm

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To