您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:web品质优化,谈谈web上各样图片选

新葡亰496net:web品质优化,谈谈web上各样图片选

发布时间:2019-08-31 16:18编辑:新葡亰官网浏览(192)

    Web质量优化:图片优化

    2014/12/20 · JavaScript · 图片, 属性优化

    原稿出处: wizcabbit的博客   

    HTTP Archieve有个总括,图片内容已经占到了网络内容总数的62%,约等于说超过二分之一的流量和时间都用来下载图片。从性质优化的角度看,图片也绝对是优化的火爆和要紧之一,GooglePageSpeed大概Yahoo的14条品质优化法则无不把图片优化作为第一的优化花招,本文覆盖了Web图片优化的满贯,从着力的图片格式选用、到未有被广大援救的响应式图片均持有谈起。

    Google Web Fundamentals的传教笔者很欢跃:

    图片优化既是一门艺术,也是一门科学,图片优化是一门艺术,是因为单个图片的回降空中楼阁最佳的特定性方案,而图片优化之所以是一门科学,是因为非常多开拓得很美丽好的办法和算法能够显明减小图片的轻重缓急。要找到图片的最优设置,供给依照许多维度举行认真解析:格式工夫、编码数据内容、像素尺寸等。

    传送门:跳过理论直达自动优化图片 点这里

    新葡亰496net 1

    在网页上海大学多有图片构成,也正是说超越八分之四的流量和时间都以用来下载图片。从质量优化的角度看,图片也断然是优化的火热和注重之一。

      web中承载消息的严重性措施正是图片与文字了,以下就是对一些web图片格式的优劣点进行综合。

    真正要用图片吗?

    要落实内需的作用,真的需求图片吗?那是率先要问本人的难题。浏览器和Web规范的升华速度十分的快,记得数年前作者在用微软Silverlight 1.0写录像播放器的时候,中文还不能够使用自定义字体呈现,所以那时候写了多数糟糕的代码把须求的文字在服务器上生成图片并缓存起来。顾客下载起来相当慢,寻找引擎也统统不可能搜索那个文字。

    然而以后不平等了,相当多特效(渐变、阴影、圆角等等)都足以用纯粹的HTML、CSS、SVG等加以落到实处,实现那个效应少则一身数行代码,多则加载额外的库(一张普通的相片比特别庞大的效应库也大了非常多)。这么些功效不独有需求的空中十分的小,並且在多配备、多分辨率下都能很好的做事,在低端浏览器上也足以达成较好的效果降级。因而在存在备选手艺的气象下,应该率先选拔这一个技艺,独有在不得不选拔图片的时候才踏入真正的图纸。

    图片格式的选料

      1、GIF

    安不忘危能力

    • CSS效果、CSS动画。提供与分辨率毫无干系的意义,在其余分辨率和缩放等级都得以体现得老大清晰,占用的半空中也相当小。
    • 互连网字体。今后连过多Logo库皆以用字体魄局提供,保持文字的可寻觅性同不常常间扩大展现的体裁。

    前端程序猿最佳能(CANON)和设计员、产品经营保持联系,帮忙她们精通到什么样的遵守相比较“简洁、高效、可体贴”,终归对于CSS来说改造圆角矩形的Radius能够实时看到效果,用图片的话至少要重复生成图片、切图并替换能源。Retina、高分辨率显示屏、多尺寸的设备,这个都加速了非图片特效的迈入,想想在高分辨率荧屏下Windows 7的惨重,就掌握原生的图形财富绝对不是相当多。

    若果效果实在须求图片来表现,那么选拔图片格式是优化的首先步。咱们平常听到的用语包涵矢量图、标量图、SVG、有损压缩、无损压缩等等,大家首先表达各个图片格式的特点

      GIF图是比较古老的web图片格式之一,能够追溯到一九八六,差十分的少具有的浏览器都支持这一种格式,老有老的功利嘛。GIF是一种索引色形式图片,所以GIF每帧图所表现的水彩最多为256种。GIF能够扶助动画,也能支撑背景透明,这一点连古老的IE6都帮忙,所以在原先想要在类型中应用背景透明图片,有部分方案正是生成GIF图片。GIF与JPEG、PNG比较,在日常情状下真的容量一点都不大。但是当中假设放入了十足多帧的图纸,那么或许就不是这种情形了。今后互联网上的GIF能够说是爆炸式的再增高,明显越来越多的在与她的三个特征:帮衬动画与包容性好。短处便是:色彩显示度非常不够丰硕。

    图片格式的选料

    譬喻效果的确必要图片来展现,那么选择图片格式是优化的率先步。大家经常听到的辞藻包蕴矢量图、标量图、SVG、有损压缩、无损压缩等等,大家率先表明各样图片格式的脾气

    图片格式 压缩方式 透明度 动画 浏览器兼容 适应场景
    JPEG 有损压缩 不支持 不支持 所有 复杂颜色及形状、尤其是照片
    GIF 无损压缩 支持 支持 所有 简单颜色,动画
    PNG 无损压缩 支持 不支持 所有 需要透明时
    APNG 无损压缩 支持 支持 Firefox
    Safari
    iOS Safari
    需要半透明效果的动画
    WebP 有损压缩 支持 支持 Chrome
    Opera
    Android Chrome
    Android Browser
    复杂颜色及形状
    浏览器平台可预知
    SVG 无损压缩 支持 支持 所有(IE8以上) 简单图形,需要良好的放缩体验
    需要动态控制图片特效

    当中APNG和WebP格式出现的较晚,从没被Web规范所采取,独有在一定平台或浏览器情形得以预感的图景下加以运用,就算均能够在不援救的条件中较好的作用降级,但本节暂不商讨那三种格式。图片格式接纳进程如下:

    新葡亰496net 2

    图片格式       压缩方式         发光度       动画        浏览器包容                                                           适应场景

    JPEG         有损压缩          不帮忙      不支持          全部                                                        复杂颜色及形状、特别是相片

    GIF            无损压缩          协理         援助               全数                                                            简单颜色,动画

    PNG           无损压缩          扶助        不辅助             全部                                                              需求透明时

    APNG         无损压缩         扶助         帮忙       Firefox 、Safari、iOS Safari                             必要半透明效果的卡通片

    WebP         有损压缩         协助         支持     Chrome、Opera、Android、Chrome、Android、Browser       复杂颜色及形状浏览器平台可预见

    SVG           无损压缩         帮助        协助        全体(IE8以上)                                    轻巧图形,必要能够的放缩体验须要动态调整图片特效

      2、JPEG、JPG

    水彩充足的肖像,JPG是通用的挑选

    • 人眼的构造很吻合查看JPG压缩后的照片,可以足够的不经意并在脑中补齐细节
    • JPG在压缩率不高时保留的底细仍旧不错的
    • WebP能够比JPG减少30%的体积,但目前包容性非常差

    颜色丰盛的照片,JPG是通用的采纳

    人眼的组织很合乎查看JPG压缩后的相片,能够丰盛的大体并在脑中补齐细节

    JPG在压缩率不高时保留的内部境况依然不错的

    WebP能够比JPG减少30%的体积,但目前包容性非常糟糕

      经常大家大部分观察的静态图基本都以这种图片格式。这种格式的图纸能比较好的表现各个色彩,主要在减少的时候集会场全数失真(首若是缩减时,会在细节上把相邻的片段色彩给同化掉),也正因为这么,培育了这种图片格式容量的轻量。格式被各中年岁至期頣弱病残的浏览器包容,可是不接济背景透明与动画片。平时web上的广告图、相片、特大背景图、轮播图等等一些大图场景中,都适用这一个。

    一经急需较通用的动画,GIF是无与伦比可用的挑三拣四

    • GIF援助的水彩范围为256色,何况仅帮衬完全透明/完全不透明
    • GIF在突显颜色丰盛的动画片时只怕出现颜色不全、边缘锯齿等主题素材

    假如需求较通用的卡通片,GIF是独一可用的挑选

    GIF支持的水彩范围为256色,况兼仅辅助完全透明/完全不透明

    GIF在突显颜色丰盛的动画时恐怕出现颜色不全、边缘锯齿等主题材料

      3、PNG

    要是图片由正规的几何图形组成,或要求动用程序动态调节其出示特效,能够设想SVG格式

    • SVG是利用XML定义的矢量图形,生成的图片在各样分辨率下均可随性所欲放缩
    • SVG中得以经过JavaScript等接口自由转移图片特效,能够做到个中有的因素的猖狂旋转、移动、转换颜色等

    若果图片由专门的学问的几何图形组成,或须求使用程序动态调控其出示特效,可以虚拟SVG格式

    SVG是使用XML定义的矢量图形,生成的图形在各类分辨率下均可自由放缩

    SVG中能够透过JavaScript等接口自由调换图片特效,能够实现当中一部分成分的自由旋转、移动、转换颜色等

      PNG格式是有三种版本的,分别为PNG-8,PNG-24,PNG-32,全体那些本子都不帮衬动画的。PNG-8跟GIF类似的属性是相似的,都是索引色方式,并且都帮助背景透明。绝相比较GIF格式好的风味在与背景透明时,图像边缘未有啥样噪点,颜色展现更理想。PNG-24其实正是无损压缩的JPEG。而PNG-32就是在PNG-24的根底上,增添了反射率的支持。PNG格式在老浏览器IE6以及以下,PNG-8折射率的扶助度不是很好,PNG-32的折射率基本不扶助。正因为那样,在此以前有贰个js插件,特意应对IE6这种BUG,首假如用IE6里的滤镜来再一次渲染图片达到透明.随着一代的升华,PNG也想更进一步,也想帮忙动画。所以,有人生产了APNG(Animated PNG)格式图片。从字面上驾驭,正是会动的PNG图片,然则这一个本事达成上与PNG开辟小组思想不合,未有取得管用推广。到前段时间,也就有Blink内核的浏览器(代表浏览器:火狐)有相比较好的支撑,另外的就得不到谈到了。

    假使急需分明的体现颜色丰盛的图形,PNG相比好

    • PNG-8能够显得256种颜色,但亦可同期帮忙256阶透明,因而颜色数非常少但须要半透明的气象(如微信动画大表情)能够设想PNG-8
    • PNG-24能够来得真彩色,但不扶助透明,颜色丰裕的图纸推荐使用(如显示屏截图、分界面设计图)
    • PNG-32能够来得真彩色,同一时候扶助256阶透明,效果最佳但尺寸也最大

    如果须要显著的显得颜色丰裕的图片,PNG比较好

    PNG-8能够展现256种颜色,但亦可同一时间补助256阶透明,因此颜色数很少但供给半透明的景观(如微信动画大表情)能够设想PNG-8

    PNG-24能够展现真彩色,但不支持透明,颜色丰盛的图样推荐使用(如荧屏截图、分界面设计图)

    PNG-32能够显示真彩色,同期辅助256阶透明,效果最佳但尺寸也最大

    优化jpg和png

       工具                               用途

    jpegtran                    优化JPG图片

    OptiPNG                  无损PNG优化

    AdvPNG                  无损PNG优化

    PNGQuant              有损PNG优化

      4、webP

    图片尺寸的选择

    尺寸,曾经是最无需研讨的话题,但自从Retina出现之后世界就变得复杂多了。关于移动道具上的像素和尺寸,打开说充裕写一篇杂文,笔者提出想详细询问的同窗参照他事他说加以考察上边包车型客车篇章:

    浅谈移动Web开辟(上):深远概念

    那边只说笔者们关切的一些和结论,大家须求分清分化档期的顺序的像素:CSS像素和设备像素。八个CSS像素大概带有多少个设施像素。对于图片来讲,在高DPI的荧屏上须要选择分辨率更加高的图纸,如果大家讨论的是Retina,那么就须要2倍分辨率(大约4倍尺寸)的图纸。那大致向来不取巧的空间,显示器就是那么大,供给的图片也正是那么大。(鸽子为何那么大?^_^)

    新葡亰496net 3

    笔者们能够调整的地方是“恰好”彰显所需尺寸的图样。比方在显示器中通过CSS也许标签的wihth/height属性,将一副200×200的图形调度为100×100大小,那么那在那之中就有(200×200)-(100×100)=三千0个像素是浪费的,那占到了图片尺寸的十分六!

    所以有这么大的荒凉,是因为图片的尺码与面积为主成正比,与宽高的平方成正比。因而能够的盘算客商端实际彰显的图片尺寸,能够大大减小图片的大小。固然唯有长和宽都唯有10px被荒疏,可是当图片丰盛大时,那有些也将爆发相当的大影响。

    ImageOptim (Mac)

    主页:https://imageoptim.com/

    Mac平台下相当的赞的图样优化学工业具,只须求把供给优化的图纸拖拽进ImageOptim,就能够一气浑成对图纸的优化。设置选取的也很足够,近日支撑JPG和PNG的优化。那是本人在写文章时最常用到的工具,把网址用到的图片拖进去,优化就做到了~

      这一个格式的图纸的格式是红火的谷歌(Google)在二〇一〇发布出去的,它抱有现存位图格式的持有优点,包含体积小、色彩突显丰富、辅助动画(一从头是不援助的)。当然,新东西的劣势就是包容性不是很好,还会有正是显现这种图片格式总计量比平常的图纸要大过多。由于出生好,东西自身也没有错,越多的开荒者与设计者初阶关切它。本国某家公司也在选用这种格式图片制作表情。

    新葡亰496net,响应式图片

    地方提到“恰好”突显顾客端所需大小的图纸,听起来很轻便不是吧?但当响应式布局出现后,那就变得最为不方便。大家要帮衬上至一九一九大幅度,下至320小幅度的不在少数种道具,尽管运用一九一七幅度的图纸,那么在小型设备(那类设备往往对网速和流量越来越灵活)上各样顾客都要付出额外的带宽和等待时间,假设运用320上涨的幅度的图样,那么在1917的显示屏上就如在高清屏上应用DOS那么令人难以承受。

    很当然的,大家须要图片也能“响应式”加载,依据内地设备的两样,加载分化尺寸的图片。响应式图片尚未有写入Web标准,完成起来也是有困难和包容性限制。我提出参谋百度EFE团队的那篇小说:

    实战响应式图片

    响应式图片尽管从未有过成为标准,但那是Web图片优化的一柄利器,一旦被广大支持,再未有比收缩图片尺寸更管用的优化措施了。

    Kraken (Web)

    主页:https://kraken.io/

    在免费方式下得以上传图片,优化后打包下载,相当多海外公司也选取了它的收取金钱服务。亲自测验Kraken的图形优化结果比ImageOptim一般要小3%左右,效果不错,当然价格也合情合理。适合不经常有图片优化供给,或然不在开荒机上未有优化软件能够利用的图景。

      5、SVG

    优化JPG和PNG

    选拔了理所必然的图片格式,依照科学的大小生成了图片后,我们还亟需对图纸举行更进一竿优化,这种优化一般分两步进行:

    1. 有损优化,删除未有出现或极少出现过的颜色,合併相邻的好像颜色。这一步并不必得,如PNG格式就径直进去下一步
    2. 无损优化,压缩数量,删除不需求的新闻

    JPG和PNG格式的图纸生成后,一般还会有特别优化的长空,比方JPG格式的相片中,大概引导有相机的Exif音信,PNG格式的图纸中恐怕带有Fireworks等软件的图层音信等。去除这几个额外消息后,仍是能够由此减小图片的调色板,去除未有出现过的颜料,以及联合相邻的一模二样颜色等招数来拓宽优化。原理性的内容这里不再赘述,仅介绍工程中可用的优化学工业具。

    不等格式的图纸有一名目非常多工具,这么些工具有有越来越多样参数调度方案,常见的两种调解工具备:

    工具 用途
    jpegtran 优化JPG图片
    OptiPNG 无损PNG优化
    AdvPNG 无损PNG优化
    PNGQuant 有损PNG优化

    假如你实在供给追求种种图片的极限压缩,能够参考那么些工具的文书档案,不过对于一般的Web应用,面临的图样连串七种,差非常少不容许在工程中贯彻对每一个工具的独立安插,由此推荐应用以下工具来拓宽优化。这几个工具往往采纳了上表中的一种或两种优化学工业具。

    智图 (Web)

    主页:http://zhitu.tencent.com/

    TencentISUX共青团和少先队有篇小说介绍智图:http://isux.tencent.com/zhitu.html

    新葡亰496net:web品质优化,谈谈web上各样图片选拔的利弊。国货当自强,Tencent的智图工具推出不久,但实地衡量效果很好,并且提供了Gulp的自动化援救,那部分会在前面自动优化章节介绍。只想建议一句,Kraken的首页比智图美好几百倍…… 况且把减掉前的PNG和压缩后的JPG放在一块儿比极大小,真的不要紧么~

      SVG是一种矢量图,在现行以来,获得的支撑是很惊人的。矢量图比位图一个天赋的多少,就是它不管放多大都不会搅乱。这种格式的图样,对有个别总结的线条、 形状表现是很不利的,借使发挥更目不暇接的图像(如照片),那这一个就能变的太复杂。SVG能够协理动画(SVG的动画片天性不可能被IE浏览器很好的支持),从前的flash那样,还帮忙css样式的一些修改。大家未来网页上的数不胜数iconLogo都是选择那些的,svg也能够把四个SVG组合起来。总体来讲,SVG依旧三个相比主见的本领。

    ImageOptim (Mac)

    主页:

    Mac平台下十分的赞的图形优化学工业具,只需求把须求优化的图片拖拽进ImageOptim,就可见不负职务对图片的优化。设置选用的也很丰硕,最近匡助JPG和PNG的优化。那是本人在写文章时最常用到的工具,把网址用到的图片拖进去,优化就做到了~

    新葡亰496net 4

    优化SVG

    具有较新的浏览器都支持可缩放矢量图(SVG),SVG是遵照XML的图片格式,适用于二维图片。能够将SVG标识直接嵌入网页,也能够看做外界能源嵌入。能够透过大多基于矢量的绘图软件创立SVG文件。那是一段轻易的SVG图形:

    就写这么多了,如有补充的招待


      浏览器中,对于图片的能力革新一直突破,其较于文字来讲独一短处正是体量太大,但图片的表现力是文字无法比拟的,也相信图片会越来越好吧。关于web上位图的技艺还应该有三个是base64,这些是足以把的图片转化成为十陆位的代码直接插入web中。

    Kraken (Web)

    主页:

    在不收费方式下能够上传图片,优化后打包下载,比较多海外集团也选用了它的收款服务。亲自测验Kraken的图纸优化结果比ImageOptim一般要小3%左右,效果不错,当然价格也不错。适合临时有图表优化需要,或然不在开辟机上未有优化软件能够应用的情形。

    新葡亰496net 5

     

    智图 (Web)

    主页:

    TencentISUX团队有篇文章介绍智图:

    国货当自强,Tencent的智图工具推出不久,但实地度量效果很好,何况提供了Gulp的自动化支持,那部分会在后头自动优化章节介绍。只想建议一句,Kraken的首页比智图美好几百倍…… 並且把收缩前的PNG和削减后的JPG放在一同比十分的大小,真的不要紧么~

    新葡亰496net 6

      压缩方式 单张图能支持颜色种类 是否支持透明度 是否支持动画 兼容情况
    GIF 无损压缩 256 基本通用
    JPEG 有损压缩  1600万以上 基本通用
    PNG 无损压缩  1600万以上 基本通用
    APNG 无损压缩  1600万以上

     Firefox51

    Chrom59

    iOS Sarfi9.3

    webP 有损压缩  1600万以上  

    Opera 44

    Chrom 45

    SVG 矢量图  1600万以上

     除了IE8以及以下,

    现在各主浏览器都支持

    优化SVG

    抱有较新的浏览器都帮助可缩放矢量图(SVG),SVG是基于XML的图片格式,适用于二维图片。能够将SVG标志间接嵌入网页,也足以看做外界财富嵌入。能够透过非常多依照矢量的绘图软件创建SVG文件。那是一段简单的SVG图形:

    新葡亰496net 7

    以此圈子轮廓为白灰,背景为深黑,从Adobe Illustrator直接导出。能够从中看到大量元数据,举例图层音讯、注释和XML名称空间等等,在浏览器中彰显财富时,平日无需那么些数量。由此大家须求利用一些工具去除这么些不须求的元数据,仅保留必得的号子。

    SVGO工具得以减徐熙娣(Elephant Dee)女士VG文件的容量,在那么些的例子中,SVGO能够将Illustrator生成的SVG文件大小减小52%,从470字节缩减到199字节。

    鉴于SVG是基于XML的格式,本质上是纯文本,所以,还足以运用GZIP压缩来减小传输大小,当然那亟需有个别服务器配置,比如在apache服务器中设置:

    JavaScript

    AddType image/svg xml .svg AddOutputFilterByType DEFLATE image/svg xml

    1
    2
    AddType image/svg xml .svg
    AddOutputFilterByType DEFLATE image/svg xml

    来对SVG文件启用GZip压缩(当然你还亟需先加载deflate模块并举办适宜安排,GZip的配备超越了本文的层面,这一部分剧情请自行谷歌(Google))

    优化GIF和APNG

    GIF有十分的多平价,在颜色数好低的时候能够大幅度回退图片体量,况兼他也是独一可以相比较通用的显得动画的图片格式。关于GIF格式的优化原理小编并不掌握,只是在工程中直接行使成型的压缩工具,在后文活动优化章节的Grunt中,会介绍通过Grunt Task实行自动优化的不二法门。

    至于APNG,这几天浏览器对他的帮衬还远远不足好,然则在支撑HTML5的场景中,有成熟的开源工具apng-canvas可以用来扶助APNG。

    新葡亰496net 8

    TencentISUX团队有篇作品介绍iSparta工具:。那是眼前大约独一能够批量拍卖APNG文件的工具,感兴趣的同室能够在这篇文章里拿走越多地问询。

    活动优化

    前方说了太多关于如何优化各类差别格式图片的法门和工具,优化图片需求大量重复性的劳动,作为程序猿显明不会经受这或多或少,由此也爆发出了过多工具对图纸展开活动优化,这里关键介绍CDN、Grunt/Gulp、GooglePageSpeed二种方法。

    机关优化:CDN

    利用CDN对图片自动举行优化,笔者在海外的CDN提供商处相当少看到那类服务,倒是国内的两大老马CDN七牛和又拍在那上边都做了汪洋办事。其行事方式为,向CDN央浼图片的UOdysseyL参数中带有了图片管理的参数(格式、宽高档),CDN服务器依据央求生成所需的图形,发送到顾客浏览器。

    七牛云存款和储蓄的图片处理接口极度足够,覆盖了图片的大多数基本操作,比如:

    • 图表裁剪,补助两种裁剪格局(如按长边、短边、填充、拉伸等)
    • 图片格式转换,协理JPG, GIF, PNG, WebP等,帮助分歧的图纸压缩率
    • 图形管理,辅助图片水印、高斯模糊、重心管理等

    七牛云存款和储蓄的图片管理接口使用并不复杂,举个例子下边那张原图:

    新葡亰496net 9

    大家经过如下UWranglerL央浼,裁剪正中部分,等比缩短生成200×200缩略图:

    JavaScript

    1
    http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200

    新葡亰496net 10

    活动优化:Grunt/Gulp

    此间介绍用于图片优化的Grunt组件:grunt-image。前端程序员的重复性专业,举例合併静态财富、压缩JS和CSS文件、编译SASS等都足以采纳Grunt等自动化学工业具批量到位,图片优化也是这么。

    grunt-image极度强劲,依据小编的牵线,其内部加载的图形优化学工业具富含了pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle和svgo。支持批量活动优化PNG, JPG, SVG和GIF,速度也不利,配置情势扶助单图片优化和全目录优化:

    JavaScript

    module.exports = function (grunt) { grunt.initConfig({ image: { // 钦定单独的图样优化 static: { options: { pngquant: true, optipng: true, advpng: true, zopflipng: true, pngcrush: true, pngout: true, mozjpeg: true, jpegRecompress: true, jpegoptim: true, gifsicle: true, svgo: true }, files: { 'dist/img.png': 'src/img.png', 'dist/img.jpg': 'src/img.jpg', 'dist/img.gif': 'src/img.gif', 'dist/img.svg': 'src/img.svg' } }, // 钦点图片目录实行优化 dynamic: { files: [{ expand: true, cwd: 'src/', src: ['**/*.{png,jpg,gif,svg}'], dest: 'dist/' }] } } }); grunt.loadNpmTasks('grunt-image'); };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    module.exports = function (grunt) {
      grunt.initConfig({
        image: {
          // 指定单独的图片优化
          static: {
            options: {
              pngquant: true,
              optipng: true,
              advpng: true,
              zopflipng: true,
              pngcrush: true,
              pngout: true,
              mozjpeg: true,
              jpegRecompress: true,
              jpegoptim: true,
              gifsicle: true,
              svgo: true
            },
            files: {
              'dist/img.png': 'src/img.png',
              'dist/img.jpg': 'src/img.jpg',
              'dist/img.gif': 'src/img.gif',
              'dist/img.svg': 'src/img.svg'
            }
          },
          // 指定图片目录进行优化
          dynamic: {
            files: [{
              expand: true,
              cwd: 'src/',
              src: ['**/*.{png,jpg,gif,svg}'],
              dest: 'dist/'
            }]
          }
        }
      });
     
      grunt.loadNpmTasks('grunt-image');
    };

    新葡亰496net 11

    电动优化:谷歌(Google) PageSpeed

    谷歌(Google)做事风格相比较根本,看见哪个软件倒霉用就拿来直接fork出新本子或许几乎重写,对于Web优化,谷歌(Google)宣布了了Google PageSpeed那个服务器模块,可以在apache或ngnix中加载,通过在服务器配置文件中张开设置来扩充自动化的优化。对于图片格式转换、图片优化依旧图片LazyLoad都有连带选项。这一部分张开会不长,请感兴趣的同班参谋Google的手册。

    参谋链接

    • Google Web Fundamentals – Optimizing Content Efficiency
    • Google PageSpeed Module
    • 浅谈移动Web开荒(上):深远概念
    • 再回想,丽影如初

      赞 4 收藏 评论

    新葡亰496net 12

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:web品质优化,谈谈web上各样图片选

    关键词:

上一篇:新葡亰496net母鸡与前端工程师,初入前端

下一篇:没有了