useImageSize

JSX and TSX

Summary

Rule available since: v2.1.4
Diagnostic Category: lint/correctness/useImageSize
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- qwik
Sources:
- Same as qwik/jsx-img

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "useImageSize": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforces that <img> elements have both width and height attributes.

This rule ensures that <img> elements have width and height attributes.

Images without specified width and height can cause layout shifts as the browser does not know how much space to reserve for them, leading to a poor user experience. It’s recommended to always include these attributes to prevent such issues.

Examples

Invalid

1
<img src="/image.png"/>

code-block.jsx:1:1 lint/correctness/useImageSize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Missing width or height attribute on img element.
  
  > 1 │ <img src=“/image.png”/>
      │ ^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.
  
  ℹ Learn why this matters: web.dev: Image Dimensions, MDN: img attributes

1
<img src="/static/images/portrait-01.webp"/>

code-block.jsx:1:1 lint/correctness/useImageSize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Missing width or height attribute on img element.
  
  > 1 │ <img src=“/static/images/portrait-01.webp”/>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.
  
  ℹ Learn why this matters: web.dev: Image Dimensions, MDN: img attributes

1
<img src="/image.png" width="200"/>

code-block.jsx:1:1 lint/correctness/useImageSize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Missing width or height attribute on img element.
  
  > 1 │ <img src=“/image.png” width=“200”/>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.
  
  ℹ Learn why this matters: web.dev: Image Dimensions, MDN: img attributes

1
<img src="/image.png" height="200"/>

code-block.jsx:1:1 lint/correctness/useImageSize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Missing width or height attribute on img element.
  
  > 1 │ <img src=“/image.png” height=“200”/>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.
  
  ℹ Learn why this matters: web.dev: Image Dimensions, MDN: img attributes

Valid

1
<img width="200" height="600" src="/static/images/portrait-01.webp" />

1
<img width="100" height="100" src="https://example.com/image.png" />