商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 建站经验 >

前端必备技术之Web图像优化

发表日期:2018-01-14 19:53聚圣源浏览次数: 本文关键词:前端,必备,技术,之,Web,图像,优化,前端,优化,

  前端优化有很多,图像优化也是其中的一部分。无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分。

  知其然,须知其所以然

  图像优化的前提是需要了解图像的基本原理。常规的图像格式分为矢量图和位图。

  

前端必备技术之Web图像优化

 

  

前端必备技术之Web图像优化

 

  原理:

  矢量图形使用线、点和多边形来表示图像。

  光栅图形,也可以成为位图,通过对矩形格栅内的每个像素的值进行编码表示图像。

  矢量格式适用于简单形状图形,并且变换颜色方便,仅通过 CSS 中的 fill 属性便可以改变颜色。并且在多大的缩放下都能保证清晰,矢量格式不能满足复杂的图像,例如照片,高清图。这时候我们就需要位图,位图的格式有很多:

  GIF

  PNG

  JPEG

  JPEG-XR

  WebP

  Bpg

  其中 Webp 是比较流行的图像格式方案,目前移动端 Android 4.0 以上、PC 端 chrome 10+(14 ~ 16 有渲染 bug )、opera 11+ 均支持 webp 格式图片,相比 jpg 体积减少了 65%,但编码解码速度慢了很多,虽然 webp 会额外增加解码时间,但由于体积小了,缩短了加载时间,实际上文件的渲染速度反而快了。

  另外如果考虑到更全的兼容性问题,还是得回归到 jpg 和 png 上,常规的的选择会用 jpg 作为背景图,png 作为小块的图片,当然都需要经过压缩,服务端可以使用 Gzip ,上传图片前还能使用工具进行一遍压缩,比如使用 ps,或者在线压缩

  TinyPNG 或者客户端工具 ImageOptim。

  压缩可分为有损压缩和无损压缩。

  使用有损压缩处理图像,是去除某些像素数据。

  使用无损压缩处理图像,是对像素数据进行压缩。

  压缩的方案可以根据需求选择。

  优化策略

  常见的优化方案:

  使用 Data URI 即(base64)编码代替图片:适用于图片大小于 2 KB,页面上引用图片总数不多的情况,原理是将图片转换为 base64 编码字符串 inline 到页面或 CSS 中,可以减少 HTTP 请求。

  合并雪碧图(sprite):移动端多图情况下,可以将多图合并到一个图中,通过 CSS 定位背景图的形式来引用图片,可以有效减少 HTTP 请求。

  使用 CSS、svg、canvas 或者 iconfont 代替图片:适用于移动端或高级的浏览器,而且绘制的图片比较简单。

  懒加载图片(lazyload)

  使用 cdn 提供访问图片的入口。

  响应式图片

  响应式图片可以结合懒加载的形式,这样可以加强网页的体验。很多网站 logo 就是一个固定宽度的图像的例子,不管浏览器视口的宽度如何,始终保持相同的宽度。

  然而在移动端,往往需要不固定的图像,不同视口,不同的分辨率,需要展示不同的图像大小,图虽视口的改变而改变。

  这个时候我们需要考虑使用响应式图片:

  <img srcset="360.jpg 360w, 768.jpg 768w, 1200.jpg 1200w, 1920.jpg 1920w" sizes="(max-: 360px) 100vw,

  (max-: 768px) 90vw,

  (max-: 1980px) 80vw"

  src="360.jpg" >

  srcset:我们给浏览器准备了四个质量的图像,分别为 360 768 1200 1920

  size:我们来告诉浏览器,在不同的环境下图像的宽度

  当视口不大于 360 时,图像的宽度为 100vw,当视口大于 768 时,图像显示为 90vw,以此类推。

  最后的 src 是作为默认图像 url 引入,是一个回退方案,当然浏览器不认 srcset 和 sizes 属性时,直接读取 src 渲染。

  demo:

  

前端必备技术之Web图像优化

 

  iphone4(320)下,图像宽度和我们设置的 100vw 一致,而浏览器选择的是 768 图像没有选择 360 图,因为 iphone4 的 dpr 是 2,浏览器智能地选择了合适的 768。

  iphone6p(414)下,由于 6p 的 drp 更高,浏览器选择了 1200 质量的图像,显示了 90vw。

  这时我们可以欺骗一下浏览器:

  360.jpg 1200w

  1200.jpg 9999w

  

