首页 > 教程 > 关键词 > 前端开发最新资讯 > 正文

前端开发中的图片优化

2013-10-29 13:54 · 稿源:博客园

文/来自竹林

现在的互联网,是一个用户体验至上的时代,大多数公司都会把如何提高产品的易用性放在首要位置。如何提高产品的质量则体现在项目开发的很多阶段,例如产品设计、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设备。关于更多响应式方案,可以参考《响应式Web设计: HTML5和CSS3实践》这本书或网上相关资料,这里不再展开。

以上为项目中常用的图片优化技术,只有更多地关注细节,才能做出优秀的产品。今后会介绍更多文章中出现的技术细节。

  • 相关推荐
  • 大家在看
  • 榕树贷款:AI加持优化用户体验 满足用户多样金融需求

    金融科技对金融业的影响愈加广泛,对金融业务全过程都产生了深刻影响,新业务模式对传统业务和服务的影响更加深入。总结来看,金融科技在金融行业的发展中扮演了重要的角色:一是推动开展了新的业务,创新了竞争的赛道;二是提高信息传播效率,逐渐替代传统金融机构的作用;三是促进金融机构改进工作流程。 随着金融科技创新进程不断加快,专家认为,只有产生实际效果、增强消费者获得感的金融科技创新,才是有效的。消费者体验是

  • 消费金融潜力突显 榕树贷款精准匹配优化用户体验

    在我国经济由高速增长转向高质量发展的当前阶段,消费经济日渐成为经济发展最重要的引擎之一,我国实际上正步入消费驱动型经济体。有行业报告曾指出,无论基于政策理论,还是国际经验分析,消费金融在一国经济转型过程中具有重要作用,适度发展消费金融有助于拉动消费增长。 相比于传统金融服务,消费金融的最大特性在于其用户体验的全面优化,从用户申请、审核、资金发放等流程的高效、便捷,到消费金融平台充分发挥自身技术优势

  • 车轮"加油"频道,深入优化客户体验

    近年来,得益于我国经济高速发展,人们的生活水平稳定提升,汽车消费呈现井喷之势。众所周知,汽车的使用离不开汽油的支持,因此,汽车加油成为用车养车中的主要消费项目。而使消费者在加油中感到便利和实惠,在当今社会人们日益忙碌,压力越来越大的情况下,显得尤为重要。专注于全国汽车生活服务领域的移动互联网公司车轮互联想车主所想,解车主之难,在全国范围内推出了加油服务,"价格优惠"和"一键加油"是其服务的亮点。目前,

  • 微软准备Windows Core OS:全力优化Chromium使用体验

    微软正在全力准备新的Windows系统Core OS,作为Windows 10的模块化版本,该软件旨在容纳多种不同外形尺寸的设备。除了类似Chromebook的廉价上网本,Core OS还可在双屏/折叠设备、以及HoloLens 2

  • 外媒:超过60%的用户购买新手机只是为了体验新功能

    据外媒91mobiles消息,根据91mobiles2020 年智能手机买家见解调查,超过60%的用户购买新智能手机只是为了体验最新功能。

  • 百度MIP功能下线 MIP核心、组件等前端静态资源仍可使用

    6 月 4 日,百度搜索资源平台发布《MIP入口下线通知》称,因业务调整,搜索资源平台的“资源提交-MIP”入口即日起下线。MIP核心、组件等前端静态资源仍正常维护与使用,不影响已改造为MIP标准的站点的正常访问、收录、排序。

  • 安卓抢先体验 《王者荣耀》神优化:更新包大小缩减3-5倍

    每次《王者荣耀》更新,进入游戏前均有大量的各种加载及资源更新,等待时间漫长。玩家们只好盯着更新界面的公告翻来翻去的看。

  • 硬件缺陷?用户反馈索尼Xperia 1/5侧面指纹体验差

    2019年索尼推出了两大旗舰Xperia 1和Xperia 5,二者均采用了21:9 OLED屏,其中Xperia 1的分辨率达到了4K级别,是业界第一款采用4K屏的骁龙855旗舰。和大多数竞品选择屏幕指纹方案不同,Xperia

  • Zenlayer助力即构科技提升用户实时互动体验,为新兴市场打call

    艾瑞咨询报告显示,随着移动互联网的发展, 2018 年全球互联网通信云PaaS市场规模已达到15. 6 亿美元,且保持30%左右的年增长率,除中国大陆以外,东南亚、中东、非洲、拉美等新兴市场成为蓝海。顺应中国企业出海需求,借助日趋完善的全球网络基础设施及优质的国际网络服务商,通信云的业务版图正向全球市场扩张,其中音视频厂商在新兴市场的覆盖成为考验通信云全球服务能力的关键因素。国际领先的音视频服务商即构科技(ZEGO)通过Z

  • MongoDB Cloud首次提供统一的云端到手机端体验助力开发人员摆脱数据孤岛

    MongoDB 4.4、Atlas Data Lake、Atlas Search和MongoDB Realm可以帮助企业减少分散数据,无论数据存储于任何地方,都可为开发人员提供更佳的数据处理方式 2020 年 6 月 30 日,中国北京——全球领先的现代通用数据平台提供商MongoDB (NASDAQ代码MDB) 日前宣布了组成MongoDB Cloud平台的一系例产品,这些产品为开发人员提供了更优的数据管理方式,且无论数据存储在任何地方。MongoDB Cloud 提供了经由开发人员优化、云端到移动终端?

  • 滴滴自动驾驶网约车在上海试行 用户可在App中报名体验

    滴滴今日正式在上海规模化落地自动驾驶载人示范应用项目。用户在滴滴出行App中报名审核后,可在上海嘉定自动驾驶测试路段范围内呼叫自动驾驶汽车。不过,目前该项目仍在测试阶段,每辆汽车中仍会配备安全员,乘客需签署知情责任书。此前,滴滴自动驾驶部门首席运营官孟醒曾表示,到2030年,滴滴计划在其平台上运营100多万辆自动驾驶汽车,将在滴滴出行车辆短缺的地区部署自动驾驶出租车?

  • 支持13款、米9在列!MIUI 12稳定版正式推送:开发版用户如何升级?

    如约,今天MIUI 12稳定版第一批支持机型正式开启全量推送。第一批支持机型共计13款:小米10 Pro、小米10、小米10 青春版、小米9 Pro 5G、小米9尊享透明版、小米9、Redmi K30 Pro变焦版、Redmi

  • 一张图片卖到3000元天价,收费图片网站哪家更好?

    新媒体人常用的收费图片网站主要有以下八个,都是需要在线注册,PC端下载。每个特点都有所差别,并没有哪个面面俱到。

  • 在行业主场京东618创新高 vivo要给用户最潮的5G体验

    “给广大京东粉丝派送好礼啦,你想拍出不再抖动的视频吗?你想留住璀璨的星空吗?vivoX50 系列5G手机能满足你所有期待!在今天的京东直播间,要让粉丝们好礼拿不停。”今年 618 期间,vivoX系列男神产品经理赵典做客京东直播间幽默介绍vivoX50 系列5G手机,并为京东 618 强势站台摇旗助威!2020 年迎来了5G时代的大爆发,5G手机也迎来了井喷式的增长,vivo也顺应时代潮流布局5G手机领域。今年京东 618 期间,vivo5G手机战绩斐然不?

  • epic登陆验证图片显示不出来怎么解决

    Epic平台上出现了登陆时图片验证显示不了,显示不出来的情况,这是怎么回事,要如何让图片显示出来登陆账号呢,这里我们来教大家处理这个经常容易出现的问题。

  • 京东:今日在港公开发售 最高公开发售价为236港元/股

    今日,京东在港交所公告称, 6 月 8 日(星期一)上午九时开始香港公开发售,预期 6 月 11 日(星期四)定价, 6 月 18 日上午九时正在香港联交所交易。在港上市最高公开发售价为 236 港元/股,将发行1. 33 亿股发售股份。

  • SEO优化,4个独辟蹊径的策略!

    有的时候SEO工作就是一个数字游戏,每天看着数据的增长,不断的调整相关性的策略,但我们非常清楚,有的时候SEO优化会面临各种调整,特别是同行业之间的竞争。

  • 优速快递聚力品效,不断实践 不断优化

    品效驱动货量 货量牵引收益收益拉动盈利 加速赢取未来品效、品效、品效。打牢集团底盘,以持续、稳定的品效服务驱动网络盈利能力,是集团决胜千里的不二法宝。加之,当前疫情所带来的挑战与机遇的双面性影响,我们更要聚焦品质和效率,伺机而起,不放过任何一个逆势而起的机遇。基于此, 4 月 17 日集团在全网吹响了为期 120 天的“品效提升季——全网在行动”战役号角。即集团总部高管、省区高层管理人员集体深入分拨中心操作一线

  • 安卓版Chrome新功能来了:支持图片编辑

    6月25日消息,据XDA报道,谷歌在Android版Chrome上加入了图片编辑功能。XDA指出,Chrome内置了截图编辑器,用户截屏后可以在Chrome内完成编辑、分享等操作。据悉,谷歌已经将这项功能加

  • 谷歌将对图片进行事实核查 以遏制虚假信息传播

    为了遏制平台上虚假信息的传播,谷歌本周一表示将对谷歌图片搜索结果进行事实检查。那些误导性、深度伪造的图片、视频的虚假信息危害性往往比文本内容更大。目前,各大科技公司也正努力解决平台上猖獗传播错误信息的问题。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议