تصاویر صفحه
توضیحات
Automatically calculate image size
## image size User Guide
### Background
Image resources on pages are often unnecessarily large, wasting page performance. This Chrome extension was developed to inspect page images by checking whether their displayed dimensions match the dimensions of the source resources, and marking any mismatches.
### Features
* On image preview pages, quickly obtain image dimensions and file size, and copy CSS
* On other pages, scan all images and compare their displayed dimensions with their source dimensions, marking any mismatches
### Instructions
#### Installation
Open Chrome and install the extension from the following address:
[https://chrome.google.com/webstore/detail/image-size/lohflkahhmfajaaehbljimobcgodmaci](https://chrome.google.com/webstore/detail/image-size/lohflkahhmfajaaehbljimobcgodmaci)
#### Toggle
 Enabled
 Disabled
> Click the icon to toggle the extension on or off
#### Options
Right-click the icon above and select Options.
This opens the extension configuration page.
#### Option descriptions
| Setting | Description |
| -- | -- |
| Tag color | Choose from three colors to prevent conflicts with page colors |
| Design width | Used together with the width below |
| Maximum compatible width | For PC, the ratio is 1:1, such as 1920:1920; for H5, rem is used and there is a ratio, commonly 750:768 or 750:720 |
| Navigation height | Used to locate image information; navigation bars can obscure it, so adding this height improves the positioning calculation |
| Include background images | Background images are generally not checked because pages often contain sprite sheets with mismatched dimensions that can trigger false positives |
| Enable debugging | Outputs console information when enabled |
#### Page display
##### Image preview pages
Basic image information appears in the upper-left corner of the page.
##### Other pages
Images with errors are marked on the right side of the page. Click a tag to display information about the affected image.
The information is as follows:
* Image preview
* [Locate] Click to locate the image
* Image link
* Displayed and source image dimensions
* Type: image or background image
* The specific DOM object on the page