网站图片优化

举报
薛定喵君 发表于 2021/06/04 00:20:08 2021/06/04
【摘要】 网站图片优化方法 图像压缩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 的新文件,写入以下内容:


    
  1. const imagemin = require('imagemin');
  2. const PNGImages = 'static/images/*.png';
  3. const JPEGImages = 'static/images/*.jpg';
  4. 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 中


    
  1. const imageminMozjpeg = require('imagemin-mozjpeg');
  2. const optimiseJPEGImages = () =>
  3. imagemin([JPEGImages], output, {
  4. plugins: [
  5. imageminMozjpeg({
  6. quality: 70,
  7. }),
  8. ]
  9. });
  10. optimiseJPEGImages()
  11. .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 中


    
  1. const imageminPngquant = require('imagemin-pngquant');
  2. const optimisePNGImages = () =>
  3. imagemin([PNGImages], output, {
  4. plugins: [
  5. imageminPngquant({ quality: '65-80' })
  6. ],
  7. });
  8. optimiseJPEGImages()
  9. .then(() => optimisePNGImages())
  10. .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 中


    
  1. const imageminWebp = require('imagemin-webp');
  2. const convertPNGToWebp = () =>
  3. imagemin([PNGImages], output, {
  4. use: [
  5. imageminWebp({
  6. quality: 85,
  7. }),
  8. ]
  9. });
  10. const convertJPGToWebp = () =>
  11. imagemin([JPGImages], output, {
  12. use: [
  13. imageminWebp({
  14. quality: 75,
  15. }),
  16. ]
  17. });
  18. optimiseJPEGImages()
  19. .then(() => optimisePNGImages())
  20. .then(() => convertPNGToWebp())
  21. .then(() => convertJPGToWebp())
  22. .catch(error => console.log(error));

quality 设置为 85 会生成质量与 PNG 相当但小得多的 WebP 图像。

文章来源: blog.csdn.net,作者:薛定喵君,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/jsxg2009/article/details/115244226

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。