web前端优化之图片优化

版权声明: https://blog.csdn.net/nyflxp/article/details/79462056

原文来自:codehtml

很多的前端开发者都比较关心性能的优化的问题,今天主要讲一下图片优化的见解和总结,可能很多人大神都知道我列出的知识点,那么开始整理一下图片优化的笔记吧,可能废话有点多,语言组织不到位的地方,大家多担待

每个前端网站都有可能引入很多的图片来达到酷炫或者展示的效果,有人会问?为什么非要用图片,因为有些技术上达不到的效果展示,只能用图片来代替,比如淘宝天猫京东这些商城的酷炫的创意广告图
当然我们也会用到很多的图标图片,图片越多请求次数越多,造成延迟的可能性也就越大

最开始做前端的时候,我都会把实现不了的效果切换成图片还有一些图标也会切成图片,这样就会降低前端页面展示的性能增加页面资源HTTP的请求,甚至有的页面存在几十个imghttp请求

总结优化的地方有几个地方:

  • ## 1、降低图片的大小

首先我们目前常用的图片格式有png,gif,jpg等,png又分png24和png8,关于图片的的知识点,我给大家两个网址大家可以了解一下,对于图片格式讲的很详细
http://www.cnblogs.com/xiangism/p/5311314.html
http://www.cnblogs.com/pqjzxq/p/5749304.html

我们的目的是降低图片的大小kb,有很多方法可以做,压缩图片,选择更小kb的图片格式,以达到最优的显示效果

好多人都推荐一个压缩图片的网站—智图:一个图片优化平台
用起来很简单的

现在百度一下很多在线压缩图的在线网站,比如TinyPNG:一个压缩PNG的神站

  • ## 2、选择适当的图片宽度尺寸(即响应式图片)

不管是pc还是移动端,都会有很多不同尺寸的图片,如果你做的是响应式网站和移动端的话,那么你就更需要考虑图片尺寸的选择问题了

移动端的屏幕分辨率和尺寸太多,所以就可能需要不同的尺寸加载不同尺寸的图片,这样就节省了网站的访问流量,以及页面渲染的效率
先展示现在设备的分辨率等的图

如果想查看更多的话,就去devices

响应式图片方式有哪几种,

  • ### 可以通过服务器图片资源配置命名规则来获取图片
ps:![](bgimg-320.jpg)或![](bgimg-480.jpg) 
  • ### 通过css定义来加载不同的背景bg图片
@media only screen and (max-width : 480px) {
    .img {background-image: url(bg-480.jpg);}
}
@media only screen and (max-width : 360px) {
    .img {background-image: url(bg-360.jpg);}
}
  • ### Img的srcsetsizes的方法
    这两个img属性是html5的属性,有浏览器的兼容问题
<img class="img"  src="imgbg-320.jpg"
     srcset="imgbg-320.jpg 320w, imgbg-360.jpg 360w, imgbg-480px.jpg 480w"
     sizes="(max-width: 480px) 480px, 320px">

src:当设备不支持srcsetsizes属性时,使用这个图片
srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点

sizes="[media query] [length], [media query] [length] ... "

对于srcsetsizes详解点击查看
- ### picture标签实现
通过媒体查询的方式,根据页面宽度(当然也可以添加其他参考项)加载不同图片,具体picture详情点击查看

<picture>  
    <source srcset="3.jpg" media="(min-width: 320px)">  
    <source srcset="2.jpg" media="(min-width: 480px)">  
    <img srcset="1.jpg">  
</picture> 
  • ## 3、减少HTTP的网络资源请求
  • ### CSSSprites(背景精灵图/雪碧图)
    一种网页图片应用处理方式,将一个页面涉及到的所有零星图片或者图标都包含到一张大图里面,这样就只需要加载这个一个图片,而不是很多个图片了,这样就减少了很多http的请求

如何制作精灵图?

