网站图片优化
【摘要】
网站图片优化方法
图像压缩JPEG/JPGPNG (PNG-8 与 PNG-24)WebP
# 图像压缩
1.使用 imagemin cd进入项目根目录
npm install imagemin
2.创建一个名为 imagemin.js 的新文件，写入以下内容：
const imagemin = require('imagem...
网站图片优化方法
# 图像压缩
1.使用 imagemin
cd进入项目根目录
npm install imagemin
2.创建一个名为 imagemin.js 的新文件，写入以下内容：
-
const imagemin = require('imagemin');
-
const PNGImages = 'static/images/*.png';
-
const JPEGImages = 'static/images/*.jpg';
-
const output = 'build/images';
3.运行 node imagemin.js
# JPEG/JPG
# 优点
- 有损压缩。高质量的压缩方式：当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质
- 以 24 位存储单个图，可以呈现多达 1600 万种颜色，足以应对大多数场景下对色彩的要求,压缩前后的质量损耗不易察觉
# 使用场景
适用于呈现色彩丰富的图片
- 大的背景图
- 轮播图
- Banner图
# 缺陷
- 处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显
- 不支持透明度处理，透明图片需要召唤 PNG 来呈现
用 MozJPEG 压缩 jpeg
1.npm install imagemin-mozjpeg
2.以下内容添加到 imagemin.js 中
-
const imageminMozjpeg = require('imagemin-mozjpeg');
-
const optimiseJPEGImages = () =>
-
imagemin([JPEGImages], output, {
-
plugins: [
-
imageminMozjpeg({
-
quality: 70,
-
}),
-
]
-
});
-
optimiseJPEGImages()
-
.catch(error => console.log(error));
3.运行 node imagemin.js, 从build/images 文件夹中获取优化后的版本
# PNG (PNG-8 与 PNG-24)
# 优点
- 无损压缩高保真
- 8 位的 PNG 最多支持 256 种颜色，24 位的可以呈现约 1600 万种颜色
- 比 JPG 更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持
# 缺点
- 体积太大
# 应用场景
- 呈现小的 Logo、颜色简单且对比强烈的图片或背景等
使用 pngquant 优化 PNG 图像
1.npm install imagemin-pngquant
2.以下内容添加到 imagemin.js 中
-
const imageminPngquant = require('imagemin-pngquant');
-
const optimisePNGImages = () =>
-
imagemin([PNGImages], output, {
-
plugins: [
-
imageminPngquant({ quality: '65-80' })
-
],
-
});
-
optimiseJPEGImages()
-
.then(() => optimisePNGImages())
-
.catch(error => console.log(error));
# 将 quality 设置为 65-80 可以在文件大小和图像质量之间较好的折衷方案
# WebP
# 优点
像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身
官方介绍
与 PNG 相比，WebP 无损图像的尺寸缩小了 26％。在等效的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小25-34％。 无损 WebP 支持透明度(也称为 alpha 通道)，仅需 22％ 的额外字节。对于有损 RGB 压缩可接受的情况，有损 WebP 也支持透明度，与 PNG 相比，通常提供 3 倍的文件大小。
- 通过以无损和有损格式编码图像来提供更小的文件大小，使其成为 JPEG 和 PNG 的一个很好的替代方案
- 清晰度通常可以与 JPEG 和 PNG相提并论，而且文件大小要小得多
- 浏览器对 WebP 支持并不普遍
优化webp图像
1.npm install imagemin-webp
2.以下内容添加到 imagemin.js 中
-
const imageminWebp = require('imagemin-webp');
-
const convertPNGToWebp = () =>
-
imagemin([PNGImages], output, {
-
use: [
-
imageminWebp({
-
quality: 85,
-
}),
-
]
-
});
-
const convertJPGToWebp = () =>
-
imagemin([JPGImages], output, {
-
use: [
-
imageminWebp({
-
quality: 75,
-
}),
-
]
-
});
-
optimiseJPEGImages()
-
.then(() => optimisePNGImages())
-
.then(() => convertPNGToWebp())
-
.then(() => convertJPGToWebp())
-
.catch(error => console.log(error));
quality 设置为 85 会生成质量与 PNG 相当但小得多的 WebP 图像。
文章来源: blog.csdn.net，作者：薛定喵君，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jsxg2009/article/details/115244226
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）