最近在搞网站,自己做的话,前端开发过程中对大小很敏感,太大了,增大服务器压力嘛,能省点就省点。
下面说下,我们常用的几个图片格式jpg、gif、png
JPG格式特点
透明性
它并不支持透明。
动画
它也不支持动画。
损耗性
除了一些比如说旋转(仅仅是90、180、270度旋转),裁切,从标准类型到先进类型,编辑图片的原数据之外,所有其它操作对jpg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。
隔行渐进显示
它支持隔行渐进显示(但是ie浏览器并不支持这个属性,但是ie会在整个图像信息完全到达的时候显示)。
由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。
Gif格式特点
透明性
Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明)。
动画
Gif这种格式支持动画。
无损耗性
Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使 得图像质量产生损耗。
水平扫描
Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小
间隔渐进显示
Gif支持可选择性的间隔渐进显示
由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标,图表等),它并不是最优的选择。
Png格式特点
类型
Png这种图片格式包括了许多子类,但是在实践中大致可以分为256色的png和全色的png,你完成可以用256色的png代替gif,用全色的png代替jpg
透明性
Png是完全支持alpha透明的(透明,半透明,不透明),尽管有两个怪异的现象在ie6(下面详细讨论)
动画
它不支持动画
无损耗性
png是一种无损耗的图像格式,这也意味着你可以对png图片做任何操作也不会使 得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式
水平扫描
像GIF一样,png也是水平扫描的,这样意味着水平重复颜色比垂直重复颜色的图片更小
间隔渐进显示
它支持间隔渐进显示,但是会造成图片大小变得更大
其它图片格式与PNG比较
众所周知GIF适合图形,JPEG适合照片,PNG系列两种都适合。
相比GIF
PNG 8除了不支持动画外,PNG8有GIF所有的特点,但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以,大多数情况下,你都应该用PNG8不是GIF(除了非常小的图片GIF会有更好的压缩外)。
相比JPEG
JPEG比全色PNG具有更加好的压缩,因此也使得JPEG适合照片,但是编辑JPEG过程中容易造成质量的损失,所以全色PNG适合作为编辑JPEG的过渡格式.
更多关于PNG
PNG8
256色PNG的别名
PNG24
全色PNG的别名
PNG32
全色PNG的别名
Png8的在ie中的怪异表现:
半透明的png8在ie6以下的浏览器显示为全透明。
Alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色)。
由上面可以总结:
(a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏 览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只是显示为全透明,对用户体验影响不大,它反而是透明gif的加强 版。
(b)第二个bug没有什么好的方法解决,只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。
因此得出结论就是:请使用PNG8。
Png8的软件问题:
Photoshop只能导出布尔透明的PNG8。
Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.
pngquant与pngnq这两个命令行软件可以转换全色png为256色的png8。
http://www.jqueryba.com/27.html
发表评论
-
jquery仿凡客诚品图文切换效果
2012-12-29 22:31 953前端开发过程中需要不断学习,不断温习。最近计划白天继续温习jq ... -
初识javascript美术馆
2012-11-24 12:55 637不断学习,对前端开发来说很是重要,况且咱还是菜鸟更需要好好学习 ... -
jQuery如何性能优化
2012-11-20 09:18 660现在jquery应用的越来越多,上手快,可以满足一般的前端开发 ... -
100个超炫的HTML 5示例(四)
2012-11-12 09:04 697习惯性的早起,星期天睡不着啊,估计这个是前端开发的职业病,落下 ... -
WP-Syntax 代码高亮插件使用方法
2012-11-07 13:43 1046jquery博客之前代码插件好好的,最近把WP Code Hi ... -
css样式表中字体乱码
2012-11-02 22:07 743有时候,我们的css样式表中字体乱码,很诧异。百度谷歌是两个老 ... -
网页中如何插入FLASH(swf文件)的html代码
2012-10-26 09:44 836记得jquery博客从学校出来,走上这条前端开发这不归路,就没 ... -
100个超炫的HTML 5示例(三)
2012-10-25 09:42 716jquery博客继续折腾shopex纠结了,老是出现无法安装, ... -
jquery简单attr用法
2012-10-24 11:39 780之前看JavaScript DOM编程艺术清晰中文版中getA ... -
discuz x2.5用户注册后邮箱认证后无法收到邮件或者直接进垃圾箱
2012-10-23 09:07 908又是一个周末,jquery特效继续折腾我那discuz论坛,我 ... -
100个超炫的HTML 5示例(二)
2012-10-22 23:42 658战斗月,7月即将结束,回首望去,jquery特效不知不觉加班了 ... -
浅谈getElementByID getElementsByTagName getAttribute
2012-10-17 14:01 842今天晚上是jquery博客连续加班的最后一个晚上了,明天开始终 ... -
wordpress 子页面添加关键词和描述,增强SEO优化
2012-10-12 22:11 589jquery特效对seo优化了解的不多,只是一些瞎折腾,今天逛 ... -
使用CSS Usage 给你的CSS样式文件减减肥吧
2012-10-11 08:08 692前端开发过程中经常会 ... -
几个实用的.htaccess代码片段
2012-10-10 09:27 699自动为文件添加 utf-8 编码 为了避免编码问题,你可以通过 ... -
javascript中非继承的扩展
2012-10-08 15:26 587jquery特效之前只是用,有些东西没有深入追究。惭愧,好多不 ... -
javascript之调用被覆盖的方法
2012-09-29 08:50 593jquery博客这两天在看原生的javascript,看到一些 ... -
淡淡简单描述javascript中方法apply和call
2012-09-27 13:00 570jquery博客最近在看原生javascript,是那本犀牛书 ... -
css a链接 写法 新手篇
2012-09-25 09:03 634今天jquery博客被问到咋写a链接后的样式 这个是很早很早一 ... -
jquery实现隔行换色效果
2012-09-24 08:09 678隔行换色在显示数据的时候用的比较多。jquery整自己的小站的 ...
相关推荐
利用web网页设计技术(html+css+javascript)进行网站开发,含源代码 ,以及网页所用的图片,可做课程设计参考
PNG图像在网页设计领域中应用很大程度上被忽视了,大部分都有很好的理由.直到最近, Internet Explorer 7的发布才有所改观.尽管还无法在所有的浏览器中实现这种图像格式的所有特征,但是这样一来至少它已经可以在所有的...
个人精心收集的图片,网站开发与应用\做个人主页时可以用到图片,一些急用的童鞋可以试试看
全书共分为14章,其中包括网页设计中色彩的应用、版面的设计、按钮的制作及应用,网页各组成部分的设计和制作,商业网站和个人网站的分类和制作,服装网站的制作和图片细节的处理,生物网站、建筑网站、游戏网站、团体...
网页设计 期末大作业web课程设计【原神风格+博客静态页面】,html+css+js纯手写,div盒子布局,flex布局,瀑布流布局,绝对定位/相对定位,js登录表单验证,简洁的下拉菜单,侧边栏手风琴效果,动漫游戏博客小清新...
网页页面设计,静态的html文件,带有链接视频,练手。简单好学。
基于 DIV_CSS 的个人博客网页设计...本文通过对基于 DIV+CSS 的个人博客网页设计应用研究,展示了 DIV+CSS 布局方法的优点和特点,并提供了实际的设计实例和代码片段,旨在帮助读者更好地理解和应用 DIV+CSS 布局方法。
前端网页设计+素材+中国传统文化网页+web实验+网页设计文档 本资源包集合了前端网页设计所需的一系列素材、实验指导、以及详细的网页设计文档,专注于展现中国传统文化的魅力。资源内容丰富多样,包括原创设计的网页...
用CSS3设置表格和表单的样式、美化图片、背景和边框:讲述JavaScript内置对象、对象编程、JavaScript操纵css3、HTML5+CSS3和layascript的搭配应用等网页设计的方法和技巧。 通过对《精通HTML5 + CSS3+JavaScript...
网页制作哦网页制作是网站策划师、网络程序员、网页设计师等岗位,应用各种网络程序开发技术和网页设计技术,为企事业单位、公司或个人在全球互联网上建设站点,并包含域名注册和主机托管等服务的总称。其作用为展现...
打包多个png网页设计图片用于网页开发的多个png图标。方便大家开发和应用。节省开发时间!
基于Django框架实现的图像相似性搜索网页应用项目源码+数据库(毕业设计).zip个基于Django框架实现的图像相似性搜索网页应用。用户可以通过上传图片到网站,然后该项目会基于预训练的 VGG16 模型提取图像特征,并...
例如,可以使用不同的颜色和字体来提高网页的可读性,可以使用图片和背景音乐来提高网页的美观性。 7. 网页的制作过程 网页的制作过程通常包括以下几个步骤:首先,设计网页的结构和内容;其次,使用HTML语言编写...
熟练使用网页设计工具Frontpage、Dreamweaver MX,能够使用Dreamweaver MX设计网页的框架,导航条,设置文字,图片,超级链接,滚动文字,弹出窗口的属性,能够使用Dreamweaver MX设计出比较复杂的网页,建立小型...
大学生环境保护网页作品采用DIV CSS制作,共5个页面,知识点应用了图片轮播、FLASH、留言表单页面等。
网页设计标准尺寸 1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。 2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和...
5. 项目设计关键技法的应用:项目设计关键技法是网页设计项目的基础,需要对项目设计关键技法进行详细介绍。 6. 项目总结的重要性:项目总结是网页设计项目的结束部分,需要对项目的设计思路、制作步骤和关键技法...
大一选修课互联网技术与应用的网页期末大作业,仅学习html和css,没有使用到JavaScript,网页设计内容比较简单,美观度有待提高 1.首页 简单概括计算机的基本形式以及前沿计算机技术的名词解释百科链接,网页出现时会有...
笔者根据多年的实践经验将网页艺术与实际的设计相结合,将计算机网页技术 与艺术融合在一起进行探讨,希望能够对计算机网页设计带来更好的信息效果。 关键词:计算机网页设计 图形设计 处理运用 中图分类号:tp317 ...
CSS 网页设计基础教程 教程内容:00-00-课程介绍01-01-html01-02-段落标签01-03-图片标签01-04-列表标签01-05-区块标签01-06-链接标签01-07-span标签02-01-css02-02-在网页中嵌入CSS02-03-选择器 控制样式应用的...