专栏首页前端之巅关于前端中图片的性能优化方案

关于前端中图片的性能优化方案

什么是前端性能优化?

什么是前端2-5-8原则?

所谓的“2-5-8原则” , 简单说 , 就是当用户能够在2秒以内得到响应时, 会感觉系统的响应很快 ;当用户在2-5秒之间得到响应时 , 会感觉系统的响应速度还可以 ;当用户在5-8秒以内得到响应时 , 会感觉系统的响应速度很慢 , 但是还可以接受 ;而当用户在超过8秒后仍然无法得到响应时 , 会感觉系统糟透了 , 或者认为系统已经失去响应 , 而选择离开这个Web站点 , 或者发起第二次请求 。

如何性能优化?

优化的方式自然有很多种,今天呢,介绍一下图片的优化方法。

图片的文件形式以及应用场景

JPEG (Joint Photographic Experts Group)

JPEG 是一种大家最常见的图片文件形式了。

它是一种"联合图像专家小组是一种针对彩色照片而广泛使用的有损压缩图形" .

介绍:栅格图形。常用文件扩展名为 .jpg,也有 .jpeg、.jpe。JPEG 在互联网上常被应用于存储和传输照片。

我们一般在网络状态不好的时候,会看到图形从上到下一条一条线的慢慢往下加载,一般这种图片就是JPEG 的格式的。

适用场景:色彩十分鲜艳的图片、彩色图、大焦点图、banner以及结构复杂的图形。
不适用场景:线条图形和文字、图形图标,因为它的压缩算法不是很支持此类图片;并且不支持透明度。

PNG(Portable Network Graphics)

便携式网络图形是一种无损压缩的位图图形格式,支持索引、灰度、RGB 三种种颜色方案以及 Alpha 通道等特性。

介绍:栅格图形。PNG 最初是作为替代 GIF 来设计的,能够显示 256 色,文件比 JPEG或者 GIF 大,但是 PNG 非常好的保留了图像质量。支持 Alpha 通道的半透明和透明特性。最高支持 24 位彩色图像(PNG-24)和 8 位灰度图像(PNG-8)。
适用场景:纯色、透明、线条绘图,图标;边缘清晰、有大块相同颜色区域;颜色数较少但需要半透明。
不适用场景:有网络不好的状态加载较慢(因为是无损存储格式)

GIF (Graphics Interchange Format)

图像互换格式是一种位图图形文件格式,以 8 位色(即 256 种颜色)重现真彩色的 图像,采用 LZW 压缩算法进行编码

介绍:栅格图形。支持 256 色;仅支持完全透明和完全不透明;如果需要比较通用的动画,GIF 是唯一选择。
适用场景:动画,图标。
不适用场景:每个像素只有 8 比特,不适合存储彩色图片。

Webp

Webp 是一种现代图像格式,可为图像提供无损压缩和有损压缩,这使得它非常灵 活。由 Google 在购买 On2 Technologies 后发展出来,以 BSD 授权条款发布。

介绍:优秀算法能同时保证一定程序上的图像质量和比较小的体积;可以插入多帧,实现动画效果;可以设置透明度;采用 8 位压缩算法。无损的 Webp 比 PNG 小 26%,有损的 Webp 比 JPEG 小 25-34%,比 GIF 有更好的动画。
适用场景:半透明图像、图形图案等
不适用场景:彩色的图片(因为最多处理256色)

好了,上面我们已经了解了各种图片的格式,下面就让我们来看一看优化的方案吧。

优化方案

1.使用工具进行图片压缩

压缩 PNG图片

工具:node-pngquant-native

优点:跨平台,压缩比特别高,压缩png24非常好。

官方文档:https://www.npmjs.com/package/node-pngquant-native

使用node安装:

npm install node-pngquant-native

接下来,给大家实际操作一下


压缩JPEG图片

工具:jpegtran

优点:同样也是跨平台,但是压缩的比率只有80-90%

官网:http://jpegclub.org/jpegtran/

安装方法:npm install –g jpegtran

使用方法:

jpegtran -copy none -optimize -outfile  out.jpg in.jpg

这是将'big.jpg' 变为'small.jpg'

下面让我们来看一下示例

压缩 GIF图

工具:Gifsicle

通过改变每帧比例,减小 gif 文件大小,同时可以使用透明来达到更小的文件大小,目前公认的解决方案。

安装:http://www.lcdf.org/gifsicle/

使用方式:

优化级别设置为不小于 2,1 的话基本不压缩
gifsicle --optimize=3 -o out.gif in.gif
将透明部分截去 :
gifsicle --optimize=3 --crop-transparency -o out.gif in.gif

2.逐步加载图片

这里简单介绍一下一些工具的使用方法

