图片尺寸调整
在线调整图片宽高，支持批量处理，所有操作在浏览器本地完成
点击或拖拽上传图片
支持多选，JPG/PNG/WebP/GIF
上传图片后在此显示
关于图片尺寸调整
- 支持三种调整方式：指定宽高（可保持宽高比）、按百分比缩放、指定最长边（自动计算另一边）
- 支持批量处理多张图片，处理完成后可一键下载全部（单张直接下载，多张打包为 ZIP）
- 支持输出 JPEG、PNG、WebP 格式，可调节 JPEG/WebP 压缩质量
操作说明
- 点击上传区域或拖拽图片文件（支持多选），图片会显示在右侧列表
- 选择调整方式和参数，点击「调整尺寸」处理所有图片
- 处理完成后点击「下载全部」，单张图片直接下载，多张自动打包为 ZIP
- 也可点击每张图片卡片上的「下载」按钮单独下载
注意事项
- WebP 格式在 IE 和部分旧版 Safari 中不支持，请根据目标平台选择格式
- 放大图片（超过原始尺寸）会导致图片模糊，建议只做缩小操作
- GIF 动图处理后会变为静态图片，不保留动画效果
- 所有处理均在浏览器本地完成，不会上传任何数据
图片格式与尺寸知识详解
常用图片格式对比
| 格式 | 压缩方式 | 透明度 | 适用场景 |
|---|---|---|---|
| JPEG | 有损压缩 | ❌ 不支持 | 照片、复杂色彩图像 |
| PNG | 无损压缩 | ✅ 支持 | 图标、截图、需要透明背景 |
| WebP | 有损/无损 | ✅ 支持 | Web 优化，体积比 JPEG 小30% |
| GIF | 无损（256色） | ✅ 支持 | 简单动画（本工具处理后失去动画） |
常用图片尺寸参考
| 用途 | 推荐尺寸 | 说明 |
|---|---|---|
| 微信公众号封面 | 900×383px | 2.35:1 比例 |
| 微信朋友圈 | 750×750px | 正方形效果最佳 |
| Twitter/X 图片 | 1200×675px | 16:9 比例 |
| 网站 Banner | 1920×600px | 宽屏横幅 |
| 头像/图标 | 200×200px | 正方形，建议 PNG |
| 博客文章配图 | 800×450px | 16:9，适合大多数博客 |
Canvas 图片缩放原理
// 使用 Canvas 缩放图片
const canvas = document.createElement('canvas');
canvas.width = targetWidth;
canvas.height = targetHeight;
const ctx = canvas.getContext('2d');
// drawImage 自动进行双线性插值缩放
ctx.drawImage(sourceImage, 0, 0, targetWidth, targetHeight);
// 导出为 Blob
canvas.toBlob((blob) => {
// 处理 blob...
}, 'image/jpeg', 0.9); // 质量 0.9