Automatically calculate image size
Image Size Extension
### 背景
页面中图片资源经常引用过大,造成页面性能浪费,基于此开发了此chrome插件,用于对页面的图片进行检查,即图片样式大小和本身的资源大小是否一致,如不一致,则会进行标注提醒。
### 功能
* 对于图片预览的页面,可以快速获取图片的尺寸和体积,并且提供复制css的功能
* 对于非图片预览的页面,可以遍历整个页面的图片,对图片样式大小和本身的资源大小进行比较,如不一致,则进行标注提醒。
### 操作指南
#### 安装地址
打开chrome 浏览器,先从以下地址按照插件
[https://chrome.google.com/webstore/detail/image-size/lohflkahhmfajaaehbljimobcgodmaci](https://chrome.google.com/webstore/detail/image-size/lohflkahhmfajaaehbljimobcgodmaci)
#### 开关
![](https://yanxuan.nosdn.127.net/15619602636762039.png) 开启状态
![](https://yanxuan.nosdn.127.net/15619602639322040.png) 关闭状态
> 点击 icon 则可以进行开关切换
#### 选项设置
在上述的icon上右键选中 选项
![](https://yanxuan.nosdn.127.net/15619608095552066.png)
可以进入到插件的配置信息页面
![](https://yanxuan.nosdn.127.net/15619608826292067.png)
#### 选项说明
| 配置 | 说明 |
| -- | -- |
| tag 颜色 | 有三种颜色切换,防止tag颜色和页面颜色冲突 |
| 视觉稿宽 | 和底下那个宽度一起使用 |
| 最大兼容宽 | pc则为1:1,即1920:1920;h5则为rem,实际存在比例,常见的为 750:768,750:720 |
| 导航高度 | 用于图片信息进行定位,但是页面往往存在导航,会出现遮挡,添加此高度后,定位则会进行优化计算 |
| 包含背景图 | 一般不做背景图检查,往往页面中会有雪碧图,尺寸存在不一致,会误报 |
| 开启调试 | 开启后则会进行console信息输出 |
#### 页面展示
##### 对于图片预览的页面
页面左上角会展示图片的基本信息
![](https://yanxuan.nosdn.127.net/15619628363582189.png)
##### 对于非图片预览的页面
图片有错误的则会在页面的右侧标记出错误的位置,点击该tag后,可以展示错误的图片信息
![](https://yanxuan.nosdn.127.net/15619625575742162.png)
信息如下:
![](https://yanxuan.nosdn.127.net/15619625578562163.png)
* 图片预览图
* 【定位】点击后可以进行定位
* 图片链接
* 图片样式尺寸和源尺寸
* 类型分为 图片和背景图
* 以及在页面中的具体dom对象
Source Manifest.json
Similar Extensions
Image Dimensions Detector 67 0 ★ 11.6KiB
Image info tab 67 0 ★ 9.62KiB
Image Size Info 67 0 ★ 38.49KiB
Image info 67 20 ★ 97.21KiB
Image Size Checker 67 0 ★ 143KiB
Pic info 67 14 ★ 41.22KiB
View Image Info (properties) 67 201 ★ 35.01KiB
Image-Details 67 24 ★ 23.32KiB
Image Dimensions 67 1 ★ 46.66KiB
JIRA SubTask URL Redirection 67 1 ★ 11.14KiB
Photo Zoom 67 32 ★ 1.59MiB
Image Info on Hover 67 4 ★ 54.44KiB
Image Size Check 67 7 ★ 6.51KiB
Image Data 67 2 ★ 19.66KiB
Image info 67 8 ★ 40.56KiB
PhotoShow 67 293 ★ 269KiB
Banner Dimensions 67 3 ★ 339KiB
PreviewImage 67 3 ★ 5.16KiB
Enhanced Image Viewer 67 14 ★ 106KiB
Show and Copy Image Properties 67 4 ★ 30.46KiB
Better Image Scaling 67 12 ★ 38.65KiB
Image Checker 67 2 ★ 19.32KiB
Full Width Image 67 3 ★ 44.76KiB
Page Gallery 67 4 ★ 19.33KiB
User reviews
jian zhou (ID: 000000da81031855) Voted 5 ★ - Updated 03/09/2023
Power Chen (ID: 0000007169e996fd) Voted 5 ★ - Updated 11/26/2021
Jiahao Zhang (ID: 000000d5e6914cbd) Voted 5 ★ - Updated 07/18/2019
hpcherry (ID: 000000b23f1cedd1) Voted 5 ★ - Updated 07/01/2019