精华内容
下载资源
问答
  • 制作网页常见图片格式及特性介绍

    千次阅读 2019-05-22 15:22:39
    图片网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特性可以方便我们在制作网页时选取合适的图片格式常见图片格式及一些特性如下: 1. psd photoshop的专用格式网页上一般...

           作为前端开发人员,了解一些常见的图片格式是必不可少的,接下来就简单地介绍一些常见的图片格式,方便日后查阅。图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特性可以方便我们在制作网页时选取合适的图片格式。常见的图片格式及一些特性如下:

    1. psd

    photoshop的专用格式,网页上一般是不用这种格式的,它一般被用来辅助我们做网页,ui设计师给我们的就是这种格式的图片。

    优点:完整保存图像的信息,包括未压缩的图像数据,图层,透明等信息,方便图像的编辑。

    缺点:应用范围窄,图片容量相对比较大。

    2. jpg

    网页制作及日常使用最普遍的图像格式,如果网页中不需要透明背景,一般就会用这种图。

    优点:图像压缩率高,图像容量相对最小

    缺点:有损压缩,图像会丢失数据而失真,不支持透明背景,不能制作成动画。

    3.gif

    制作网页小动画的常用图像格式,比如平时经常发的动态的表情一般都是gif格式的。

    优点:无损压缩,图像容量小,可以制作成动画,支持透明背景。

    缺点:图像色彩范围最多只有256色,不能保存为色彩丰富的图像,不支持半透明,支持透明图像但是图像边缘有锯齿,如下图所示:

    4. png

    网页制作及日常使用比较普遍的图像格式,如果能支持动画则它完全可以取代gif。

    优点:无损压缩,图像容量小,支持透明背景和半透明背景,透明图像的边缘是光滑的,这是和gif相比它的一大优点,如下图所示:

    缺点:不能制作成动画。

    5. webp

    将要取代jpg的图像格式。

    优点:和jpg格式相同,但是容量相对比jpg还要小。

    缺点:和jpg格式相同,但是目前只有极少数的浏览器支持,像一些主流的浏览器谷歌,火狐,IE等都不支持这种格式。

    接下来说一下和上面图片实现原理不同的另一种类型的图片。上面介绍的5中图像都属于位图。位图,也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真。

    矢量图和位图的成像原理不同,它的图像轮廓是由函数曲线生成的,当放大图像时。实际的原理就是将曲线乘以一个倍数,图像可以轻易地放大,而且不出现像素块,图像边缘也不会出现锯齿。一句话说就是位图放大会失真,矢量图放大后不会失真。下面介绍一些常见的矢量图格式。

    1. svg

    目前首选的网页矢量图格式。

    优点:图像容量小,图像放大不失真,支持透明背景和半透明色彩,图像边缘光滑。

    缺点:色彩不够丰富。

    2. flash

    即将退出历史舞台的重量级网页矢量图格式,注意它的后缀是.swf并不是.flash,而且想要在网页中插入flash图片时需要用embed元素而不是img元素,即使在网页中插入了,只有浏览器安装了相应的插件才能够显示,

    优点:图像容量小,图像放大不失真,支持透明和半透明色彩,图像边缘光滑,还可以制作动画,可编写交互,以前的一些网页直接就是用flash写的。

    缺点:不支持搜索引擎,比如说用百度搜索某个flash格式的图片根本搜不到它,运行慢,浏览器需要装插件才能支持。

    总结

    在网页制作中,如何选择合适的图片格式呢?

    1. 使用大幅面图片时,如果要使用不透明背景时,首选jpg图片,因为它的容量相对最小;如果要使用透明或半透明背景的图片时,就使用png图片。

    2.使用小幅面图片或图标图片时,如果图片含多种颜色,可以使用gif或png图片;如果图片的色彩很单一,而且要求有很好的显示效果放大不失真,可以使用svg图片;如果要求图片是动画的,可以使用gif。

    本人是个小白,如果有错误欢迎指正,啦啦啦。

     

     

     

    展开全文
  • 导读:GIF、JPEG 和 PNG 是三种常见图片格式分析。 GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 颜色(一般叫 8 bit 彩色),支持单一透明色; JPEG:1992 年出世,照片一般 GIF、JPEG 和 PNG ...

    导读:GIF、JPEG 和 PNG 是三种最常见的图片格式分析。 GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色(一般叫 8 bit 彩色),支持单一透明色; JPEG:1992 年出世,照片一般

    GIF、JPEG 和 PNG 是三种最常见的图片格式分析。

    GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色(一般叫 8 bit 彩色),支持单一透明色;

    JPEG:1992 年出世,照片一般都用这个格式,有损压缩,24 bit 真彩色(224 = 17 万种颜色),不支持动画,不支持透明色;

    PNG:1996 年问世,无损压缩,最常见的使用格式是 256 索引色(PNG-8)和 24 bit 真彩色(PNG-24)(当然 PNG 支持的颜色格式远不止此),支持 full alpha 通道(256 级可调半透明色),不支持动画。

    简单比较:

    JPEG v.s. PNG:JPEG 在照片压缩方面拥有巨大的优势,这方面无可替代,但是 JPEG 是有损压缩,图片质量会有损失。另外,一般屏幕截屏用 PNG 格式不但比 JPEG 质量高而且文件大小还更小(维基有图)。

    GIF v.s. PNG:GIF 只在简单动画领域有优势(其实,GIF 256 色限制以及无损压缩机制导致高质量的动画的发布一般都使用 Flash 等格式),只要没有动画,PNG 完全可以取代 GIF。

    防锯齿:下面是 GIF 和 PNG 防锯齿处理的对比,六张小图片是分别放到浅黄和深绿背景下的情景,三张大图是深绿背景情形的放大。由于 GIF 没有半透明一说,所以防锯齿处理时只能假设背景是白色,这样的 GIF 放在深色背景下还不如不防锯齿。而 PNG 图片可以轻松应付各种背景颜色,特别适合用来做网页和应用程序里的通用防锯齿图标适应不同皮肤,没有 full alpha 通道的 JPEG 和 GIF 都做不到这一点。


    0_12815846497O5R.gif

    可以看到,除了照片和动画,PNG 是最好的格式,但是 PNG 为什么到最近几年才流行起来?有很多原因:

    PNG 诞生的时候互联网已经初具规模,当时 GIF 和 JPEG 已经是很流行的格式了,换格式的迁移成本是很大的,有时候惯性是一个很可怕的东西。

    浏览器的 PNG 支持比较落后,比如 IE 就是到 IE4 才开始支持 PNG。

    PNG 当初标准里把 alpha 通道写成了 optional 的,土鳖的 IE 一直到 IE7 才开始支持 full alpha 通道。而一般网页图标 256 色足够,所以为了支持 IE6,PNG 相对于 GIF 毫无优势可言,更何况 GIF 还支持动画。

    尽管从原理上说,同样质量的 PNG 图片文件一般要比 GIF 要小,但是早期很多图片编辑器不支持 PNG,甚至支持的也没有完全利用 PNG 压缩算法里最精妙的部分(最典型的例子就是早期的 Photoshop),保存出来的 PNG 往往巨大无比。现在的软件已经没有这些问题了,但是这个偏见还广泛存在。


    展开全文
  • 网页常见的图标图片格式的区别

    千次阅读 2018-11-21 14:38:41
    网页中几种格式图片图标的区别 一.unicode 1.简介 unicode是字体在网页端最原始的应用方式,可以用来绘制一些简单的图标。 2.功能: 兼容性最好,支持ie6+,及所有现代浏览器。支持按字体的方式去动态调整...

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

    一.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图片的对比:

    展开全文
  • 网页图片常见格式及其特点

    千次阅读 2019-08-23 20:51:30
    靠损失图片本身的质量来减少图片的体积,适用于颜色丰富的图像;(像素点组成的越多越清晰) 2、gif:无损压缩格式 靠损失图片的色彩量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像; 3、png...

    1.jpg:有损压缩格式
    靠损失图片本身的质量来减少图片的体积,适用于颜色丰富的图像;(像素点组成的越多越清晰)
    2、gif:无损压缩格式
    靠损失图片的色彩量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;
    3、png无损压缩格式
    损失图片的色彩量来减少图片的体积,支持透明,不支持动画,适用于颜色数量较少的图像;
    4、svg:可缩放矢量图
    svg图像在放大或改变尺寸的情况下其图形质量不会有所损失 与其他图像格式相比,使用svg的优势在于:
    svg可被非常多的工具的工具读取和修改
    svg与jpg和gif图像比起来,尺寸更小,且可压缩性更强
    svg图像可在任何的分辨率下被高质量地打印
    svg可在图像质量不下降的情况下被放大
    svg图像中的文本是可选的,同时也是可搜索(很适合制作地图)
    svg格式的图片可以通过阿里的iconfont图库进行生成,或者使用在线工具将其他格式转svg格式。

    展开全文
  • web常用的三种图像格式

    千次阅读 2017-05-14 19:48:32
    网页中所用的三种图片格式分别是JPEG、PNG、GIF。不同的图片需要选择不同的存储格式,这样能够避免由于图片格式错误而造成页面性能降低。 已经有很多大牛详细的整理过三种图片格式的内容了,现在仅对三种web图片...
  • 图片常见的8种格式

    2018-04-12 09:05:00
    常见的有81,BMP格式:Windows系统下的标准位图格式,未经过压缩,一般图像文件会比较大。在很多软件中被广泛应用.2,JPEG格式:也是应用最广泛的图片格式之一,它采用一特殊的有损压缩算法,将不易被人眼察觉的...
  • GIF是英文单词Graphic Interchange Format的缩写,即是图像交换格式,也就是通常咱们所说的动图,在其中文件最多可以使用256颜色,最适合显示色调不连续或者大面积单一的颜色的图像,像网页制作中的导航条,按钮,...
  • 种常见图片格式优缺点分析

    千次阅读 2017-11-17 14:04:22
    图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两。 有损压缩。指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种损失是不...
  • 网页中常见的图像格式有两:JPEG,GIF ...二.GIF(图形交换格式)是网页图像中很流行的格式。虽然它仅包括256色彩,但GIF提供了出色的,几乎没有丢失的图像压缩,并且GIF可以包含透明区域和很多动画。它靠水平扫描
  • 常见的数字图像格式

    千次阅读 2016-05-21 19:26:29
    1、BMP格式BMP是英文Bitmap(位图)的简写,Windows操作系统中的标准图像文件格式。 优点:包含的图像信息丰富,几乎不进行压缩。 缺点:占用的存储空间过大。2、GIF格式GIF是英文Graphics Interchange Format...
  • 在进行前端页面开发时,不可避免的会遇到图片格式...比较常见图像文档格式三种:JPG/JPEG、PNG8/PNG24、GIF。 ********************************************************************************************
  • 前端常见图片格式整理

    千次阅读 2016-06-26 22:30:32
    前端常见图片格式整理
  • 常见图片格式大全

    2019-09-18 07:15:29
    常见图像文件格式有哪些?各有什么特点?什么状况下用哪种格式?本文我们就通过图形文件的特征后缀名(就是如图.bmp这样的)来逐一认识当前常见的图形文件格式。 1.BMP:BMP格式是微软公司制定的图形标准,最大的...
  • 常见图像文件格式详解

    千次阅读 2006-07-25 14:53:00
    常见图像文件格式又有哪些呢? 一、BMP格式 BMP是英文Bitmap(位图)的简写,它是Windows操作系统中的标准图像文件格式,能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的Windows应用程序的...
  • 常见图片文件格式

    千次阅读 2018-01-09 22:47:21
    特点是包含的图像信息较丰富,几乎不压缩,但由此导致了它与生俱生来的缺点--占用磁盘空间过大,现在很少会在网页中使用。目前在单机上比较流行。 为Windows位图,它是Windows操作系统中的标准图像文件格式,能够被...
  • 目前在网络上最常用的图像格式主要有JPEG、GIF、PNG格式。 JPEG格式是目前网络上最流行的图像格式,可以把文件压缩到最小,在 Photoshop软件中以JPEG格式储存时,提供11级压缩级别,目前各浏览器均支持JPEG格式。它...
  • 常见图像文件格式 无损压缩

    万次阅读 2016-03-03 09:38:47
    常见图像文件格式  一、BMP格式 BMP是英文Bitmap(位图)的简写,它是Windows操作系统中的标准图像文件格 式,能够被多 Windows应用程序所支持。随着Windows操作系统的流行与丰富的 Windows应用程序的...
  • 常见图片格式及其区别小结

    千次阅读 2019-02-17 16:50:39
    .gif : GIF格式图片是分为静态和动态两的。静态的GIF格式图片和JPG格式图片无异,而动态的GIF图片则是由多幅图片保存为一个图片,形成动画效果而制成的.然而,它们只能包含最多 256 颜色,因此并不适合用在...
  • 网页制作中图片格式常用三种格式(jpg,png,gif)1jpg图片是我们最常见的。jpg:可压缩的,有损图片质量的格式。虽然可压缩,它的色彩还是比较丰富。特点:文件小、色彩丰富。在网页中常用。劣势:不能保存透明背景...
  • 下载完成以后把gif图片保存到你项目的img文件夹中,方便使用。 ** loading方法 1.很low的方法——直接使用定时器 <!DOCTYPE html> <html lang="en"> <head&...
  • 常见图片格式简介

    千次阅读 2012-07-12 13:08:28
    BMP是英文Bitmap(位图)的简写,它是Windows操作系统中的标准图像文件格式,能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的Windows应用程序的开发,BMP位图格式理所当然地被广泛应用。这种...
  • 图片常见的存储格式有:bmp,jpg,png,gif,tiff,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp等。 BMP:采用位映射存储格式,不采用其他任何压缩,所占用的空间很大。 JPG:最...
  • css,网页常见功能,图片、div垂直水平居中
  • web开发常见图片格式-转

    千次阅读 2018-08-09 11:49:00
    web开发常见图片格式 如今互联网是一个五彩缤纷的世界,自然少不了图片的点缀,作为web系统主要素材之一,我们要熟知常见图片格式,而且需要处理部分会需要处理的图片格式常见格式如下:.ico, .jpeg, ....
  • png、jpg、gif三种图片格式的区别

    万次阅读 2017-12-08 10:05:10
    为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法。 除此之外,我们在平时工作中...
  • 常见图片格式优缺点总结

    千次阅读 2016-06-12 11:02:48
    今天项目中设计到很多的图片,有常见的PNG,JPEG也有其他一些格式图片,今天刚好没事,就总结一下各种格式图片的优缺点:BMP:优点(无损压缩,图质最好),缺点(文件太大,不利于网络传输) GIF:优点(动画...
  • 网页设计中最常见的9设计风格

    千次阅读 2017-09-30 14:34:13
    网页设计中最常见的9设计风格 如今的网站千千万,每个网页设计都有自己独特的风格。今天唐人设计就来为大家总结网页设计中最常见的9设计风格,一起来看看吧! ​ 扁平化设计可以说是时下最常用的网页...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 123,284
精华内容 49,313
关键字:

常见的三种网页图像格式是