开发者社区> Star时光> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端性能优化-图片

简介: 前端性能优化-图片
+关注继续查看

JPEG

联合国图像专家小组是一种针对彩色照片而广泛使用的压损图形格式
介绍:栅格图形,常用文件扩展名为.jpg,也有.jpeg,.jpe,jpeg在互联网上常被应用于存储和传输照片

不适合:线条图形和文子,图标图形,因为他的压缩算法不在这些类型的图形,并且不支持透明

非常合适:颜色丰富的照片,彩色图大焦点图,通栏banner图,结构不规则的图形

PNG

便携式网络图形是一种无压缩的图形格式,支持索引,灰度,RGB,三种颜色

介绍:栅格图像,PNG最初作为代替GIF来设计的,能够显示256色,文件比JPEG大,但是PNG非常好的保留图像的质量。支持Alpha通道半透明和透明特性。最高支持24位彩色图像和8位灰度图像

不合适:由于无损存储,彩色图像体积太大,所以不合适

合适:纯色,透明。线条绘图,图标,边缘清晰,有大块相同颜色区域,颜色数较少但需要半透明

GIF

图像互换格式是一种位图形文件格式,以8位色(既256中颜色)重现真彩色的图图像,才有LZW雅俗算法进行编码

介绍:栅格图像,支持256色,仅支持完成透明和完全不透明;如果需要比较通用的动画,GIF是唯一的选择

不合适:每个像素只有8比特,不适合存储彩色图片

合适:动画,图标

webp

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

介绍:优秀算法能同时保证一定程度上的图像质量和较小的体积,可以插入多帧,实现动画效果,可以设置透明度,采用8位压缩算法,无损的webp比png小26%,有损的webp比JPEG小25-34%,比GIF有更好的动画

不合适:最多处理256色,不适合彩色图片

合适:适用于图行和半透明图像

用工具进行图片压缩

压缩png

  • 使用node-pngquant-native
  • 跨品台,压缩比高,
  • 安装 cnpm install node-pngquant-native cnpm install jdf-png-bative
  • 使用方法

    var pngquant = reuqire('node-pngquant-native')
    var fs = require('fs')
    fa.readFile('图片地址',function(err,buffer) {
        if(err) throw err
        var resBuffer = pngquant.option({}).compress(buffer)
        fs.writeFile('输出图片名称',resBuffer,{
            flags:'wb'
        },function(err){})
    })

    压缩jpg

    • 使用jpegtran
    • 跨品台,有linux,mac,windows的解决方案
    • 安装 cnpm i jpegtran -g
    • 使用方法

      jpegtran -copy none -optimize -outfile 压缩之后图片 in 要压缩图片
  • 压缩gif

    • Gifsicle 通过改变每帧的比例,减少gif文件大小,同时可以有使用透明来达到更小文件大小,
    • 使用方式

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

响应式图片

  • javascript绑定事件监测窗口大小
  • CSS媒体查询

    @media screen and (max-width:640px) {
        my_images{width:640px}
    }
    • img标签属性
    <img srcset="img-320w.jpg,img-640w.jpg 2x,img-960.jpg 3x" src="img-960w.jpg" ></img>
    x描述符表示图像的设备像素比

代替图片

  • 使用Data URI代替图片
  • web Font代替图片
  • 采用Image spritinh(雪碧图)

逐步加载图片

  • 使用LQIP
  • 低质量图像占位符
  • 安装 cnpm install lqip

    使用方法

    const lqip = require('lqip')
    
    const file = './1_govern66.jpg'
    lqip.base64(file).then(res => {
        console.log(res);
    })
    
    lqip.palette(file).then(res => {
        console.log(res);
    })

    通过运行node 会把图片的base64位打印出来,

image-20200426094615261.png

  • 使用SQIP
  • 基于SVG的图像占位符

    • 安装cnpm install sqip
    • 使用方法

      const sqip = require('sqip')
      
      const result = sqip({
          filename: './1_govern66.jpg',
          numberOfPrimitives: 10
      })
      console.log(result.final_svg);
    • 通过运行node打印的结果是把图片转换成SVG的格式

image-20200426095107387.png

以后就是常见的前端对图片的优化方案

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端性能分析优化
分析问题 我们并不仅仅关注页面资源的解析和展示响应时间,而是要关注总时间;我们进行web前端性能测试的目的是计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间等指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此结果的基础上,给出一定的优化建议和解决方案,从而提升用户体验。
1736 0
前端css性能优化
1. 避免使用@important 外部的css文件中使用@important会使得页面在加载时增加额外的延迟。最好使用link   2. 避免使用css表达式(表达式可能会造成极大的计算量)   3. 避免通配选择器 在初期使用*{margin:0;padding:0},以此来消除标签的默认布局和不同浏览器的对同一个标签的不同的渲染。
860 0
前端性能优化系列 | 图像优化(上)
图片在各大网站随处可见,因为图片的表述比文字更加直观,所以图片是网站最重要的要素之一。图片相对其他文件又很大,页面的加载速度很大程度上取决于图片的加载速度,所以我们要对图片进行优化,以此加快页面加载速度,提升用户体验。 图片的优化可以分为两个方面:图像的选取和使用,加载和显示。本文主要讨论从图片的选取和使用来进行性能的优化,下一篇文章来介绍图片的加载优化。
29 0
前端性能优化系列 | 图像优化(下)
图片在各大网站随处可见,因为图片的表述比文字更加直观,所以图片是网站最重要的要素之一。图片相对其他文件又很大,页面的加载速度很大程度上取决于图片的加载速度,所以我们要对图片进行优化,以此加快页面加载速度,提升用户体验。 图片的优化可以分为两个方面:图像的选取和使用,加载和显示。本文主要讨论从图片的选取和使用来进行性能的优化,下一篇文章来介绍图片的加载优化。
30 0
图片缓存优化
Android Bitmap 全面解析(一) 加载大尺寸图片 ... http://www.eoeandroid.com/thread-331669-1-1.html Android Bitmap 全面解析(二)加载多张图片的缓存处理 .
588 0
前端性能优化-DNS解析优化
前端性能优化-DNS解析优化
71 0
前端性能优化实战(先导篇)
You can&#x27;t manage what you can&#x27;t measure. —— Peter Drucker度量引语中提到了 彼得·德鲁克 的一句话,“一件事如果你无法衡量它、你就无法管理它”,性能同样如此。如果没有一个准确的方案来对性能进行度量,那优化就无从谈起。那么对于我们来说,哪些指标是可以用来对页面性能、用户体验进行度量的呢?我会从如下几个角度
788 0
优化 - 前端篇
优化 - 前端篇
17 0
+关注
7
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载