前端必备技术之Web图像优化

 

  这时浏览器把 360 的图当成了 1200 来用了。这里可能有些疑问,图像的宽度为什么不是90vw 了哪?因为浏览器被骗了但是自己却不知道,他依然按照 1200 的图像,去适配 dpr。414 * 90% *(360 / 1200)约等于 111.7。这种方式很智能,浏览器根据你的 sizes,从 w 列表中选择最合适的图像来调用显示。

  如果我们需要更精确的控制浏览器在什么视口大小下显示多大的图像,可以使用 picture 元素。

  <picture>

  <source media="(min-: 960px)" srcset=960.jpg">

  <source media="(min-: 768px)" srcset="768.jpg">

  <img src="360.jpg" >

  </picture>

  当视口大于 960 像素时,会加载 960.jpg。大于 768 像素时,会加载 768.jpg。视口小于768,则加载默认图像。虽然不是每个浏览器都支持 picture 元素,还可以使用 Picturefill polyfill。

  加载以及显示策略

  多图渲染的情况下,结合懒加载,又要保证图像的渲染速度,类似知乎的渲染效果,我们可以使用 progressive-jpg。

  

前端必备技术之Web图像优化

 

  相比 baseline-jpg 一行一行的扫描并显示图片,当然都是从弱网角度考虑,这种显示可能更合适。但还是有不足。参考了下知乎和 medium 等网站的示图效果,可以进行模拟:

  

前端必备技术之Web图像优化

 

  先创建一个为图片占位的预留块,在这个块中会展示图片。块中有另外一个块会先设置一个 padding-bottom 来撑起块的高(即保证需要加载图像也是这个宽度高度的比例)。这样防止图片在加载时发生重排。

  加载一个轻量版的图片。这个时候会先请求一个图片的缩略图。并使用模糊 blur 效果

  等滚到到可视区域,加载高质量图,加载完毕后取消模糊效果。

  medium 下的实现方式更为复杂点,是在缩略图加载完毕后,绘制到 canvas 画布,再通过一个自定义的模糊函数,类似于 StackBlur,同时请求高质量图。等到请求完,再隐藏画布。

  简单的例子可参照 “https://codepen.io/SitePoint/pen/VPVEZm”。

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/jzjy/9852.html

网站设计案例推荐

热门文章

站长工具综合查询里面SSL证书不...

SSL证书不安全是怎么回事?但是点进去这个提示后,显示的是别人的tdk是不是被劫持或者被黑了?...

日期:2018-03-27 浏览次数:1881

简洁而实用的版权信息可增色网...

打开网站,人们自然会从上往下浏览,首先映入眼帘的一定是BANNER主视觉,然后是网站主体内容部分。相比较而言,注意到网站底部版权信息的浏览者确实不多,但这并说明网站版权信...

日期:2018-03-05 浏览次数:1873

网站设计需要注意的3点问题...

对于网站设计来讲会受到很多因素的影响,而且不同类型的网站,在设计时需要体现的元素也不一样,比如说对于一个企业网站更想体现出品牌以及产品的特点,主要是对产品、企业信...

日期:2018-02-12 浏览次数:1803

企业网站为什么要改版 改版选择...

网站改版,是每个建站企业必须面临的工作。相信也有不少站长问,已经做好的企业网站,为何还要大费周章重新进行改版设计呢?下面小编就来给大家说说,企业究竟为什么要改变,并...

日期:2018-03-26 浏览次数:1332

永城网站制作:模板建站不可不...

随着互联网建站尤其是自助建站热潮不断高涨,建站行业涌现出越来越多的自助建站平台,这些平台普遍都提供网站模板可选。...

日期:2018-04-30 浏览次数:931

相关文章

web开发与web前端开发...

如今,网站不再仅仅是互联网存在,也被用于商业交易和转移敏感数据。如此广泛的使用有助于破解漏洞和开发技术的知识。各种各样的安全研究表明,攻击网站以获取名声或金钱的趋...

日期:2018-01-19 浏览次数:70

前端本地文件操作与上传...

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发: 通过input type=file 选择本...

日期:2018-01-14 浏览次数:68

前端领域2017年有哪些变化,20...

以下为我在知乎问题「2017年前端有什么样变化?即将来临的2018有什么样的期待?」下的回答,稍作整理分享给大家。如有遗漏欢迎在评论中指出。原文如下: 在即将过去的2017年里,我们...

日期:2018-01-14 浏览次数:63

前端真的能做到彻底权限控制吗...

有一天突然想到一个问题,web端的权限控制: 1.真的能控制权限吗? 2.仅仅靠前端,能不能做到真正的权限控制? 3.如果需要后台配合,应该如何配合? 可能这是一个老生常谈的问题,但还...

日期:2018-01-14 浏览次数:62

前端不止:请告诉我,你要什么...

有一个英语成语叫做一画胜千言(A picture is worth a thousand words),不知道大家有没有听过?它是指的是一张静态的图片就可表达一个复杂的概念或者与一个主题相关的图片有时比起详细的解...

日期:2018-01-14 浏览次数:108

随机推荐

如何利用情感化元素提升内容传...

史上最全网站建设备案和不备案...

企业或者个人自己建网站,需要...

您的网站alt图片标签做对了吗?...

百度站长网站logo审核示例以及个...

美国主机和香港主机的对比分析...