
Image Size
68 users
Version: 1.7
Updated: July 8, 2020

Available in the
Chrome Web Store
Chrome Web Store
Install & Try Now!

Disaronno Amaretto 1L

Vasco V4 Language Translator Device | 108 Languages | Free Lifetime Internet In

Custom Instagram Handle // Custom Username // Social Media Handle

Quikrete 20 lb. Quick Setting Cement

Vasco V4 Language Translator Device | 108 Languages | Free Lifetime Internet In

Men's New Era Navy U.S. Paralympics The Golfer Trucker Adjustable Hat
## 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对象
### 背景
页面中图片资源经常引用过大,造成页面性能浪费,基于此开发了此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对象
Related

Image Dimensions Detector
62

Image info tab
107

Image Size Info
2,000+

Image info
3,000+

Image Size Checker
2,000+

Pic info
3,000+

View Image Info (properties)
50,000+

Image-Details
5,000+

Image Dimensions
123

JIRA SubTask URL Redirection
272

Photo Zoom
10,000+

Image Info on Hover
1,000+

Image Size Check
4,000+

Image Data
485

Image info
625

PhotoShow
90,000+

PreviewImage
416

Banner Dimensions
1,000+

Enhanced Image Viewer
1,000+

Better Image Scaling
625

Image Checker
380

Full Width Image
99

Show and Copy Image Properties
259

Page Gallery
803