VS Code插件小工具：一键转换图片格式，让 PNG to WebP 助你高效图像优化！

前端王壮壮
433 阅读3分钟

正文：

大家好！今天分享一个我刚开发的 VSCode插件：png to webp 🎉。它能大幅优化项目中图片资源体积，提升项目加载性能，且操作极其简单！插件体积小到 70KB

🤔 痛点何在？

我们平时开发过程中, 避免不了要和图片打交道, 老生常谈的就是图片懒加载, 首屏优化等等等... 你有没有遇到过ui给的图片过大 !!!

前期一堆图片扔到项目中, 提测、 走查、快上线提merge请求发现 一堆图片kb这么大; 或者在开发过程中一个个图片压缩很麻烦, 有木有!!! 那么解决办法他来啦 ~

项目中的纹理图片通常是PNG格式,该插件也兼容了JPG、JPEG格式, 助你一键转换，但WebP格式能提供接近视觉效果，体积却小很多（节省30%+很常见）, 然而手动转换极其繁

🎯 我的解决方案：一键搞定！

png to webp 插件完美解决了这些问题！它的核心功能是：

🛠️ 一键批量转换与更新：

  • 🖼️ 将文件夹内所有 PNG, JPG, JPEG 图片批量转换为 WebP 格式
  • 🧠 智能转换: 如果转换后的 WebP 文件比原始文件还大，将自动跳过该文件，不生成多余的图片。
  • ⚙️ 可自定义 WebP 的压缩质量
  • 🗑️ 可选择在转换成功（且文件体积减小）后删除原始文件
  • 📊 在"输出"面板中提供清晰、实时的转换进度和结果统计

🚀 效果显著：

  • 大幅减少纹理资源占用体积！
  • 显著提升项目加载速度！
  • 无需手动改代码，无惧出错！

🎬 效果演示

简单直观，一步到位！

使用演示 GIF

📦 安装指南（超简单！！！）

macOS
# 推荐使用 Homebrew
brew install webp
Windows
# 推荐使用 Chocolatey
choco install libwebp
# 或者 Scoop
scoop install webp

您也可以从 Google 官方网站 下载预编译的二进制文件。

Linux
# Ubuntu/Debian
sudo apt-get update && sudo apt-get install webp

# CentOS/RHEL
sudo yum install libwebp-tools

# Arch Linux
sudo pacman -S libwebp

🚦 使用姿势

简单到没朋友！

  1. 在VSCode的资源管理器中找到你存放图片资源所在目录（包含PNG、JPG、JPEG和.atlas的文件夹）。
  2. 右键点击该文件夹！
  3. 在弹出的菜单中选择 Convert To WebP。
  4. 坐等终端输出转换成功信息！Done！🎉

image.png

image.png

问题反馈

如果您在使用过程中遇到任何问题：

  1. 请首先打开一个新的系统终端（不要在 VS Code 内），然后运行 cwebp -version 命令，确保它能被正确执行。如果提示"命令未找到"，说明您的 WebP 工具没有安装成功或没有被添加到系统的 PATH 环境变量中。
  2. 如果工具本身没有问题，但插件运行失败，欢迎留言向我反馈。

💬 写在最后

开发这个插件起初是为了提升自己和团队处理项目中大图片资源的效率。WebP的压缩优势在移动端和Web项目优化中尤为关键。希望这个小工具也能帮助到同样存在困扰的你！

🚀 赶紧尝试一下，给你项目中的图片资源来个大瘦个身吧！ 有什么建议或问题，欢迎在评论区交流！

标签： 效率工具 VSCode插件 WebP 动画优化 前端开发 游戏开发

avatar
文章
阅读
粉丝