前端开发中对图片的优化技巧有哪些?

时间: 2019-12-07阅读: 336标签: 图片

1.去掉无意义的修饰。

嗯,我会瞎说吗?除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?


2.不用图片。

嗯,切图是一件扯淡的事情!不要隔靴搔痒了少年,直接使用css替代图片来实现修饰效果吧!如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用css达成。将来css滤镜得到广泛支持后,还可以做到alpha混合、正片叠底等各种效果。


3.使用矢量图替代位图。

对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!


4.使用恰当的图片格式。

我们常见的图片格式有JPEG、GIF、PNG。基本上,内容图片多为照片之类的,适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。而GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。除了这些格式之外,Chrome、新版Opera、Android 4+支持WebP格式,IE 9+、IE mobile 10+支持JPEG XR。这两个新格式都支持无损和有损压缩,都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片,增加了开发成本,也增加存储成本。不过你省了流量或者相同流量下改善了图片质量,提升了用户体验。你会如何取舍呢?对了,别忘了使用优秀的图片编码器及合适的参数。好的图片编码器,尤其是有损图片格式的编码器,能通过算法或手动调整,获得更高的压缩比。


5.使用data url。

资源内嵌于csshtml中,而不必单独请求。注意,多个地方都要使用的资源不一定适合用此优化方式,因为图片数据重复多了,增加流量。另外许多浏览器对data url有长度限制,注意资源的大小。


6.按照HTTP协议设置合理的缓存。

具体的缓存策略(如永久缓存+重命名)、部署策略(如反向代理、CDN等)这里就不展开了。


7.使用支持SPDY的服务器。

SPDY可认为是未来的HTTP 2.0的早期实现,Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。


8.资源的lazyload或postpone。

(lazyload:延迟到其他资源下载完成后再加载,postpone:延迟到元素可见再加载。)目前基本上都要用脚本控制。未来htmlcss会增加相关的控制属性。


9.资源的prefetch。

注意prefetch只是hint,Firefox会预取资源(如果网络空闲的话),而IE 9则是对该资源的hostname进行DNS预解析。如果你真的需要更强的控制,则得用脚本。注意:Chrome支持与prefetch相近但更进一步的,另外SPDY加入了与prefetch相近但语义不同的subresource link支持,这两个新特性我也没用过,有兴趣的可以尝试。

图片的其他优化技巧如字体图标、css Sprites等,不过我不推荐。用字体图标不如用SVG。使用了SPDY和data url后,css Sprites完全没有必要用了。

再有各种特定的图片问题,超出了一般优化的范畴。如许多手机浏览器有黑夜模式,其中有的浏览器允许定制黑夜模式;有的手机浏览器允许在用户开启不加载图片选项的情况下让开发者设置必须加载的图片(有点绕);又如许多手机浏览器有所谓云加速模式,即在服务器端对图片进行处理后再发送给客户端,应该返回怎样的图片给这些服务器有待研究和实践。


10. 最后是responsive设计

所需的图片优化,可能要产生多套不同大小和分辨率的图片,配合media query、以及srcset属性、picture元素、src-N等标准提案,这个话题比较大,尚未形成普遍认可的最佳实践,这里也不多展开了。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7204

图片懒加载及异常处理

在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示

提供图片服务网站

有了这些图片API,可以获取随机图片,很适合做Blogs背景图片,Unsplash,Pixabay,Bing每日图片,img.xjh.me

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

html如何把图片大小变小?

我们在布局图片列表时,通常我们要控制图片的高度和宽度这样来达到图片统一。我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽。

node之本地服务器图片上传

对于接口文件的返回,这里使用了body-parser这个中间件来对node返回的body进行json格式的解析,很重要的一点就是设置静态资源目录,不然的话就会报错,找不到文件或者文件夹

Js实现下载图片

服务器接口返回一个图片的远程地址,要求前端进行下载,前端接口拿到图片通过canvas转成base64的格式,然后利用A标签的download属性 进行下载,具体请看代码

javascript如何判断图片是否存在?

JavaScript在实际应用中,可能有这样的需求,那就是检测一个图片是否存在。下面我们来看一下JavaScript如何判断图片是否存在。

图片该如何优化来提高网站性能?

图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平。

图片压缩工具推荐

为什么要压缩图片?如果你是web开发者:减小网页、小程序的体积,提升加载速度。如果你是App开发者:减小App的打包体积,提升下载速度。如果你是新媒体从业者:文章体积更小,加快打开速度。如果你是职场用户:邮件附件超限、微信发送太慢,你总会遇到

图片下载的几种实现

通过浏览器自动下载。浏览器接收到二进制文件,自动转码下载。比如:window.open()通过xhr下载。ajax请求得到的是二进制文件,只能手动转码下载。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广