web上种图片应用的优缺点

web中承载信息的主要方式就是图片与文字了,以下就是对一些web图片格式的优缺点进行归纳。

  1、GIF

  GIF图是比较古老的web图片格式之一,可以追溯到1987,几乎所有的浏览器都支持这一种格式,老有老的好处嘛。GIF是一种索引色模式图片,所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画,也能支持背景透明,这点连古老的IE6都支持,所以在以前想要在项目中使用背景透明图片,有一些方案就是生成GIF图片。GIF与JPEG、PNG相比,在通常情况下确实体积比较小。不过里面如果放入了足够多帧的图片,那么可能就不是那种情况了。现在网络上的GIF可以说是爆炸式的再增长,显然更多的在与他的两个特点:支持动画与兼容性好。缺点就是:色彩表现度不够丰富。

  2、JPEG、JPG

  平常我们大部分见到的静态图基本都是这种图片格式。这种格式的图片能比较好的表现各种色彩,主要在压缩的时候会有所失真(主要是压缩时,会在细节上把相邻的一些色彩给同化掉),也正因为如此,造就了这种图片格式体积的轻量。格式被各中老弱病残的浏览器兼容,不过不支持背景透明与动画。平时web上的广告图、相片、特大背景图、轮播图等等一些大图场景中,都适用这个。

  3、PNG

  PNG格式是有三种版本的,分别为PNG-8,PNG-24,PNG-32,所有这些版本都不支持动画的。PNG-8跟GIF类似的属性是相似的,都是索引色模式,而且都支持背景透明。相对比GIF格式好的特点在与背景透明时,图像边缘没有什么噪点,颜色表现更优秀。PNG-24其实就是无损压缩的JPEG。而PNG-32就是在PNG-24的基础上,增加了透明度的支持。PNG格式在老浏览器IE6以及以下,PNG-8透明度的支持度不是很好,PNG-32的透明度基本不支持。正因为如此,以前有一个js插件,专门应对IE6这种BUG,主要是用IE6里的滤镜来重新渲染图片达到透明.随着时代的发展,PNG也想进步,也想支持动画。所以,有人推出了APNG(Animated PNG)格式图片。从字面上理解,就是会动的PNG图片,不过这个技术实现上与PNG开发小组理念不合,没有得到有效推广。到现在,也就有Blink内核的浏览器(代表浏览器:火狐)有比较好的支持,其它的就无从谈起了。

  4、webP

  这个格式的图片的格式是财大气粗的Google在2010发布出来的,它拥有现有位图格式的所有优点,包括体积小、色彩表现足够、支持动画(一开始是不支持的)。当然,新东西的缺点就是兼容性不是很好,还有就是呈现这种图片格式计算量比平常的图片要大很多。由于出生好,东西本身也不错,越来越多的开发者与设计者开始关注它。国内某家公司也在使用这种格式图片制作表情。

  5、SVG

  SVG是一种矢量图,在现在来说,得到的支持是很可观的。矢量图比位图一个天生的有点,就是它不管放多大都不会模糊。这种格式的图片,对一些简单的线条、 形状表现是很不错的,如果表达更复杂的图像(如照片),那这个就会变的太复杂。SVG能够支持动画(SVG的动画特性不能被IE浏览器很好的支持),以前的flash那样,还支持css样式的一些修改。我们现在网页上的很多icon图标都是使用这个的,svg也能够把多个SVG组合起来。总体来说,SVG还是一个比较看好的技术。

  浏览器中,对于图片的技术更新一直突破,其较于文字来说唯一缺点就是体积太大,但图片的表现力是文字无法比拟的,也相信图片会越来越好吧。关于web上位图的技术还有一个是database64,这个是可以把的图片转化成为16位的代码直接插入web中。

压缩方式 单张图能支持颜色种类 是否支持透明度 是否支持动画 兼容情况
GIF 无损压缩 256 基本通用
JPEG 有损压缩  1600万以上 基本通用
PNG 无损压缩  1600万以上 基本通用
APNG 无损压缩  1600万以上
Firefox51++

