实用脚本能自动优化网站图片吗？

本文目录导读：

1. 集成到构建流程（最推荐，适合开发阶段）
2. 使用构建工具插件（如 Webpack、Vite）
3. 使用专门的自动化工具（如 Squoosh CLI / ImageOptim API）
4. 服务器端或 CDN 层面的实时优化（适合已有网站）
5. 传统网站静态页面脚本（实时处理，性能较差）
6. 注意事项

是的,确实有实用脚本可以自动优化网站图片，这类脚本通常集成在构建工具、内容管理系统或部署流程中，主要实现自动压缩、调整大小、格式转换等功能。

以下是几种常见且实用的自动化方案,附简单示例：

集成到构建流程（最推荐，适合开发阶段）

使用 Node.js 或类似工具，每次构建时自动处理图片。

示例：使用 sharp 库（独立脚本）

const sharp = require('sharp');
const glob = require('glob');
const path = require('path');
// 配置：源文件夹、输出文件夹、目标宽度、质量
const sourceDir = 'src/images/';
const outputDir = 'dist/images/';
const sizes = [480, 768, 1024, 1920];
const quality = 80;
// 找到所有源图片
glob(`${sourceDir}**/*.{jpg,jpeg,png,webp}`, (err, files) => {
    if (err) throw err;
    files.forEach(file => {
        const fileName = path.basename(file, path.extname(file));
        const stream = sharp(file);
        sizes.forEach(size => {
            stream
                .resize(size) // 调整宽度，高度自适应
                .webp({ quality }) // 默认转换为 WebP 格式
                .toFile(`${outputDir}${fileName}_${size}w.webp`)
                .then(info => console.log(`Generated: ${info.format} at ${size}w`))
                .catch(err => console.error(err));
        });
    });
});

运行方式：在 package.json 中添加 "scripts": { "optimize-images": "node optimize.js" }，用 npm run optimize-images 执行。

使用构建工具插件（如 Webpack、Vite）

以 Vite 为例：

// vite.config.js
import { defineConfig } from 'vite';
import imagemin from 'vite-plugin-imagemin';
export default defineConfig({
    plugins: [
        imagemin({
            // 默认压缩 png/jpg/gif/svg
            mozjpeg: { quality: 75 },
            pngquant: { quality: [0.6, 0.8] },
            webp: { quality: 75 }
        })
    ]
});

优点：零配置，每次开发或打包时自动运行。

使用专门的自动化工具（如 Squoosh CLI / ImageOptim API）

Squoosh CLI（Google 出品，简单高效）：

# 安装
npm install -g @squoosh/cli
# 批量处理所有图片（递归）
squoosh-cli --webp '{"quality":75}' --resize '{"width":1200}' -d ./optimized ./src/images/

服务器端或 CDN 层面的实时优化（适合已有网站）

使用第三方服务（如 Cloudinary、Imgix、Cloudflare Images），通过 URL 参数或脚本自动处理上传的图片。

示例（Node.js + Cloudinary 上传中自动优化）：

const cloudinary = require('cloudinary').v2;
cloudinary.config({ cloud_name: 'your_cloud', api_key: '...', api_secret: '...' });
async function uploadAndOptimize(filePath) {
    const result = await cloudinary.uploader.upload(filePath, {
        fetch_format: 'auto',    // 自动选择最佳格式（WebP 等）
        quality: 'auto',          // 自动调整质量
        width: 1200,              // 限制宽度
        crop: 'limit'             // 不拉伸
    });
    return result.secure_url;     // 直接返回优化后的 URL
}

传统网站静态页面脚本（实时处理，性能较差）

如果你的网站是纯静态且无法改动构建流程,可以在页面加载后用 JavaScript 处理已存在的图片（不推荐用于生产环境，仅适合小批量或个人使用）。

<script>
// 注意：浏览器端无法高效压缩，只能改变尺寸或格式（Canvas）
document.querySelectorAll('img').forEach(img => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const maxWidth = 800;
    img.onload = function() {
        const scale = Math.min(maxWidth / img.naturalWidth, 1);
        canvas.width = img.naturalWidth * scale;
        canvas.height = img.naturalHeight * scale;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 替换 src 为压缩后的 toDataURL（质量 0.7）
        img.src = canvas.toDataURL('image/jpeg', 0.7);
    };
});
</script>

注意事项

1. 不要直接用浏览器端脚本做大图优化（性能差、内存占用高）
2. 建议输出 WebP/AVIF 格式（体积更小），并配合 <picture> 标签为旧浏览器提供 fallback
3. 保留原始文件：脚本应拷贝或新建文件，不要覆盖原图

如果你提供具体的网站类型（如 WordPress、Hexo、Vue 项目等），我可以给出更精确的脚本方案。