一、PNG、GIF、JPG图片对比

在我们进行图像优化技术前,需要学习有关的图片格式的一些技术细节,每个图形格式都有自己的优势和拖弱点,知道他们会使你得到更好的视觉质量和压缩品质。

网页图片优化是网页加速中非常重要的一步,对图片进行压缩,不仅能够节约带宽,并且加快网页的速度,我们常用的图片编辑软件可以在压缩图片。

PNG-8的高压缩比

切图时,有时选择PNG-8可以获得更高的压缩比,注意,是PNG-8,不是PNG-24,不过有些情况下还是GIF或JPG会小一些,需要根据实际情况调试以选择最佳方案。

对比大小:

1、图型类、照片类

对于图像格式的选择,我们还需要考虑图片的使用场景或功能,概括为两类:图形类、照片类

图型类:图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性,颜色数量较少。

图型类一般可以使用PNG格式或者GIF格式。优化时可采用PNG格式为PNG8或者PNG24,品质为32,如果色彩有损失可采用品质64或者128.

例如:首页左导的图标、feed区图标、勋章图、表情动画都属于图形。

照片类:照片通常含有百万数量级的颜色,包括平滑的颜色过度和渐变,如果是图形较为复杂,图中有时会出现真实的照片。

照片类一般用PNG和JPG。可以根据图片色彩的丰富程度而定。

PNG的品质一般要到128.JPG的品质一般要在70-80之间,以躁点的程度确定。

例如:皮肤背景图、发布器、按钮背景、发布器下方的tips、右侧广告、用户头像、用户发布的图片。

2、通用类、随机类

按照首页图片出现的频率分成:通用类、随机类

通用类:每个人首页都会看到,图标、按钮、小背景

例如:顶部托盘图标、左导图标、feed区图标、发布器图标、身份图标、操作类图标、状态类图标、按钮。尽可能的采用PNG的格式保存,文件会相对来说较小一些。

下图为微博的按钮盒左侧导航icon小图的,使用GIF和PNG格式的大小对比:

下图为微博的按钮背景图分别使用GIF和PNG格式保存的大小对比:

随机类:根据自己定义和发布的内容而定。

A、表情GIF

可以使用FireWork或者ImageReady,建议使用ImageReady.

最好是手动一张张的调整,因为这些表情图的色彩值都比较少,如果使用比较大的颜色时会存储量较大。

B、换肤类图片

采用JPG格式或者PNG格式

皮肤的主要背景图中如含有真实的照片或者文字,可采用JPG格式,为了保证更接近设计图需要采用85以上的品质压缩图片,如果色彩跨度不大的背景图片,可采用PNG格式。

C、勋章类

目前有GIF和PNG两种格式,GIF的是小图,PNG的是中图和大图,品质选128即可。

D、各种广告:

发布器下方tips、右侧广告,底部广告,采用JPG格式或者PNG格式。

E、用户相关图:

头像、用户发布的图这个需要在后台控制压缩品质,采用JPG格式或者PNG格式。

浅谈CSS样式png、gif、jpg图片优化的方法的更多相关文章

  1. 浅谈css样式之list-type

    在我们的工作学习中,大多数人使用列表标签的时候总一般的选择是把list-type设置成none.不过可能很多人对于这个属性的细节并没有很深的了解.甚至会把list-type和list-type-sty ...

  2. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  3. 浅谈配置chrome浏览器允许跨域操作的方法

    浅谈配置chrome浏览器允许跨域操作的方法 一:(Lying人生感悟.可忽略) 最近有一天,对着镜子,发现满脸疲惫.脸色蜡黄.头发蓬松.眼神空洞,于是痛诉着说生活的不如意,工作没激情,工资不高,一个 ...

  4. [原创]浅谈NT下Ring3无驱进入Ring0的方法

    原文链接:浅谈NT下Ring3无驱进入Ring0的方法 (测试环境:Windows 2000 SP4,Windows XP SP2.Windows 2003 未测试) 在NT下无驱进入Ring0是一个 ...

  5. 转:浅谈深度学习(Deep Learning)的基本思想和方法

    浅谈深度学习(Deep Learning)的基本思想和方法  参考:http://blog.csdn.net/xianlingmao/article/details/8478562 深度学习(Deep ...

  6. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  7. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  8. 浅谈CSS盒子模型

    [摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...

  9. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

随机推荐

  1. 遍历Map集合的方法

    创建一个MAP的栗子: Map<String, Integer> tempMap = new HashMap<String, Integer>(); tempMap.put(& ...

  2. 树形DP(统计直径的条数 HDU3534)

    分析:首先树形dp(dfs计算出每个点为根节点的子树的最长距离和次长距离),然后找出L=dis[u][0]+dis[u][1]最长的那个点u,然后在以u为根节点dfs,统计长度为L的条数:具体做法:把 ...

  3. 2-sat 输出任意一组可行解&拓扑排序+缩点 poj3683

    Priest John's Busiest Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8170   Accept ...

  4. Matlab基本功能:自定义函数、添加块注释、定时器的试用

    1.自定义函数 新建一个m文件 在m文件里面第一行输入function [X,Y]=pll(X1,Y1,X2,Y2),这里x1 x2 y1 y2是你函数的输入值, x y是输出值,接着定义你要实现的功 ...

  5. UML:组件图

    要搞清楚组件图,必须先搞清楚什么是组件? 组件有以下特点:1.能实现一定功能,或者提供一些服务.2.不能单独运行,要作为系统的一部分来发挥作用.3.在物理上独立的,不是逻辑上的概念.4.可单独维护.可 ...

  6. start.s 解析(一)

    可以参考 : http://blog.csdn.net/bluesummerg/article/details/5940452 (强大的反汇编) http://www.cnblogs.com/yanh ...

  7. System.Web.HttpContext.Current.Server.MapPath("~/upload/SH") 未将对象引用设置为实例对象

    做项目的时候,System.Web.HttpContext.Current.Server.MapPath("~/upload/SH")   获取路径本来这个方法用的好好的 因为需要 ...

  8. 夺命雷公狗---DEDECMS----9dedecms单标签

    我们这一节课开始将dedecms的标签了,dedecms里面的标签分好多个的,我们先来看下他的标签长得啥样的先: 随便点击一个修改即可见到标签了: 这里面上面的大文本框里面有标签的用法下面有参数的说明 ...

  9. ThinkPHP讲解(一)框架基础

    ThinkPHP框架知识点过于杂乱,接下来将以问题的形势讲解tp(ThinkPHP的简写) 1.tp框架是什么,为什么使用是它? 一堆代码的集合,里边有变量.函数.类.常量,里边也有许多设计模式MVC ...

  10. C语言初学者代码中的常见错误与瑕疵(13)

    https://www.cpfn.org/bbs/viewtopic.php?f=85&t=5940&sid=ccbcf716d21191452e7c08a97b502337& ...