Chrom59++

iOS Sarfi9.3++

webP 有损压缩  1600万以上  

Opera 44++

Chrom 45++

SVG 矢量图  1600万以上
除了IE8以及以下,

现在各主浏览器都支持

时间: 2024-08-06 00:02:17

web上种图片应用的优缺点的相关文章

基于emoji 国际通用表情在web上的输入与显示的记录

定义: emoji 即国际通用表情 场景: 1,ios,android,wp上emoji表情输入与显示 2,web也需作为支撑平台对emoji表情就行输入与显示(解析) 问题: 1,app端输入的表情在web端显示的是乱码(比如方括号,问号,和实际编码有关) 2,mysql 存储emoji报异常(0xF0 0x9F 0x8F 0x8),此记录不做问题处理,请参考http://blog.csdn.net/qdkfriend/article/details/7576524 解决:暂且对web显示(问

在移动设备上放大图片查看图片细节的俩种方法

类似淘宝京东上的产品图,我们可以放大来看产品的具体细节.那么,在移动设备上,基于Web浏览器的这种效果又是如何实现的呢? 一.使用touchEvent来实现,关于touchEvent的一些基本知识,可以阅读文章--多点触摸网络开发 1.页面代码 <div id="warpper" class="warpper"> <div class="clearfix"></div> <div id="con

java web 从服务器上下载图片资料

package com.Action; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; public class HttpUtils {

我需要在Web上完成一个图片上传的功能

我需要在Web上完成一个图片上传的功能. 这个页面需要能从手机中选择图片上传. 首先,这个页面是从微信上面触发的,所以修改了微信的的入口地址,增加了身份识别号作为传参. 跳转到页面的时候,页面先检查身份识别号是否已参与过本次活动,参与过本次活动的,可以跳转到变更图片功能.如果未参与过图片上传,则需要传入图片. 看上去是很简单的逻辑. 马上行动.

[转]你会做Web上的用户登录功能吗?

转自:http://coolshell.cn/articles/5353.html Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关系到用户安全的功能,希望大家能从下面的文章中能知道什么样的方法才是一个好的用户登录功能.以下内容,转载时请保持原文一致,并请注明作者和出处. 用户名和口令 首先,我们先来说说用户名和口令的事.这并不是本站第一次谈论这

在zabbix web上进行监控主机配置

前面的文档已经介绍过zabbix的理论知识.zabbix_server/zabbix_agent部署配置.zabbix_web的简单配置.Linux上的agent主机添加,这篇博客来介绍Wzabbix web上监控主机配置流程. 下图是Zabbix Web上的配置截图,下面给大家介绍一下配置相关的信息.具体配置的步骤见后续文档. 相关术语解释: hostgroup:主机组 host:主机,即被监控设备 application:应用,即同类别的多个item所形成的组: item:监控项,key+参

利用HTML5技术在Web上实现对图形图像的处理——WebPhotoshop精简版

WebPhotoshop精简版是利用HTML5技术在Web上实现对图形图像的处理,构建易维护.易共享.易于拓展.实时性的Web图形图像处理平台. 精简版功能包括:图形绘制.图像处理.图像操作.完整版包括多人协作操作图像.实时交流.图片搜索,同时实现实时的多人协作处理图形图像技术.(完整版后续上传)一.功能说明:1.图形绘制 实现铅笔.画笔(书法画笔.喷枪.蜡笔.记号笔.水彩画笔)的绘制效果.实现直线.曲线.椭圆(圆).矩形(圆角矩形).三角形(直角三角形.等边三角形.任意三角形).多边形的绘制.

图片(画布上的图片)上传总结

最近在做图片上传的一些东西,目前为止已经做的相对比较完善了,所以对图片上传做一些总结. 我最初的想法是把html5的标签canvas上的图片得到,上传到服务器上并能够及时预览. canvas上的图片分为两种情况: 1.自己绘制上去的.代码如下: var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,

web响应式图片设计实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text