前端开发设计,打交道最多的就是图片啦~今天就来个图片格式讲解,也许一些围绕你的问题可以在这篇文章中找到答案
Gif格式图片的特点
透明性
Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明)。
动画
Gif这种格式支持动画。
无损耗性
Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使 得图像质量产生损耗。
水平扫描
Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向 的gif图片更加小。例如500*10的图片比10*500的图片更加小
间隔渐进显示
Gif支持可选择性的间隔渐进显示
由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标,图表等),它并不是最优的选择,我们会在后面 中看到png是最优的选择。
Jpeg格式图片特点
透明性、动画
它并不支持透明,也不支持动画。
损耗性
除了一些比如说旋转(仅仅是90、180、270度旋转),裁切,从标准类型到先进类型,编辑图片的原数据之外,所有其它操作对jpeg图像的处理 都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。
隔行渐进显示
它支持隔行渐进显示(但是ie浏览器并不支持这个属性,但是ie会在整个图像信息完全到达的时候显示)。
由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。
Png格式图片分析
Png这种图片格式包括了许多子类,但是在实践中大致可以分为256色的png(PNG8)和全色的png(PNG24、 PNG32),你完成可以用256色的png代替gif,用全色的png代替jpeg
透明性
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的过渡格式.
Png8的在ie中的怪异表现:
- 半透明的png8在ie6以下的浏览器显示为全透明。
- Alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色)。
由上面可以总结:
- 全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏览器 都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只是显示为全透明,对用户体验影响不大,它反而是透明gif的加强版。
- 第二个bug没有什么好的方法解决,只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。
因此得出结论就是:请使用PNG8。
Png8的软件问题
-
Photoshop只 能导出布尔透明的PNG8。
-
Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.
-
pngquant与pngnq这两个命令行软件可以转换全色png为 256色的png8。
转载自:http://blogread.cn/it/article.php?id=1831&f=sinat
分享到:
相关推荐
html5及css3web前端开发技术习题答案解析
HTML5及CSS3web前端开发技术习题答案解析
14前端开发基础视频-常见前端的名词解释.avi 15前端开发基础视频-网页的组成html+css+JavaScript.avi 16前端开发基础视频-HTML的页面结构.avi 17前端开发基础视频-HTML的语法.avi 18前端开发基础视频-HTML的...
Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解
于是本书紧接着全方位地解析了作为一名合格的前端开发工程师应该掌握的技能和承担的职责,这对刚加入前端开发这一行的读者来说有很大的指导意义。同时,还解读了制定规范和团队合作的重要性。 本书的核心内容是...
原先的混合式开发,在理念上保持着使用HIML、CSS、Javascript的体系结构在 Webview中执行的概念,但在现阶段,web前端技术开始更深入地融入原生应用的开发体系。所以本章使用了混合式开发作为标题,一切使用Web技术来...
【互联网行业】前端工程师详解前端开发人员的职业规划和自身定位.docx
在前端开发领域中,单元测试一直是一个被忽视的领域,早期大量的偏U类代码使得前端开发并没有养成书写单元测试的习惯,但随着前端项目的日益复杂,包括 Node. js的大量应用开发,为应用程序书写单元测试才是保证代码质量...
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
内容为1+X Web前端开发例题 题目类型为实操题 包含11题(与我的其他资源有一二重复例题) 内容不含答案解析(答案可以来我的博客找喔,有题目分析 https://blog.csdn.net/weixin_53231455?spm=1011.2124.3001.5343 题目...
这个是我在网上收集的图片文件格式的资料,自己整理了一下
通过前端JavaScript,使用二进制相关API,解析图像数据,读取图片文件的真实格式信息。 支持 jpg、png、webp、gif、ico、bmp、svg、avif,这些当前主流浏览器都都支持的图片格式,正确真实的识别。 避免强制修改后缀...
vue前端解析word,pdf,exl,图片,视频等文件预览,支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示,或者请求后端获取base64 string 字符串 转码 在前端页面展示
此文档为BMP格式图片格式的详细解析,可深入了解BMP格式
浅析Web前端开发.docx
内容为1+X Web前端开发例题 实操题6题 内容不含答案解析(答案可以来我的博客找喔,有题目分析 https://blog.csdn.net/weixin_53231455?spm=1019.2139.3001.5343 题目类型都是前端的知识点
随着手机等移动设备的普及,用户的使用场景开始大面积从PC端转移至移动端,Web前端的开发工作也更多地偏向移动端应用。所以,有效地掌握移动端网页样式布局,是成为一名合格前端开发工程序的必要条件。移动端因其较好的...
开发调试是必须学会的技能,其重要性不言而喻将从浏览器调试、代理工具、多终端同步工具、模拟器调试、多平台调试、云真机调试和调试这7个方面介绍实际开发过程调试工具的使用。读者通过本章的学习,可以掌握常用的...
互联网在国内发生了翻天覆地的变化,不论是在技术还是商业上都到达了空前的高度,用户群体也开始从最初的PC端渐渐地...本章将通过多个实际开发场景,如地理定位、在线聊天、拍摄、播放器、动画、3D等,介绍HIML5实战开发。
web前端开发面试知识