前端开发中的图片优化

2016-12-04    分类: 网站建设

现在的互联网,是一个用户体验至上的年代,大多数公司都会把怎么进步产品的易用性放在首要位置。怎么进步产品的质量则体现在项目开发的许多阶段,例如产品规划、UI规划和前端开发等。而图片优化在进步产品质量上也起到了无足轻重的作用,这也便是为什么越来越多的产品团队愈加重视这个问题。

本文关于图片优化的内容首要由两部分构成:

1. 收拾总结网上关于图片优化的一些办法办法。

2. 自己在项目开发过程中实际遇到的问题以及用到的图片优化计划。

如有不足之处,欢迎咱们指出并补充。

1. 精约而不简单

Win8和iOS7的出现,将互联网职业中许多产品规划带回到原点,或许更是另一个新的起点。Win8的Metro UI、iOS7中图标的扁平化规划、一直崇尚精约的豆瓣网、还有顶着年代工匠称号的老罗所规划的锤子ROM,无一不体现着精约的风格。

言归正传,回到咱们图片优化的主题上。在产品规划和UI规划阶段,除了内容图片,其他的图片都是起润饰的作用。也便是关于传递信息来说并非实质性的。所以大的优化便是不要图片。在进入到研制阶段之前,就要承认规划,规划本身是否需求用到那么多的图片,还是说能够做到更简练!

2. 款式替代图片

Chrome,FF等浏览器厂商为互联网的开展做了这么多奉献,为什么咱们还要让那些不兼容CSS3的浏览器阻止互联网的开展呢。因而,让咱们直接运用CSS款式替代图片来实现润饰作用!例如:半通明、圆角、暗影、高光、突变等。这些作用主流的浏览器都能够好支撑,而关于那些低端浏览器,咱们并不会完全抛弃他们,“渐进增强”则是一个很好的解决计划。至于什么是渐进增强,这儿不再用过多篇幅去解说,假如感兴趣能够参考CSS“渐进增强”在web制造中常见运用举例。

3. 挑选最合适的图片

咱们常见的图片格局有JPEG、GIF、PNG。

基本上,内容图片多为照片之类或图片构成较复杂的状况,适用于JPEG。如网站中的Banner图、轮播图、大尺度背景图等。

润饰图片通常更适合用无损紧缩的PNG。而咱们首要用到的PNG图片又分为PNG-8和PNG-24两种,PNG-8格局不支撑半通明,也是IE6兼容的图片存储办法。假如对图片质量要求较高的半通明或全通明背景,保存成PNG-24更合适。有时候会遇到在IE6下运用PNG-24图片的状况,关于IE6下PNG Alpha通明的解决计划能够参考IE6中PNG Alpha通明。我在项目中常用的办法是AlphaImageLoader挑选器。

GIF基本上除了GIF动画外不要运用。

除了这些格局之外,Chrome、新版Opera、Android 4+支撑WebP格局,IE 9+、IE mobile 10+支撑JPEG XR。这两个新格局都支撑无损和有损紧缩,都具有更良好的紧缩比。当然这需求为不同的浏览器回来不同的图片,添加了开发本钱,也添加存储本钱。不过你省了流量或者相同流量下改进了图片质量,提升了用户体验。这就需求依据项目需求进行取舍了。

4. 常用的图片优化技巧

CSS Sprites,将同类型的图标或按钮等背景图合到一张大图中,削减页面恳求。

Icon Font,将图标做成字体文件。长处是图标支撑多个尺度,兼容所有浏览器,削减页面恳求等。美中不足的是只支撑纯色的icon。

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

图片紧缩工具,能够在图片上线前运用紧缩工具进行紧缩,获得更高的紧缩比。我常用的紧缩工具为Yahoo的Smush.it。

5. 适用各种资源而不限于图片的优化

data url

Base64是网络上最常见的用于传输8Bit字节的编码办法之一,可用于在HTTP环境下传递较长的标明信息。将图片转化为base64编码格局,资源内嵌于CSS或HTML中,不用独自恳求。

该办法的长处是:

1. 削减了HTTP恳求

2. 避免了图片从头上传,还要整理缓存的问题

不足之处是:

1. IE6, IE7不支撑该类型编码的图片作为背景图

2. 添加了CSS文件的尺度

3. 保护本钱较高

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

详细的缓存策略(如永久缓存 + 重命名)、布置策略(如反向署理、CDN等)这儿就不展开了。

Responsive规划

为了习惯现在众多分辨率和设备像素比的移动设备,要发生多套不同大小和分辨率的图片,然后配合Media Query进行开发。这儿推荐在进行移动端页面开发时运用SVG或Icon Font等技能。这些技能能够好支撑Retina设备。

以上为项目中常用的图片优化技能,只有更多地重视细节,才干做出优秀的产品。

分享名称:前端开发中的图片优化
当前网址:https://www.cdcxhl.com/news/71099.html

成都网站建设公司_创新互联,为您提供网站设计公司虚拟主机品牌网站建设网站维护企业建站用户体验

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网页设计公司