📐 图片缩放工具

什么是图片尺寸调整工具？

图片尺寸调整工具是一种在线修改图片宽度和高度的实用工具。在Web开发、社交媒体运营和日常办公中，经常需要将图片调整到特定尺寸：头像需要正方形、Banner需要特定宽高比、缩略图需要统一大小、证件照有严格的像素要求。不当的图片尺寸不仅影响美观，还可能导致布局错乱或加载缓慢。本工具支持自定义宽高、按比例缩放、裁剪为指定比例等多种调整方式，提供像素(px)、百分比、厘米(cm)等多种单位，缩放时采用高质量插值算法确保图片清晰不模糊。

如何使用图片尺寸调整工具

1. 上传图片 — 拖拽或点击上传需要调整尺寸的图片。
2. 设置目标尺寸 — 输入目标宽度和高度（像素），可锁定宽高比防止变形。
3. 调整并下载 — 预览调整效果，确认满意后下载结果图片，支持选择输出格式和质量。

常见使用场景

技术原理

图片缩放的核心是像素插值算法：

// 图片缩放原理
// 原图 1000x800 → 目标 500x400（缩小50%）
// 缩小：多个源像素合并为一个目标像素
// 放大：需要在源像素之间插入新像素

// 常见插值算法
// 最近邻(Nearest): 速度最快，放大后有明显锯齿
// 双线性(Bilinear): 平滑过渡，适合一般场景
// 双三次(Bicubic): 质量更好，保留更多细节
// Lanczos: 最高质量，适合缩小操作

// Canvas实现
function resizeImage(img, w, h) {
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    // 高质量缩放
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(img, 0, 0, w, h);
    return canvas.toDataURL('image/png');
}

// 常见尺寸标准
// 社交媒体头像: 400x400px
// 网站Logo: 200x50px（根据设计）
// 缩略图: 300x200px
// 全屏背景: 1920x1080px

最佳实践与注意事项

• 缩小图片容易保持质量，放大图片会模糊——尽量使用比目标尺寸更大的原图进行缩小操作。
• 锁定宽高比可以避免图片变形，如需裁剪应使用裁剪模式而非强制拉伸。
• Web图片建议宽度不超过1920px，过大的图片浪费带宽且浏览器也会缩放显示。
• 输出格式选择：照片用JPEG/WebP，图标用PNG/SVG，需要透明用PNG/WebP。

常见问题