# Avoid the usage of png/jpg/jpeg images (`@greenpoint/image-extension`)

⚠️ This rule _warns_ in the ✅ `recommended` config.

<!-- end auto-generated rule header -->

## Rule Details

This rule aims to use the lightest image format possible to reduce the size of the page.
It prohibits .png, .gif, .jpg extensions. It also encourages using lighter formats than .jpeg, and .webp (if possible): for example .svg or .css.

## Examples

Examples of **non-compliant** code for this rule:

```js
import imgPng from './img.png'
<img src='./img.png' />
<img src={imgPng} />
```

Examples of **compliant** code for this rule:

```js
import imgSvg from './img.svg'
<img src='./img.svg' />
<img src={imgSvg} />
```

## Further Reading

- [cnumr/best-practices/Optimize images](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_080_en.md)
- [cnumr/best-practices/Optimize vector images](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_036_en.md)
- [cnumr/best-practices/Prefer glyphs over images](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_030_en.md)