使用LQIP(Low Quality Image Placeholders) 工具

安装:npm install lqip

源码: https://github.com/zouhir/lqip-loader

在 index.js中写入以下内容:

const lqip = require('lqip');

//将文件路径
const file = './in.png';

//将输入的图片转为base64
lqip.base64(file).then(res => {
    console.log(res); 
});

//color
lqip.palette(file).then(res => {
    console.log(res);
    //这里输出的是base64的图片地址
});

使用node index.js运行一下这个文件,可以输出图片的base64格式。

下面是原图和经过lqip处理后的比较

使用 SQIP(SVG Quality Image Placeholders)

介绍:基于 SVG 的图像占位符(SVG Quality Image Placeholders)

安装:

npm install sqip

源码:https://github.com/axe312ger/sqip

使用方法:

在 index.js中写入以下代码

const sqip = require('sqip');

const result =  sqip({
    filename: './in.png',
    numberOfPrimitives: 10 //可根据不同应用场景设置大小
});

console.log(result.final_svg);

在本地执行 node index.js 后,将会输出一串的<svg>标签,将其直接放入HTML文件中即可。非常的方便

下面是两个图片的对比:

我们可以看到,这个方法的图片会比lqip稍微清晰那么一点点。

在实际使用中,我们经常会看到网页会有这样的模糊图片效果,一般都是在网页中先加载模糊的base64图片或者是svg图标图,然后再加载高清大图,这样会给用户更好的体验。

3.响应式图片

• JavaScript 绑定事件检测窗口大小

• CSS 媒体查询

@media screen and (max-width:640px) {
  my_image{ 
    width:640px; 
   }
 }

• img 标签属性

<img srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x"
src=“img-960w.jpg” alt=“img”> (x 描述符:表示图像的设备像素

思考:我们真的需要图片吗?

web font 图标代替图片

精灵(雪碧)图

使用DATA URL 代替图片

SVG格式图标

看了以上这些,你是否还会接着使用笨重繁琐的图片呢?

总结:以上就是关于前端静态资源中的图片资源的优化方案,希望大家看完以后能够有所收获,大家也可以动手去尝试。

参考:极客时间《前端全链路性能优化》

本文分享自微信公众号 - 一起学前端(xueqianduan),作者:别加香菜

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在前端中理解MVC服务之 Angular篇(完结)

    本文是该系列中的第三篇,旨在了解 MVC 体系结构如何创建前端应用程序。目的是了解如何构建前端应用程序。这是通过从使用 JavaScript 作为脚本语言的网页...

    学前端
  • 分享八个免费的Vue图标库,轻松修饰你的应用

    图标,是能够吸引访问者注意力并提供更好的感官的好方法。随着Vue的兴起,更多的Vue库正在兴起,以下就为大家推荐几个Vue的图标库。

    学前端
  • 炫酷的纯CSS3点选框切换动画

    这里我们可以看到,不论是从A 跳转到B ,还是从A 跳转到C都能够实现,并且其中的幅度大不相同,我们可以从中看出

    学前端
  • 24道Mybatis常见面试题总结及答案!

    第1种: 通过在查询的sql语句中定义字段名的别名,让字段名的别名和实体类的属性名一致。

    用户5546570
  • 相似图片搜索的原理

    你输入网片的网址,或者直接上传图片,Google就会找出与其相似的图片。下面这张图片是美国女演员Alyson Hannigan。

    bear_fish
  • 相似图片搜索的原理

    上个月,Google把"相似图片搜索"正式放上了首页。 你可以用一张图片,搜索互联网上所有与它相似的图片。点击搜索框中照相机的图标。 ? 一个对话框会出现。 ?...

    ruanyf
  • 相似图片搜索的原理

    上个月,Google把”相似图片搜索”正式放上了首页。 你可以用一张图片,搜索互联网上所有与它相似的图片。点击搜索框中照相机的图标。 ? 一个对话框会出现。 ?...

    wangxl
  • WordPress发布文章同步到新浪微博失败的问题解决与分享

    张戈博客很久之前分享过一篇 WordPress 发布文章同步到新浪微博 的文章,但经常有站长留言反馈同步失败,我一直觉得是代码部署问题。 最近很长一段时间,张戈...

    张戈
  • 屌丝的眼泪,因为错过的初恋,才搞清楚PNG图片压缩原理

    因为之前在qq空间有太多的互动,所以qq推荐好友里面经常推荐我俩互相认识。。。。谜之尴尬

    Android技术干货分享
  • 航班Flight(SPFA+dp)- HDU 3499

    Recently, Shua Shua had a big quarrel with his GF. He is so upset that he decide...

    ACM算法日常

扫码关注云+社区

领取腾讯云代金券