Automatically calculate image size
## image size使用说明
### 背景
页面中图片资源经常引用过大，造成页面性能浪费，基于此开发了此chrome插件，用于对页面的图片进行检查，即图片样式大小和本身的资源大小是否一致，如不一致，则会进行标注提醒。
### 功能
* 对于图片预览的页面，可以快速获取图片的尺寸和体积，并且提供复制css的功能
* 对于非图片预览的页面，可以遍历整个页面的图片，对图片样式大小和本身的资源大小进行比较，如不一致，则进行标注提醒。
### 操作指南
#### 安装地址
打开chrome 浏览器，先从以下地址按照插件
[https://chrome.google.com/webstore/detail/image-size/lohflkahhmfajaaehbljimobcgodmaci](https://chrome.google.com/webstore/detail/image-size/lohflkahhmfajaaehbljimobcgodmaci)
#### 开关
 开启状态
 关闭状态
> 点击 icon 则可以进行开关切换
#### 选项设置
在上述的icon上右键选中 选项
可以进入到插件的配置信息页面
#### 选项说明
| 配置 | 说明 |
| -- | -- |
| tag 颜色 | 有三种颜色切换，防止tag颜色和页面颜色冲突 |
| 视觉稿宽 | 和底下那个宽度一起使用 |
| 最大兼容宽 | pc则为1:1，即1920:1920；h5则为rem，实际存在比例，常见的为 750:768，750:720 |
| 导航高度 | 用于图片信息进行定位，但是页面往往存在导航，会出现遮挡，添加此高度后，定位则会进行优化计算 |
| 包含背景图 | 一般不做背景图检查，往往页面中会有雪碧图，尺寸存在不一致，会误报 |
| 开启调试 | 开启后则会进行console信息输出 |
#### 页面展示
##### 对于图片预览的页面
页面左上角会展示图片的基本信息
##### 对于非图片预览的页面
图片有错误的则会在页面的右侧标记出错误的位置，点击该tag后，可以展示错误的图片信息
信息如下：
* 图片预览图
* 【定位】点击后可以进行定位
* 图片链接
* 图片样式尺寸和源尺寸
* 类型分为 图片和背景图
* 以及在页面中的具体dom对象
Image Size插件谷歌浏览器安装教程
第一步：下载Image Size安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
