Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature request] - Add rule that forbids media element without an explicit size attributes to prevent Layout Shift from occurring #69

Open
louiechristie opened this issue Jul 14, 2021 · 2 comments
Open

[Feature request] - Add rule that forbids media element without an explicit size attributes to prevent Layout Shift from occurring #69

louiechristie opened this issue Jul 14, 2021 · 2 comments
Labels
enhancement New feature or request

Comments

@louiechristie
Copy link

Feature request - add rule that forbids media element without an explicit size attributes to prevent Layout Shift from occurring.

e.g. Enforce images to have a width and height property.

Because of calculating aspect ratios and improving Google page speed insights rankings:
https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

Related work done for and eslint rule linked below, but I think it only works with HTML within JavaScript, perhaps this could be built on, or used for inspiration:
https://github.com/mizdra/eslint-plugin-layout-shift
@louiechristie louiechristie mentioned this issue Jul 14, 2021
Open
@yeonjuan
Copy link
Owner

@louiechristie Hi Thanks for the suggestion. 👍
I agree about the idea of adding rules for improving CLS if possible.

But I'm not sure about the rule enforcing "width", "height "attributes can handle common cases well. it's because html-eslint does not support parsing CSS.

<head>
<style>
.small-img { 
  width: 10px;
  height: 10px;
}
</style>

</head>


<img class="small-img" src="...">

@louiechristie
Copy link
Author

Hi @yeonjuan

To be clear I’m talking about html (not css) for example:

<img src="hero_image.jpg" alt=""
  height="500" width="500">

It has become important again to explicitly assign width and height attributes of img tags in html for preserving aspect ratio. For an explanation as to why, please read the two links I posted above.

Best wishes,
Louie

@yeonjuan yeonjuan added the enhancement New feature or request label Jul 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@louiechristie @yeonjuan