Image Size

Automatically calculate image size

Image Size là gì?

Image Size là một tiện ích mở rộng Chrome được phát triển bởi itcharliexu, và tính năng chính của nó là "Automatically calculate image size".

Ảnh Chụp Màn Hình của Tiện Ích Mở Rộng

screenshot

Tải xuống tệp CRX của tiện ích mở rộng Image Size

Tải xuống các tệp mở rộng Image Size dưới định dạng crx, cài đặt các tiện ích mở rộng Chrome bằng tay trong trình duyệt hoặc chia sẻ các tệp crx với bạn bè để dễ dàng cài đặt các tiện ích mở rộng Chrome.

Hướng Dẫn Sử Dụng Tiện Ích Mở Rộng

                        ## image size使用说明

### 背景
页面中图片资源经常引用过大,造成页面性能浪费,基于此开发了此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对象                    

Thông Tin Cơ Bản về Tiện Ích Mở Rộng

Tên Image Size Image Size
ID lohflkahhmfajaaehbljimobcgodmaci
URL Chính Thức https://chromewebstore.google.com/detail/image-size/lohflkahhmfajaaehbljimobcgodmaci
Mô tả Automatically calculate image size
Kích Thước Tệp 152 KB
Số Lần Cài Đặt 59
Phiên Bản Hiện Tại 1.7
Cập Nhật Lần Cuối 2020-07-08
Ngày Phát Hành 2019-12-24
Đánh Giá 5.00/5 Tổng số 4 Đánh Giá
Nhà Phát Triển itcharliexu
Email [email protected]
Loại Thanh Toán free
Ngôn Ngữ Được Hỗ Trợ 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"
    ]
}