网页中几种格式的图片图标的区别

一.unicode

1.简介

unicode是字体在网页端最原始的应用方式，可以用来绘制一些简单的图标。

2.功能：

兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

二.canvas

1.简介

canvas是html5提供的新元素。canvas可以看做是一个画布，其绘制出来的图形为标量图。

2.功能：

可在canvas中引入jpg或png这类格式的图片。在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。canvas里面绘制的图形不能被引擎抓取，canvas中我们绘制图形通常是通过javascript来实现。

三.svg

1.简介

svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

2.功能：

svg，所绘制的图形为矢量图，不能引入普通的图片，因为矢量图的不会失真的特点，在项目中我们会用来做一些动态的小图标。这个特点也很适合被用来做地图，百度地图就是用svg技术做出来的。

svg里面的图形可以被引擎抓取，支持事件的绑定，svg更多的是通过标签来实现。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。

四.webp

WebP是Google新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。

由于目前互联网上传输的数据有65%都是图片，WebP就是出于减少数据量、加速网络传输的目的而开发的。为了改善JPEG的图片压缩技术，他们使用了一种基于VP8编码(已在2010五月开源)的图片压缩器，利用预测编码技术，同时还采用了一种基于RIFF的非常轻量级的容器。这种容器只会给每张图片增加20字节，但能让图片作者保存他们想要存储的元数据。

与JPEG相同，WebP是一种有损压缩利用预测编码技术。但谷歌表示，这种格式的主要优势在于高效率。他们发现，"在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。

目前, Google放出了WebP文件解码器(libvpx)和命令行工具(webpconv)，用于JPEG等格式图片与WebP格式之间的转换，不过系统支持暂时仅限Linux，Windows版本将在稍后推出。

WebP团队还在开发WebKit内核补丁，用于在Google Chrome浏览器中提供对WebP格式的原生支持。

美中不足的是，WebP格式图像的编码时间"比JPEG格式图像长8倍"。

与jpg图片的对比：

与PNG图片的对比：

网页常见的图标图片格式的区别相关推荐

jpg、png、svg、gif等图片格式的区别
做了这么久前端,图片格式的区别你知道吗?腾讯视频面试问的原题哦 JPEG JPEG格式:也是应用最广泛的图片格式之一,它采用一种特殊的有损压缩算法,将不易被人眼察觉的图像颜色删除,从而达到较大的压缩比 ...
jpg、jpeg、png、gif、bmp、tiff、ai、cdr、eps 图片格式的区别
jpg.jpeg.png.gif.bmp.tiff.ai.cdr.eps这些图片格式是最常用的,也是最常见的,几乎每一天都要与他们打交道. 刚刚入门的新人通常不知道在什么地方如何使用他们或者说如何更有 ...
Html中几种图片格式的区别与使用--我的笔记
在HTML中通过 img src="图片路径" 引入图片. 常见的图片格式有JPEG(JPG),PNG,GIF. GIF图片的扩展名是gif.现在所有的图形浏览器都支持GIF格式, ...
jpg图片与jpeg图片格式的区别（没有区别，.jpg只是扩展名.jpeg的缩写）JPEG图像压缩（YUV4:2:0 缩减采样、缩减取样）（离散余弦变换 DCT算法）（量化）（熵编码）（霍夫曼哈夫曼）
文章目录 20191026 20220414 更新,更系统去了解里面的编码压缩流程科普:关于图像格式JPG和JPEG你知多少? 一.前言二.JPEG和JPG的关系三.色彩空间转换缩减取样离散 ...
jpg,png,gif图片格式的区别和优劣
为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法. 除此之外,我们在平时工作中 ...
png、jpg、gif三种图片格式的区别
为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法. 除此之外,我们在平时工作中 ...
(转)了解一下，各种图片格式的区别
在开发过程中,经常涉及到要用到图片,但是图片有很多不同的格式,他们之间有什么区别呢,我们在使用的时候又该如何选择呢?本文介绍和比较几种常见图片文件格式的优缺点,并介绍不同的文件格式对应用程序性能的影响 ...
几种基本图片格式的区别与不同（bmp,jpg,png,gif,tif）
Hello,我们又见面了! 本文为EricNTH的原创博客,转载请注明出处. 本文写于两年前,有一万多阅读,本人实在激动,便扩充了webp.ico.svg.raw等内容,修正了原有的错误内容,搬到了我 ...
JPG PNG GIF BMP图片格式的区别
类型优点缺点应用场景相同图片大小比较 BMP 无损压缩,图质最好文件太大,不利于网络传输 152K GIF 动画存储格式最多256色,画质差 53K PNG 可保存透明背景的图片 ...

网页常见的图标图片格式的区别

网页中几种格式的图片图标的区别

一.unicode

二.canvas

三.svg

四.webp

网页常见的图标图片格式的区别相关推荐

最新文章

热门文章