自己通过ps制作,或者UI设计师制作的过程中,做好这个精灵图,注意图片直接的间隔,以防css操作的时候出现显示的问题

怎么使用精灵图?

利用CSS的background-imagebackground- repeatbackground-position的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置
详细查看CSSSprites
- ### csscss3制作简单的图标和动画(代替gif图片)
随着技术的发展,css3可以实现的效果越来越多,比如箭头图标,三角形,梯形等图标,或者一些阴影效果,渐变的效果,所以可以用css制作一些简单的图标,而且具有多变性

.sanjiaoxing {
    width: 0;
    height: 0;
    border-top: 2em solid #000;
    border-right: 1.8rem solid transparent;
    border-left: 1.8rem solid transparent;
}
  • ### SVG技术替换图片
    SVG 是使用 XML 来描述二维图形和绘图程序的语言,支持透明,缩放,动画
    什么是SVG?(摘自w3cschool)
    SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    SVG 用来定义用于网络的基于矢量的图形
    SVG 使用 XML 格式定义图形
    SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
    SVG 是万维网联盟的标准
    SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
  • html5 canvas绘画图形

    目前canvas应用很多,它可以使用脚本javascript来绘制各种图表、动画等
    点击查看更多html5 canvas

  • 4、字体图库代替图标

随着技术的更新和浏览器的更新,字体图库去代替一些图标我认为还是极好的,使用字体图库你不仅可以改变大小,而且还可以改变颜色
大家比较熟知的的字体图库有很多,这里就说一个吧,font-awesom,截图看看他的好处吧

有了他,根本不担心图标的问题了,很简单的使用,只需要引入之后,按照规则写html标签即可

其实咱们也可以自定义咱们的图标选择,毕竟有的图标库我们用不到这么多,因此咱们可以自定义咱们的字体图标库

目前我认为毕竟好的就是 Iconfont ,最近的几个react项目,我都在使用这个来定制自己的一些图标库,用起来也很简单
- ##### 1、搜索自己想要的图标

2、在搜索结果页找到自己想要的图标,然后加入购物车

3、找完自己的图标之后点开购物车,会有一个添加到项目,点击它,如果你有项目就可以选择,如果没有就创建一个项目,点击确定之后即可
4、在个人中心找到自己的项目,选择方式之后,点击下载即可使用

使用方式在这里就不多说了,和font-awesom基本上差不多的

  • ## 5、微信小程序怎么使用字体图标

直接引入字体也可以,但是要把字体文件放在服务器上,并且允许跨域的情况下,在css文件里面远程地址引入字体文件即可

