VSCode内置图片预览_直接在编辑器查看图片像素与大小

VSCode 默认图片预览不显示像素尺寸和文件大小，因其基于 WebView 渲染且不解析图像头信息；推荐使用 vscode-image-preview 插件或终端命令 file 快速获取准确宽高与大小。

很多开发者可能都遇到过这个情况：在VSCode里点开一张图片，除了看到缩略图，其他关键信息一概没有。没错，VSCode默认的图片预览功能，其设计初衷就不是为了让你分析图像属性的。

为什么 Ctrl+Click 或点击内联预览不显示宽高信息

这得从它的实现原理说起。VSCode内置的图片预览，无论是通过Markdown里的链接点击，还是直接在资源管理器里双击.png、.jpg文件，其底层都是一个WebView渲染器。它调用的是Electron的图像加载逻辑，任务很简单：把图片数据读出来，然后显示在窗口里。至于解析EXIF、读取图像头信息、暴露元数据接口这些事，它一概不做。

所以，你看到的结果就是：

• 哪怕你打开的是一张8000×6000的高分辨率PNG，预览窗口也只是给你一个“适应编辑器宽度”的缩放视图。
• 右键菜单里找不到“属性”或“详细信息”这类选项。
• 鼠标悬停在图片上时，提示框里只有文件路径，期待中的width × height或file size信息根本不会出现。

用 vscode-image-preview 插件补全缺失信息

想要在VSCode环境里一站式解决这个问题，社区插件是目前最优雅的方案。其中，vscode-image-preview（作者：yudai）以其轻量和准确脱颖而出。安装之后，当你预览图片时，它会在预览面板的顶部直接显示Width × Height和File size，完美覆盖了.png、.jpg、.gif、.webp等主流格式。

具体怎么用？很简单：

• 安装插件后，对任意图片文件按下Ctrl+Shift+P，然后输入Image Preview: Open Preview即可。
• 或者在资源管理器中直接右键点击图片，选择Open Preview选项。
• 此时，预览窗口的标题栏就会变成类似image.png (1920×1080, 2.1 MB)这样的信息，一目了然。

值得注意的是，这个插件的工作原理是纯前端解析图像文件头（比如PNG的IHDR块、JPEG的SOF0段），不修改原文件，也不依赖任何外部命令。因此，它的响应速度很快，并且完全离线可用。

终端里快速查尺寸——不用开 GUI 工具

当然，如果你只是临时需要确认一张图的参数，不想动鼠标，或者手边没有插件，那么终端命令行往往是更快的选择。直接在VSCode的集成终端（Ctrl+`）里运行一行命令就行：

file image.jpg

命令的输出会类似于这样：image.jpg: JPEG image data, JFIF standard 1.01, resolution (DPI), density 72x72, segment length 16, baseline, precision 8, 1920x1080, frames 3。你需要的关键尺寸信息就在其中。

这里有几个细节需要留意：

• file命令在macOS和Linux系统上是自带的。Windows用户则需要通过安装Git for Windows（它自带msys2环境）或者WSL来获得这个命令。
• 如果你需要更精确、格式化的输出，可以借助ImageMagick的identify命令，例如：identify -format "%wx%h %b" image.png。不过，这需要你先通过brew install imagemagick（macOS）或choco install imagemagick（Windows）来安装ImageMagick。
• 需要注意的是，identify命令会解码整个图像文件，如果遇到体积巨大的图片（比如上百MB的TIFF文件），可能会有短暂的卡顿。而file命令只读取文件头部信息，因此更加安全可靠。

最后说个关键点：当工作流对图片尺寸有严格要求时，千万别依赖预览缩略图做视觉判断。看起来“差不多”往往意味着“差很多”——1920×1080和1920×1079虽然只差一个像素，但对于某些严格的构建流程（例如Webpack中图片loader的尺寸断言）来说，就足以导致失败。记住，只有插件或命令行输出的数字，才是唯一可信的权威来源。