1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

web前端优化之图片显示优化

作者:用户 来源:互联网 时间:2016-11-09 12:46:04

前端图片面试题透明前端 图片支持交错

web前端优化之图片显示优化 - 摘要: 本文讲的是web前端优化之图片显示优化, 前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实 都100多岁啦)是不会怕滴。所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后 我本

前言

此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实 都100多岁啦)是不会怕滴。所以,我来了哟!

题外话:今天我们一起还看了一道前端的面试题,而后 我本来还想多找几道来做做,但是没找到什么合适的,各位有什么好的前端面试题请给我留言哦,我们一起来 分析面试题进步哟!

前端时间,我与我们的产品有一次讨论,是针对图片压缩的,因为我对图片或者 说PS这块是个小白,所以当时做了一个广告图片有100来k也直接给传上去了,结果被我们的同事搞起来一压缩 ,便只有50多k了,此次交流对图片压缩这块有了一点点心得,并且为第二次交流埋下伏笔,第二次便是图片 由模糊变清晰的研究了。

网页图片格式

GIF

透明类型,可以全透明或者全不透明,半透 明这种事情就不要找他了,并且这个家伙可以做动画哦

gif是一种无损耗的图片格式

gif采用 lzw算法进行压缩,当压缩gif过程中像素由上到下进行压缩,也就是说横向的gif图片比纵向的小(500*10比 10*500小)

gif支持可选择性的间隔渐进显示

JPEG

不支持透明

不支持动画

该图片非常容易损耗

支持隔行渐进显示(ie不支持,ie会再整个图片信息完全到达后再显示)

jepg尤其适合web上面的摄影图片和数字相册

PNG

支持各种透明,但在IE6下有bug需要 使用滤镜处理

不支持动画

任何操作都不会损耗其质量

支持间隔渐进增强,但会造成图 片尺寸变大:

png8(布尔透明)
相当于静态gif,只有256色,支持索引透明,就是指定一个像素点不是透明
    
png8(alpha透明)
可指定像素点的透明度,例如50%透明度
优点在于比png24/32小,效果一样,缺点为ie6不支持
    
png24
不透明,颜色很多不止256色,PS导出的png24事实上为png32
    
png32
和PS里面的PSD一样,包含图层和通道信息

以上是关于图片的一些信息,我们大概了解下便是,其中 我要说一说其中的PNG,特别是交错png

PNG交错在使用浏览器欣赏该图片时就会以由模糊逐渐转为清晰 的效果方式渐渐显示出来。PNG先进的交错式方法,使图像得以水平及垂直方式显像在屏幕上,加快了下載的 速度,作用:交错可使下载时间感觉更短,并使浏览者确信正在进行下载。PNG无交错、不交错就没这个作用 。

图片的显示

我们知道img标签在dom加载时候是不会加载的,而是在dom结构全部出来后并形 成了渲染树(布局结束),才开始加载。

而其加载顺序也是从上而下的加载,意思是图片我们是先看 到上面再看到下面,但是很明显这不是一个好的显示方式,我们若是一开始可以看到模糊的图形然后再慢慢变 清晰是不是好很多呢?

肯定好很多啦。。。

于是我们讨论到如何实现,但是就说到了交错PNG ,我当时虽然信了,因为我对此不太了解,但是下来思考下却感觉有点不对劲!

用户的疑惑

现 在我们来想象下QQ空间的做法(这块纯粹瞎扯),我现在作为一个用户,我上传图片来了

① 我想将QQ 空间作为云存储的地方,上传了我2M的毕业照

② 空间根据需求生成了一张缩略图与一张大图

③ 我们首先看到缩略图,而后看到大图,点击原图时候便看到我最初2M的照片

以上是我以为的逻辑, QQ空间是不是这个逻辑我们不去关注他,因为站在用户角度,我一定是想保留我最初的东西。

好了事 到如今,QQ空间究竟怎么做的呢???那个太复杂了,我们也不去关注,我这里说下我是怎么做的。

实现图片由模糊到清晰

我们的相册显示一般是这个样子的:

web前端优化之图片显示优化-web前端 图片优化

上面是缩略图,下面是大图, 在这里我们其实可以对其缩略图做文章!!!

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索前端 , 图片 , 面试题 , 透明 , 前端 图片 , 支持 交错 web前端 图片优化、web前端性能优化、web前端优化、web前端性能优化方案、web前端页面性能优化,以便于您获取更多的相关知识。

java web有哪些优化?

...: 代码优化最简单的就是提高代码的重用性,不管是前端代码还是后端代码,学会把公共性的代码抽取出来,事物的控制,特别是当对数据库进行增加删除修改的时候 ,保持数据的一致性,数据库的话加索引,视图等等,S...

Web前端性能优化之图片优化教程

...方式提供,保持文字的可搜索性同时扩展显示的样式。 前端工程师最好能和设计师、产品经理保持沟通,帮助他们了解到什么样的效果比较“简洁、高效、可维护”,毕竟对于CSS来说改变圆角矩形的Radius可以实时看到效果,用...

怎么理解移动端H5前端性能优化

...flash广告将被HTML5广告所取代。移动端+HTML5,这个组合对前端工程师来说是个不小的挑战:如何让开发的页面能有更好的体验。这就是我们今天讨论的话题:移动端HTML5页面前端性能优化。如何优化HTML5在移动设置上的性能表现,...

WEB开发性能随笔

...标: 开发高性能,可扩展的WEB应用。1.WEB应用的分层  a.前端 b.后端a.前端优化的重要性。分析工具GA和YSLOW  1.一个request之前要做的优化。 2.不要紧盯WEB后端优化。尽可能的访问服务器之前,消灭掉request.  前端优化的方法  1....

柯南君:教你如何对待大型网站平台的性能优化? 之 ”五“---常见的系统瓶颈及调优策略--web 前端性...

...性能优化。 之 ”五“---常见的系统瓶颈及调优策略--web 前端性能优化策略(长篇总结) 从企业架构上(见 http://blog.csdn.net/sun305355024sun/article/details/40920051)来说,企业架构可以分为两大部分:业务架构和IT架构,大部分企业架...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备