@font-face {font-family: "iconfont";
  src: url('https//examle.com/font/iconfont.eot?t=1494498562077'); /* IE9*/
  src: url('https//examle.com/font/iconfont.eot?t=1494498562077#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('https//examle.com/font/iconfont.woff?t=1494498562077') format('woff'), /* chrome, firefox */
  url('https//examle.com/font/iconfont.ttf?t=1494498562077') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('https//examle.com/font/iconfont.svg?t=1494498562077#iconfont') format('svg'); /* iOS 4.1- */
}

如果不想放在服务器上,还有一种方法可以使用,这个时候我们需要一个工具来辅助一下 transfonter,将解压出来的ttf字体文件转化成base64格式

生成的文件里面替换css里面的代码

@font-face {
    font-family: 'iconfont';
    src: url(data:font/truetype;charset=utf-8;base64,这里省略了) format('truetype');
    font-weight: 500;
    font-style: normal;
}

使用和直接引入字体图标是一样的

  • ## 6、图片延迟加载(懒惰加载)(js/lazyload.js)

有个页面会很大很长很多的图片素材,这样全部加载就会变的很慢,因此需要修改一下加载方案,只加载窗口内的图片,我们大家浏览网站的时候会经常看到会有默认图,图片加载成功之后会替换默认图
比如常用的lazyload.js用于图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的,。
- 能有效的提高页面加载速度
- 有时候可以帮助减少服务器负载

用法:lazyload.js

还有一些优化的方式在上一篇文章已经列了,这里就不多说了

如有没有说到的地方,麻烦大家指出

后续抽时间会接着做笔记,大家共同学习巩固分享

前端蜗牛blog传送:codehtml

阅读更多
换一批

[百度分享]前端优化图片优化自动化

10-26

[b]前端图片优化介绍[/b]rn随着前端页面越来越复杂,尤其是一些社区型的页面中,图片成了页面中不可或缺的资源,并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。rn[img=http://images.csdn.net/upimgs/01/1111111.jpg][/img]rn由于图片是二进制文件,并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式,在不降低图片质量的情况下去掉图片里的元数据信息。rn[b]常用的一些优化方案[/b]rn目前图片优化使用比较多的主要是下面几种方式:rn选择合适的图片格式,如:png代替gif,尽量使用png8rnpng使用pngout优化,jpg使用jpgtranrn通过yahoo的smush进行rn通过google的page speed插件进行rn[img=http://images.csdn.net/upimgs/01/222.png][/img]rn这些优化方案虽然结果都能将图片优化,但需要比较多的人工操作。如使用smush,先要上传文件,优化完了后还要下载文件。在项目时间限制或者改动很频繁的情况下很多时候就把图片优化这一非常重要的优化步骤给忽略了。rn那如何尽量减少人工操作带来的麻烦和不确定因素呢?rn如果在前端模块编译的时候,有图片自动优化的功能,上线前模块编译的时候得到就是优化后的图片,开发人员完全不用管图片优化了,但又不影响线上图片优化的结果。rn如何结合一些工具做到图片优化完全自动化呢?先要考虑目前开发中经常用到的图片格式。rn[b]图片格式[/b]rn开发中经常用到的图片格式主要有如下几种:rn不透明的gif,全透明的gif,动画gifrn不透明的png,全透明的png,半透明(alpha透明)的pngrnjpg图片rn对于全透明的png,ie6要通过下面的filter进行hack。rn[img=http://images.csdn.net/upimgs/01/333.png][/img]rn对于alpha透明的png,ie6下必须使用png24,目前还没有找到ie6下hack alpha透明png8的方式,如果有哪位大拿对这个有解决方案,麻烦告诉我。rn经过筛选和优化原则要满足上面的图片格式的条件,选择的软件如下:rn动画gif使用gifsiclernpng使用pngcrushrnjpeg使用jpegtranrnrn[b]软件安装[/b]rn需要安装imagmagick, gifsicle, jpegtran, pngcrush,安装脚本如下:rnrn01 #!/bin/shrn02 #安装imagemagickrn03 wget ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.6.4-10.tar.gzrn04 tar zxvf ImageMagick-6.6.4-10.tar.gzrn05 cd ImageMagick-6.6.4-10rn06 ./configurern07 makern08 make installrn09 cd ../rn10 #安装gifsiclern11 wget http://www.lcdf.org/gifsicle/gifsicle-1.60.tar.gzrn12 tar zxvf gifsicle-1.60.tar.gzrn13 cd gifsicle-1.60rn14 makern15 make installrn16 cd ../rn17 #安装jpegtranrn18 wget http://jpegclub.org/droppatch.v8.tar.gzrn19 tar zxvf droppatch.v8.tar.gzrn20 sudo cp ./jpegtran /usr/local/binrn21 #安装pngcrushrn22 wget http://sourceforge.net/projects/pmt/files/pngcrush/00-1.7.13/pngcrush-1.7.13.tar.gz/downloadrn23 tar zxvf pngcrush-1.7.13.tar.gzrn24 cd pngcrush-1.7.13rn25 sudo makern26 sudo cp ./pngcrush /usr/local/binrnrn将上面的代码拷贝到一个文件如:image.s,执行dos2unix image.sh,然后执行sh image.sh安装软件rn[b]图片优化[/b]rn图片优化的代码如下:rn01 #/bin/bashrn02 OPTI_PATH=$1rn03 cd $OPTI_PATH;rn04 CURRENT_PATH=$PWD;rn05 SH_LIST='jpegtran gifsicle pngcrush';rn06 COMMOND_EXIST=1rn07 #先检查相关的软件是否已经正确安装rn08 for ITEM in $SH_LISTrn09 dorn10 SH_EXIST=`which $ITEM 2>/dev/null | wc -l`;rn11 if [[ $SH_EXIST == '0' ]]; thenrn12 echo "$ITEM commond not exist";rn13 COMMOND_EXIST=0;rn14 firn15 donern16 if [[ "COMMOND_EXIST" == "0" ]]; thenrn17 exit 1;rn18 firn19 #优化jpgrn20 JPG_FILES=`find . -type f -name "*.jpg" -or -name "*.jpeg"`;rn21 for FILE in $JPG_FILESrn22 dorn23 OUTPUT_FILE="$FILE.png"rn24 jpegtran -optimize -progressive -copy none -outfile $OUTPUT_FILE $FILE > /dev/nullrn25 mv $OUTPUT_FILE $FILErn26 donern27 #优化gifrn28 GIF_FILES=`find . -type f -name "*.gif"`;rn29 for FILE in $GIF_FILESrn30 dorn31 DEPTH=`identify $FILE | wc -l`;rn32 if [[ "$DEPTH" == "1" ]]; thenrn33 OUTPUT_FILE="$FILE.png";rn34 OUTPUT_FILE_LEN=$#OUTPUT_FILE-8;rn35 NEW_FILE_SUB=$OUTPUT_FILE:0:$OUTPUT_FILE_LEN;rn36 NEW_FILE="$NEW_FILE_SUB.png"rn37 convert $FILE $NEW_FILE > /dev/null;rn38 elsern39 OUTPUT_FILE="$FILE.gif"rn40 gifsicle -o $OUTPUT_FILE $FILE > /dev/nullrn41 mv $OUTPUT_FILE $FILErn42 firn43 donern44 #优化pngrn45 PNG_FILES=`find . -type f -name "*.png"`;rn46 for FILE in $PNG_FILESrn47 dorn48 OUTPUT_FILE="$FILE.png"rn49 pngcrush -rem alla -brute -reduce $FILE $OUTPUT_FILE > /dev/nullrn50 mv $OUTPUT_FILE $FILErn51 donern52 cd $CURRENT_PATH;rn将上面的代码保存如:image-optimation.sh,执行dosunix image-optizimation.sh,rn然后执行sh image-optizimation.sh imgdir 就可以将imgdir目录下的图片进行优化,上线的时候只要拷贝优化后的图片就可以了。rn[b]优化结果[/b]rn以下是前端一个模块的优化前后的文件大小比较:rn[img=http://images.csdn.net/upimgs/01/555.png][/img]rn优化后,图片大小减小了66.6K,优化率达到35.2%。rn从数据中可以发现,png图片优化还是非常多的,也是优化准则里尽量使用png图片的原因。rn其他优化工具rn除了上面用到的图片优化工具,还有其他很多可以优化图片的工具。但各种各样的小问题,最终并没有使用它们。rnpngrewriternoptpngrnpngoutrnpngquantrn参考文档rnhttp://www.slideshare.net/stoyan/image-optimization-for-the-web-at-phpworks-presentation 图片优化方面的pptrnhttp://www.smushit.com/ysmush.it/ smushrnhttps://github.com/thebeansgroup/smush.py smush的python实现rnhttp://code.google.com/speed/page-speed/docs/payload.html#CompressImages google关于图片优化的文档rnhttp://www.welefen.com/fcp-introduce.html FCP前端编译平台里包含了图片优化功能rn rn

没有更多推荐了,返回首页