前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图片请求多余代码文件请求, 给前端的性能带来了很大的困扰,那么应该如何解决呢?

零、 认识图片

  我们通常使用的图片就是gif、png和jpg了。

  其中,gif格式是比较老的图片格式,它的色彩效果最低(就是不清楚!!!),如果想要使用gif保存鲜艳图片会让你的网站看上去非常可怕。 但是gif有着不可忽视的优点体积小、有着极好的压缩效果,支持动画,并且支持透明效果,虽然这个透明没有PNG格式图片支持的强大。。。 动画选择gif没有错,如果你的图片只有单调的色彩, 没有渐变色,例如只有红蓝两色,那么选择gif就再好不过了。

  另外,PNG图片可以说是最适合网络的图片了,优点就是 无损压缩,压缩比率很高, 可渐变透明, 几乎具备所有GIF的优点, 缺点是不如JPG格式的颜色色彩丰富, 同样的图片体积也比JPG略大,但是PNG图片应该是网站设计上最为推广的,比如Google就是一个很好的例子,它的所有站点中几乎都是使用的PNG格式, 而且8位的PNG完全可以替代掉GIF。 

  各方面比较:

大小比较:通常地,PNG ≈ JPG > GIF
透明性:PNG > GIF > JPG
色彩丰富程度:JPG > PNG >GIF
 
兼容程度:GIF ≈ JPG > PNG
 
 

一、雪碧图

  即css sprites, 就是把很多小图片制作成一个大图,然后作为背景图片使用,定位即可。

  优点: 很明显: 减少了大量的http请求。

  缺点: 背景定位较为麻烦,其实不算缺点。

二、图片压缩

  图片压缩是很简单的,就是无损压缩了。

  1. 优先使用png而不是GIF
  2. 压缩png
  3. 去掉jpg的metadata
  4. 压缩gif动画
  5. 尝试使用png8
  6. 避免使用AlphaImageLoader
  7. 压缩动态生成的图像
  8. 使 favicon 更小,可缓存
  9. 使用css sprites

三、base64

  base64编码的大小比原图大小更大一些,但是可以减少http请求。

四、响应式图片

  一般我们对于图片的设定方法都是设置图片为width: 100%, 但是如果加载的图片的实际尺寸很大,而我们所需要的很小,那么不可避免的就会造成浪费, 所以这时就可以使用响应式图片。

  主要用到的属性就是 srcset 和 sizes 属性。 

  

五、延迟加载

假设我的网页很长很长,图片很多很多(比如多图慎点那种),但是我可能看了一下就没兴趣了,那是不是完全没有必要加载后面的图片了,这个时候就要有一个延迟加载的思想。

图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片(非可视区域图片使用1*1的图片占位,图片大小css控制),当页面滚动的时候,图片进入了可视区域再进行加载(修改src),这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。具体的实现方法可以看一个插件,就叫lazeload。

六、 图标字体

用过bootstrap的同学肯定对方便的fontawesome图标字体印象深刻,可以无损放大缩小,可以修改颜色,只要加个类名就可以使用图标,感觉是不是很爽

前端性能优化之优化图片 && 优化显示图片的更多相关文章

  1. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  2. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  3. css “裁剪”图片(显示图片的一部分)

    背景:朋友有一个需求,就是列表页显示的图片要做裁剪,不然不按比例缩小图片看起来就变形了.本来想好的解决办法是用PHP来生成缩略图,然而试了好几个开源缩略图类都没有一个满意的,突然想到为什么不直接用CS ...

  4. PHP上传图片,路径保存在数据库中,根据图片路径显示图片

    1.创建数据表   CREATE TABLE image( id int(4) unsigned NOT NULL AUTO_INCREMENT, name varchar(100) default ...

  5. android获取本地图片并显示图片

    import java.io.FileNotFoundException; import android.content.ContentResolver; import android.content ...

  6. android根据图片路径显示图片

    首先根据图片路径先创建一个文件path为图片路径:然后判断文件是否存在,如果存在,将图片显示出来. File file = new File(path); ImageView img = (Image ...

  7. iOS UIImageView 显示不规则图片只显示图片一部分保证图片不被压缩

    //只需如下设置imageView [picImg setContentScaleFactor:[[UIScreenmainScreen] scale]]; picImg.contentMode =  ...

  8. 利用cv与matplotlib.pyplot读图片与显示图片

    import matplotlib.pyplot as pltimport cv2 as cva=cv.imread('learn.jpg')cv.imshow('learn',a)fig=plt.f ...

  9. 小技巧,如何在Label中显示图片

    这个需求其实是有的,比如QQ聊天界面里面发送的信息,可以用label来显示文字(也可以用button显示),但是有时候用户可能会发送图片.如果能让Label遇到文字就显示文字,遇到图片就显示图片就好了 ...

  10. [AX]AX2012 R2 EP员工自助服务中的产品不能显示图片的问题

    在员工自助服务EP站点中员工可以通过Order products自助提交采购申请,在正确设置员工采购目录后会罗列出允许员工购买的产品,每个产品都可带有图片,我们可以通过Product image来为产 ...

随机推荐

  1. vmware ubuntu安装vmware tools

    vmware tools可以说是其平台虚拟机必不可少的工具,可以使母机(你的电脑)通过复制粘贴向虚拟机中传递文件信息,对我们虚拟机的使用由非常大的帮助,当然也可以通过使用共享硬盘来共享文件,但操作起来 ...

  2. 对于网站,APP开发流程的理解

    • 明确产品目标用户,目标市场 • 明确将要开发的产品面世后是要解决什么样的问题 • 梳理产品有哪些功能点,功能点如何按照模块划分 • 站在用户角度思考用户怎样使用这款产品,以故事的情景讲述用户如何使 ...

  3. PLSA的EM推导

    本文作为em算法在图模型中的一个应用,推导plsa的em算法. 1 em算法 em算法是解决一类带有隐变量模型的参数估计问题. 1.1 模型的定义 输入样本为,对应的隐变量为.待估计的模型参数为,目标 ...

  4. mvc - codefirst 数据迁移

    from :http://blog.csdn.net/xiaoyiyz/article/details/41485325

  5. Delphi XE8中Android开发有用的资源!

    一,FireMonkey Component Library在XE8帮助(topics.chm)中的位置:FireMonkey Component Library,展示了FireMonkey控件在VC ...

  6. Jmeter响应中文乱码解决办法

    JMeter当响应页面没有设置编码时,默认会从jmeter.properties配置文件中sampleresult.default.encoding的配置进行设置,默认使用ISO8859-1,在配置文 ...

  7. k8s(未完待续)

    K8s简介Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部署,调度和节点集群间扩展. 使用Kubernetes可以  自动化容器的部署和复制  随时扩展或收缩容器规模  将容器 ...

  8. python+echarts==pycharts

    Django数据可视化 pyechats http://pyecharts.org/#/zh-cn/django

  9. [AGC005C]Tree Restoring 构造

    Description ​ 给出一个数组a,要求构造一颗树,使节点x距离最远的点的距离为\(a_x\). Input ​ 第一行一个正整数NN(2≤N≤1002≤N≤100) ​ 接下来一行,有NN个 ...

  10. pip_install的安装

    1.下载get-pip.py https://pip.pypa.io/en/latest/installing/#id9 2.运行 python get-pip.py 3.python -m pip ...