Image Size
Automatically calculate image size
什麼是Image Size？
Image Size是由itcharliexu開發的Chrome擴展程式，該擴展的主要功能是“Automatically calculate image size”。
擴展截圖
下載Image Size擴展crx文件
下載Image Size擴展crx格式的文件，手動將Chrome擴充功能安裝到瀏覽器中，也可以將crx文件分享給朋友，輕鬆安裝Chrome擴充功能。
擴展使用說明
## 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 |
| ID | lohflkahhmfajaaehbljimobcgodmaci |
| 官方網址 | https://chromewebstore.google.com/detail/image-size/lohflkahhmfajaaehbljimobcgodmaci |
| 簡介 | Automatically calculate image size |
| 檔案大小 | 152 KB |
| 安裝次數 | 59 |
| 目前版本 | 1.7 |
| 更新時間 | 2020-07-08 |
| 上架時間 | 2019-12-24 |
| 評分 | 5.00/5 共 4 次評分 |
| 開發者 | itcharliexu |
| 電子郵箱 | [email protected] |
| 付費類型 | free |
| 支援的語言 | zh-CN |
| manifest.json | |
{
"update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
"name": "Image Size",
"version": "1.7",
"manifest_version": 2,
"description": "Automatically calculate image size",
"icons": {
"128": "icon_128.png"
},
"permissions": [
"storage",
"activeTab"
],
"browser_action": {
"default_title": "Image Size",
"default_icon": "icon_128-disable.png"
},
"background": {
"scripts": [
"js\/background.js"
]
},
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
"content_scripts": [
{
"matches": [
"http:\/\/*\/*",
"https:\/\/*\/*",
"file:\/\/*\/*"
],
"run_at": "document_end",
"css": [
"css\/style.css"
],
"js": [
"js\/jquery.js",
"js\/dialog.js",
"js\/contentScript.js"
]
}
],
"web_accessible_resources": [
"img\/close.png",
"css\/style.css",
"js\/jquery.js",
"js\/dialog.js",
"js\/options.js"
]
} | |
