图片格式与设计那点事儿（9）
作者：平四 来源：taobaoUED 发布时间：2011-01-06 12:17:00
通过较小的视觉牺牲换取较大的性能提升
有时候为了提升页面的加载速度达到更好的用户体验，不得不对设计进行优化。这个时候利用我们对图片格式知识掌握就可以更有目的性的去进行优化。
例如下图是淘宝“双十一”大促活动的一个页头设计，由于页面访问量非常大并且要使用较多的商品图片，不得不对页头设计进行优化以提升性能。这个时候我们就可以去掉一些不太重要的高光、渐变和阴影效果，从而大大降低文件大小。
我们还可以做些什么？
Sprite图片二次优化
由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普遍采用的实现方式是将与页面结构相关的需要用到图片的视觉元素集中在一个PNG图片上，然后通过CSS样式将其应用到页面中，我们称这个图片为Sprite图片。由于这个图片上经常要集中较多的视觉元素，在用PNG格式存储时难免会产生失真而影响图片质量。这个时候就需要视觉设计师帮助前端开发工程师对Sprite图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。
下图是一个优化前的Sprite图片，由于视觉元素过多PNG8无法真实保存所有的颜色信息，于是便会产生颜色的缺失和杂色的产生（如局部放大图所示）。
在前端工程师完成页面的静态代码之后，视觉设计师可以将定位好的Sprite图片进行像素级的优化，去掉不必要的杂色，并且用已存在的索引色对缺失的地方进行补充，这样不仅能压缩文件大小，还能提升设计品质。
Sprite图片的优化方式有很多种，比如通过索引色排序进行颜色的删减和替换，或是直接通过像素描绘进行优化。设计师可以根据具体的场景进行选择和处理。
以上设计和优化的方法只是我在工作中一些经验的积累和总结，个人感觉每一个点展开来都有很多值得研究和讨论的地方，限于篇幅有限不能继续深入。关于图片优化的高级技巧有两篇比较经典的文章推荐给大家：Clever PNG Optimization Techniques、Clever JPEG Optimization Techniques。
0
投稿猜你喜欢
- 本文详细讲述了CI框架整合smarty步骤。分享给大家供大家参考，具体如下：Ci结合smarty的配置步骤：1. 第一步配置ci和下载sma
1.random库的使用：random库是使用随机数的Python标准库从概率论角度来说，随机数是随机产生的数据（比如抛硬币），但时计算机是- 本文实例讲述了Python多线程threading模块用法。分享给大家供大家参考，具体如下：多线程 - threadingpython的th
- 本文实例讲述了python中enumerate函数用法。分享给大家供大家参考。具体分析如下：今日发现一个新函数 enumerate 。一般情
- 在JS中有些内存只需执行一遍即可，如浏览器类型检测是最常用的一个功能，因为我们使用Ajax的时候需要检测浏览器的内置的XHR。我们可以在第一
- python去除字符串最后的换行符‘\n’s = s.replace('\n',&#
- 这个问题已经不是什么新鲜问题了，网上也有大把的教程，但大多数是授人以鱼，而不授人以渔，经过辛苦的资料收集，思考，调试，整理，我基本上已经把这
- 前言在使用pandas的时候，有些场景需要对数据内部进行分组处理，如一组全校学生成绩的数据，我们想通过班级进行分组，或者再对班级分组后的性别
- 前言对于很多接触Python的人而言，字符的处理和语言整体的温顺可靠相比显得格外桀骜不驯难以驾驭。文章针对Python 2.7，主要因为3对
- 前言本文的主要内容是使用 cpu 版本的 tensorflor-2.1 完成对 Auto MPG 数据集的回归预测任务。获取 Auto MP
- 1、除法相关在python3之前，print 13/4 #result=3然而在这之后，却变了！print(13 / 4) #r
- 1.算法：（设查找的数组期间为array[low, high]）（1）确定该期间的中间位置K（2）将查找的值T与array[k]比较。若相等
- 为什么会有这个需求呢？有没有发现在国外的一些网站，当你向上滚动时，导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达，省去很多拖动的
- 什么是JSON http://www.json.org/json-zh.htmlJSON(Javascript Object Notatio
- 形式pandas.Series(data=None, index=None, dtype=None,&nbs
- 前言tips:第一次发技术文章，篇幅比较简短，主要采取文字和关键代码表现的形式，希望帮助到大家。(若有不正确还请多多指正)nextTick作
- 提起python做网络爬虫就不得不说到强大的组件urllib2。在python中正是使用urllib2这个组件来抓取网页的。urllib2是
- 登录、注销和登录限制：登录在使用authenticate进行验证后，如果验证通过了。那么会返回一个user对象，拿到user对象后，可以使用
- 一 描述561. 数组拆分 I - 力扣（LeetCode） (leetcode-cn.com)给定长度为 2n 的整数
- 列表解析 在需要改变列表而不是需要新建某列表时，可以使用列表解析。列表解析表达式为： [expr for iter_var in itera
