前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网站图片优化

网站图片优化

作者头像
薛定喵君
发布2019-11-06 01:23:02
1.6K0
发布2019-11-06 01:23:02
举报
文章被收录于专栏:薛定喵君
  • 图像压缩
  • JPEG/JPG
  • PNG (PNG-8 与 PNG-24)
  • WebP

图像压缩

1.使用 imagemin cd进入项目根目录

代码语言:javascript
复制
npm install imagemin

2.创建一个名为 imagemin.js 的新文件,写入以下内容:

代码语言:javascript
复制
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 中

代码语言:javascript
复制
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 中

代码语言:javascript
复制
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 中

代码语言:javascript
复制
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 图像。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/07/07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 图像压缩
  • JPEG/JPG
    • 优点
      • 使用场景
        • 缺陷
        • PNG (PNG-8 与 PNG-24)
          • 优点
            • 缺点
              • 应用场景
              • WebP
                • 优点
                相关产品与服务
                文件存储
                文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档