Automatically calculate image size

Latest Version

Version
1.7
Update
July 8, 2020
Size
152KiB
Developer
Category
Users
67
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
中文 (简体)
See more
Permissions
Storage
ActiveTab
See more

Image Size Extension

## 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对象
Read more

Source 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" ]}
Read more

How to download and manually install Image Size extension for Chrome

Looking for a way to install Image Size extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Image Size extensions manually, this article outlines two simple methods to effortlessly install Image Size extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Image Size extension and manually install through Drag &Drop

If you ever need to manually install a Image Size extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Image Size Extension by clicking the "Download CRX" button on the website.

Look for the Image Size extension you wish to install. Go to the website and download the Image Size extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Image Size extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Image Size extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Image Size extension for Chrome and install in Developer Mode

This is another method to install Image Size extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Image Size extension file

Select and download the Image Size extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Image Size extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Image Size extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Image Size extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Image Size extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

User reviews

icon

jian zhou (ID: 000000da81031855) Voted 5 ★ - Updated 03/09/2023 超实用的工具!

icon

Power Chen (ID: 0000007169e996fd) Voted 5 ★ - Updated 11/26/2021 good job

icon

Jiahao Zhang (ID: 000000d5e6914cbd) Voted 5 ★ - Updated 07/18/2019 超实用的工具!

icon

hpcherry (ID: 000000b23f1cedd1) Voted 5 ★ - Updated 07/01/2019 超实用的工具!