img-layout-shift-detector

The browser extension that detects <img> tags that cause Layout Shift

Usage

1. Access page you want to measure layout shift by <img>
2. Open console tab of devtools
3. Click the icon of this extension
4. The report is outputed to console tab

Screenshots

Supported Rules

• require-intrinsic-size: require image's intrinsic size as attributes or properties.
• require-aspect-ratio-hint: require aspect ratio hint
• no-mismatch-of-aspect-ratio-hint: disallow the width/height attributes that do not match the image's original aspect ratio
• no-mismatch-of-apparent-size: disallow <img> elements whose apparent size is different from the image's original aspect ratio
• no-defective-attribute: disallow <img> tags with only one width/height attributes
• no-defective-property: disallow <img> tags with only one width/height properties

Playground

1. Open https://img-layout-shift-detector.netlify.app
2. Open console tab of devtools
3. The report is outputed to console tab (If you don't see the table, please reload page)

How to develop

$ yarn install
$ yarn run start:chromium:dev

How to release (for contributor)

$ # Wait for passing CI...
$ git switch master
$ git pull

$ # Update version field
$ vim manifest.json
$ git add manifest.json
$ yarn version

$ # Publish
$ git push --follow-tags
$ open https://chrome.google.com/webstore/devconsole