ContextQMD
Back to Biomejs

useImageSize

src/content/docs/linter/rules/use-image-size.mdx

latest15.8 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v2.1.4` - Diagnostic Category: [`lint/correctness/useImageSize`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`qwik`](/linter/domains#qwik) - Sources: - Same as [`qwik/jsx-img`](https://qwik.dev/docs/advanced/eslint/#jsx-img)

How to configure

json
{
	"linter": {
		"rules": {
			"correctness": {
				"useImageSize": "error"
			}
		}
	}
}

Description

Enforces that `` elements have both width and height attributes.

This rule ensures that `` 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

jsx
<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/use-image-size">lint/correctness/useImageSize</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Missing </span><span style="color: Tomato;"><strong>width</strong></span><span style="color: Tomato;"> or </span><span style="color: Tomato;"><strong>height</strong></span><span style="color: Tomato;"> attribute on </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;"> element.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;img src=&quot;/image.png&quot;/&gt; <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Learn why this matters: </span><span style="color: lightgreen;"><a href="https://web.dev/optimize-cls/#images-without-dimensions">web.dev: Image Dimensions</a></span><span style="color: lightgreen;">, </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes">MDN: img attributes</a></span> </code></pre>
jsx
<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/use-image-size">lint/correctness/useImageSize</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Missing </span><span style="color: Tomato;"><strong>width</strong></span><span style="color: Tomato;"> or </span><span style="color: Tomato;"><strong>height</strong></span><span style="color: Tomato;"> attribute on </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;"> element.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;img src=&quot;/static/images/portrait-01.webp&quot;/&gt; <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Learn why this matters: </span><span style="color: lightgreen;"><a href="https://web.dev/optimize-cls/#images-without-dimensions">web.dev: Image Dimensions</a></span><span style="color: lightgreen;">, </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes">MDN: img attributes</a></span> </code></pre>
jsx
<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/use-image-size">lint/correctness/useImageSize</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Missing </span><span style="color: Tomato;"><strong>width</strong></span><span style="color: Tomato;"> or </span><span style="color: Tomato;"><strong>height</strong></span><span style="color: Tomato;"> attribute on </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;"> element.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;img src=&quot;/image.png&quot; width=&quot;200&quot;/&gt; <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Learn why this matters: </span><span style="color: lightgreen;"><a href="https://web.dev/optimize-cls/#images-without-dimensions">web.dev: Image Dimensions</a></span><span style="color: lightgreen;">, </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes">MDN: img attributes</a></span> </code></pre>
jsx
<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/use-image-size">lint/correctness/useImageSize</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Missing </span><span style="color: Tomato;"><strong>width</strong></span><span style="color: Tomato;"> or </span><span style="color: Tomato;"><strong>height</strong></span><span style="color: Tomato;"> attribute on </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;"> element.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;img src=&quot;/image.png&quot; height=&quot;200&quot;/&gt; <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Learn why this matters: </span><span style="color: lightgreen;"><a href="https://web.dev/optimize-cls/#images-without-dimensions">web.dev: Image Dimensions</a></span><span style="color: lightgreen;">, </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes">MDN: img attributes</a></span> </code></pre>

Valid

jsx
jsx
</TabItem> </Tabs>