浅谈图片优化

编程基础 • 2025-01-04 16:11 • 阅读 95

方案列表
CDN
首先说一下最简单的方案，那就是使用CDN。专业的事情交给专业的人，CDN（Content Delivery Network）为网站提供内容分发网络，把图片等静态资源放到CDN上，然后直接使用CDN上的资源。

优点
🚀 提升速度：可以降低自己服务器的压力，同时也可以提升访问速度。
✅ 稳定性强：虽然有时CDN会抽风，但总体上要比自建服务更稳妥一些。
缺点
📝 备案要求：CDN需要备案才能加速国内用户体验。
💰 费用问题：免费额度有限，访问量大时可能需要防盗链等措施来控制成本。
图片转换
图片转换是图片优化的常用手段，通过压缩、格式转换等方式来减少图片体积。

优点
🔍 减少请求：减少请求次数，提升访问速度。
缺点
⚠️ 定位麻烦：定位麻烦，图片大小和背景色需要一致。

📉 优势减弱：现在HTTP/2支持多路复用，雪碧图的优势减弱。

🎨 我博客正在用的方案
js
import sharp from ‘sharp’;
import { globby } from ‘globby’;
import * as fs from ‘fs-extra’;
import * as path from ‘path’;
const PATH = ‘public/assets/images//*.{jpg,png}’;

处理图片，将其转为渐进式，并替换原文件
@param {string} filePath - 输入文件的路径
*/
const updateProgressive = async (filePath)=> {
try {
const dir = path.dirname(filePath);
const ext = path.extname(filePath).toLowerCase();
const baseName = path.basename(filePath, ext);
const newFileName = ${baseName}_progressive${ext};
const tempFilePath = path.join(dir, newFileName);
if (ext === ‘.jpg’ || ext === ‘.jpeg’) {
await sharp(filePath).jpeg({ progressive: true }).toFile(tempFilePath);
} else if (ext === ‘.png’) {
await sharp(filePath).png({ progressive: true }).toFile(tempFilePath);
} else {
throw new Error(未知格式的图片: ${ext});
}
await fs.remove(filePath);
await fs.move(tempFilePath, filePath);
console.log(更新成功: ${filePath});
} catch (error) {
console.error(更新失败文件 ${filePath}:, error);
}
}

export const progressive = async () => {
const list = await globby(PATH)
return list.forEach(async (item) => {
return await updateProgressive(item);
});
};

这玩意的缺点
⚠️ 兼容性问题：目前svg，webp等格式图片是没有办法支持的。
🚧 开发复杂度：需要额外处理图片格式，且需要额外安装依赖。
总结
如果你有更好的解决方案，欢迎留言指出~

今天的文章浅谈图片优化分享到此就结束了，感谢您的阅读。

浅谈图片优化

相关推荐