精华内容
下载资源
问答
  • 前端 常用图片格式

    千次阅读 2018-05-14 20:11:56
    常用图片格式图片是网页制作中很重要的素材,图片不同的格式,每格式都自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下: 1、psd psd是photoshop的专用格式,UI...

    常用图片格式

    图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下:

    1、psd
    psd是photoshop的专用格式,UI设计师使用photoshop设计效果图,最后会将psd格式的效果图交付给前端工程师,这种格式是不压缩的,而且保留了图层、透明和半透明等图片信息,所以这种图片格式的容量相对来说是很大的,前端工程师使用这种格式的效果图来切图制作网页,但是网页中不会使用这个格式的图片,它的作用一是保存图片的原始数据,二是方便图片的修改。

    2、jpg
    jpg是一种有损压缩格式,压缩效率高,容量相对来说最小,网络传输速度快,它不能存为透明背景,在网页中应用最广,一般在不需要透明背景的时候就使用这种图片。

    3、gif
    gif是一种无损压缩格式的图片,最多只有256种颜色,颜色丰富的图片转化为这种格式会颜色失真。它的背景可以是透明的,但不能是半透明的,透明背景中的图像,如果边缘轮廓是曲线的,会产生锯齿,它还可以保存为动画格式。

    4、png
    png的目的是为了代替gif图片,无损压缩,背景可以是透明或者半透明的,透明图像边缘光滑,没有锯齿,网页中需要透明或者半透明背景的图片,首选是png图片。png也是firework的专用格式,也可以包含图层信息。firework是另外一款可以和photoshop相比的图像处理软件。也有少量的UI设计师使用这种软件来设计网页效果图,他们设计的效果图就是带图层的png格式的,碰到这种设计师,如果我们习惯了photoshop切图,可以将带图层的png效果图转化成psd图片再处理。

    5、webp
    它是由谷歌于2010年推出的新一代图片格式,在压缩方面比当前jpg格式更优越,在质量相同的情况下,WebP格式图像的体积要比jpg格式图像小40%,不过这种图片还没有得到广泛的浏览器支持,仅在Chrome和Opera上支持,在其他浏览器上需要安装插件才可以显示,目前还没有大规模使用。

    位图和矢量图
    位图也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真。上面讲的5种图像都属于位图。
    矢量图和位图组成图像的原理不同,它的图像轮廓是由函数曲线生成的,当放大图像时,实际的原理就是将曲线乘以一个倍数,图像可以轻易地放大,而且不会出现像素块,图像边缘也不会出现锯齿。

    svg
    svg是一种矢量二维图形格式,它是基于xml标记语言描述的,可以通过任何文本编辑器创建。它的优点是文件容量小,放大不失真,而且背景也可以是透明的。目前大量使用这种格式来制作网页图标或者网页地图,由于它是矢量的,所以在不同终端屏幕上(pc、手机)都有很好的显示效果。

    flash
    flash是一种矢量动画文件格式,曾经在网络上风靡一时,如今已逐渐退出历史舞台,原因是它的技术更新跟不上发展,这种格式既可以是静态的图形,还可以是多媒体动画,还可以加入用户交互和数据,这是它曾经很流行的原因,这种格式名为swf,flash是对它的统称。这种格式在网页中已经很少使用了,它的很多优秀特性,可以用HTML5取代。swf文件中衍生出一种视频格式flv,它是一种流媒体视频格式,由于它有文件容量小,可以边下载,边观看等优点,目前广泛应用在视频网站中。

    总结
    在网页制作中,如何选择合适的图片格式呢?
    1、网页制作中,如果要使用不透明背景的图片,就使用jpg图片;如果要使用透明或者半透明背景的图片,就使用png图片;
    2、制作网页图标时候,如果图标含多种颜色,可以使用gif或png图片;如果图标是单色,而且要求有很好的显示效果,可以使用svg;如果是动画图标,可以使用gif。

    展开全文
  • 常用图片格式汇总及区别 首先说一说为什么要学习图片格式呢,因为身为一个前端开发的程序员,或者你是一个全栈开发的工程师...文章目录常用图片格式汇总及区别前言一、常见的图片格式哪些?二、各种格式的特点1、**p

    常用图片格式汇总及区别

    首先说一说为什么要学习图片格式呢,因为身为一个前端开发的程序员,或者你是一个全栈开发的工程师,那么你就会接触的网页,那么网页中会有很多,**图片**,那么问题来了,这些图片有不同的格式,但是为什么会有各种各样的图片格式,什么时候应该用什么图片格式呢? (当然有的时候,**面试**官会突然问你,你了解,你所知道的图片格式有哪些,我真是醉了,我就是那个曾经被问到了,不知道怎么说的人。醉了。。。)


    前言

    本篇文章主要总结了,各种常用的图片格式的特点以及它们之间的区别。


    一、常见的图片格式有哪些?

    png,svg,jpeg(jpg),gif,tiff,webp,bmp
    
    

    二、各种格式的特点

    1、png格式

    (360百科部分介绍)

      PNG,图像文件存储格式,其目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。可移植网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的"PNG’s Not GIF",是一种位图文件(bitmap file)存储格式,
    读成"ping"。PNG使用从LZ77派生的无损数据压缩算法,一般应用于JAVA程序中,或网页或S60程序中是因为它压缩比高,生成文件容量小

    特点:
      一、体积小网络通讯中因受带宽制约,在保证图片清晰、逼真的前提下,网页中不可能大范围的使用文件较大的bmp、jpg格式文件。
      二、无损压缩 PNG文件采用LZ77算法的派生算法进行压缩,其结果是获得高的压缩比,不损失数据。
      三、更优化的网络传输显示 PNG图像在浏览器上采用流式浏览,即使经过交错处理的图像会在完全下载之前提供浏览者一个基本的图像内容,然后再逐渐清晰起来。它允许连续读出和写入图像数据,这个特性很适合于在通信过程中显示和生成图像。
      四、支持透明效果 PNG可以为原图像定义256个透明层次,使得彩色图像的边缘能与任何背景平滑地融合,从而彻底地消除锯齿边缘。这种功能是GIF和JPEG没有的。
      五、PNG同时还支持真彩和灰度级图像的Alpha通道透明度。

    2、SVG格式

      全称Scalable Vector Graphics,是无损的、矢量图。(例如用visio画的流程图就是矢量图)
      SVG跟上面这些图片格式最大的不同,是SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企业Logo、Icon等。
      SVG是很多种矢量图中的一种,它的特点是使用XML来描述图片。借助于前几年XML技术的流行,SVG也流行了很多。使用XML的优点是,任何时候你都可以把它当做一个文本文件来对待,也就是说,你可以非常方便的修改SVG图片,你所需要的只需要一个文本编辑器。
      SVG并非只能绘制简单的Logo类的图片,它可以绘制出精致的图片的。
      SVG加载速度会快于PNG,但渲染速度会慢于PNG,毕竟PNG有硬件加速,但平均下来,加载速度的提升弥补了绘制的速度缺陷。

    3、jpeg格式

    优点:
      摄影作品或写实作品支持高级压缩。
      利用可变的压缩比可以控制文件大小。
      JPEG 广泛支持 Internet 标准。
    缺点:
      有损耗压缩会使原始图片数据质量下降。
      当您编辑和重新保存 JPEG 文件时,JPEG 会混合原始图片数据的质量下降。这种下降是累积性的。
      PEG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

    3、gif格式

    优点:
      GIF 广泛支持 Internet 标准。
      支持无损耗压缩和透明度。
      动画 GIF 很流行,易于使用许多 GIF 动画程序创建。
    缺点:
      GIF 只支持 256 色调色板,因此,详细的图片和写实摄影图像会丢失颜色信息,而看起来却是经过调色的。
      在大多数情况下,无损耗压缩效果不如 JPEG 格式或 PNG 格式。
      GIF 支持有限的透明度,没有半透明效果或褪色效果(例如,alpha 通道透明度提供的效果)

    4、tiff格式

    优点:
      TIFF 是广泛支持的格式,尤其是在 Macintosh 计算机和基于 Windows 的计算机之间。
      支持可选压缩。
      可扩展格式支持许多可选功能。
    缺点:
      TIFF 不受 Web 浏览器支持。
      可扩展性会导致许多不同类型的 TIFF 图片。并不是所有 TIFF 文件都与所有支持基本 TIFF 标准的程序兼容。


    5、WebP格式

      WebP是谷歌开发的一种新图片格式,WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。
      从名字的简单直白,就可以知道它的出现就是为了web,现在各种各样的网站上有着大量的图片,但是如果图片的大小可以大大减小,那么将大大较小浏览器和服务器之间的数据传输对的速度以及提升用户访问网站的体验。
      在无损压缩的情况下,相同质量的WebP图片,文件大小要比PNG小。
      在有损压缩的情况下,具有相同图片精度的WebP图片,文件大小要比JPEG小。
      WebP图片格式支持图片透明度
      想象Web上的图片之多,百分之几十的提升,是非常非常大的优化。目前只有Chrome浏览器和Opera浏览器支持WebP格式,所以WebP的应用并不广泛。为了使用更先进的技术,比如WebP图片格式,来压缩互联网上传输的数据流量,谷歌甚至提供了Chrome Data Compression Proxy,设置了Chrome Data Compression Proxy作为Web代理之后,你访问的所有网站中的图片,在经过Proxy的时候,都会被转换成WebP格式,以降低图片文件的大小。
      下面是一个更加直观的例子:
      在这里插入图片描述

    6、BMP格式

      BMP(全称Bitmap)是Windows操作系统中的标准图像文件格式
      它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准,因此在Windows环境中运行的图形图像软件都支持BMP图像格式。
      是一种与硬件设备无关的图像文件格式,使用非常广。
      BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。
      由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准,因此在Windows环境中运行的图形图像软件都支持BMP图像格式。
    特点:
      BMP 是(Windows 位图) Windows 位图可以用任何颜色深度(从黑白到 24 位颜色)存储单个光栅图像。
      Windows 位图文件格式与其他 Microsoft Windows 程序兼容。
      它不支持文件压缩,也不适用于 Web 页。
    从总体上看,Windows 位图文件格式的缺点超过了它的优点。为了保证照片图像的质量,请使用 PNG 、JPEG、TIFF 文件。BMP 文件适用于 Windows 中的墙纸。
    如果你是用过eclipse你就会发现打开eclipse的首页图片就是Bmp格式的。

    7、ico格式

      ico是Icon file的缩写,是Windows的图标文件格式的一种,可以存储单个图案、多尺寸、多色板的图标文件。
    图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识,界面中的图标是功能标识。
    就是我们在打开网页的时候标题旁边的就是ico图片。
    在这里插入图片描述

    8、格式转换的方法

    当然这些图片之间是可以相互转换的,但是如果你说可以改图片的后缀名,这样确实改了,但是治标不治本,图片内在的处理格式还是没变。
    网上的在线图片格式转换器有很多,也有很多的转换图片格式的软件。(基本都是要付费的,你懂的。。。)
    这款还是比较好用的:
    在这里插入图片描述

    补充知识点:

    1、有损vs无损

    在上面的图片格式中有提到有损和无损压缩图片下面就了解一下:

    图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种。
      有损压缩:指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种损失是不可逆的,我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段,是按照一定的算法将临近的像素点进行合并。
      无损压缩:只在压缩文件大小的过程中,图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息

    2、点阵图vs矢量图

      点阵图,也叫做位图,像素图。构成点阵图的最小单位是象素,位图就是由象素阵列的排列来实现其显示效果的,每个象素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个象素,我们可以改变图像的色相、饱和度、明度,从而改变图像的显示效果。既然是像素图,那么只要放大,你就会看到图片每一个像素点。(失真)
      矢量图,也叫做向量图。矢量图并不纪录画面上每一点的信息,而是纪录了元素形状及颜色的算法,即运算图片的运算结果,不管你放大或者缩小其显示效果仍然相同(不失真)

    总结

    对于一个前端开发者,来说知道了解这些就够了。细节实现原理不必深究。本文是从很多文章中总结出来需要了解并提取出的知识点也加入了自己的一些内容和理解。如有问题,虚心接受,改正。

    展开全文
  • 种常用图片格式的使用场景

    千次阅读 2018-09-15 07:24:33
    GIF:1:256色2: 无损,编辑 保存时候,不会损失。3:支持简单动画。4:支持boolean透明,也就是要么完全透明,要么不透明JPEG:1:millions of...

    640?wx_fmt=jpeg

    GIF:

    1:256色

    2: 无损,编辑 保存时候,不会损失。

    3:支持简单动画。

    4:支持boolean透明,也就是要么完全透明,要么不透明

    JPEG:

    1:millions of colors

    2: 有损压缩, 意味着每次编辑都会失去质量。

    3:不支持透明。

    4:适合照片,实际上很多相机使用的都是这个格式。

    PNG:

    1:无损,其实PNG有好几种格式的,一般分为两类:PNG8和truecolor PNGs;

    与GIF相比:

    • 它通常会产生较小的文件大小。

    • 它支持阿尔法(变量)透明度。

    • 无动画支持

    与JPEG相比:

    • 文件更大

    • 无损

    • 因此可以作为JPEG图片中间编辑的中转格式。

    结论:

    JPEG适合照片

    GIF适合动画

    PNG8适合其他任何种类——图表,buttons,背景,图表等等。


    展开全文
  • 本文主要介绍五最常见和最常用的图像格式:BMP,PNG,JPEG,JPEG200,以及GIF。在进行图像处理相关应用之前第一步首先是能够读取这些图像文件,虽然很多开发工具支持库比如OpenCV等已经帮助节省了这些工作的麻烦,...

    五种常用的图片格式及其是否有数据压缩的总结


    声明:引用请注明出处http://blog.csdn.net/lg1259156776/


    说明:本文主要介绍五种最常见和最常用的图像格式:BMP,PNG,JPEG,JPEG200,以及GIF。在进行图像处理相关应用之前第一步首先是能够读取这些图像文件,虽然很多开发工具支持库比如OpenCV等已经帮助节省了这些工作的麻烦,便利的同时也使得开发人员不再熟悉这些基本的图像格式。本文的作用就在于将这五种常用的图像格式进行分条叙述,方便查阅。


    内容借鉴主流图片格式介绍

    BMP图像文件格式无压缩

      BMP是一种与硬件设备无关的图像文件格式,使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。
      由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准,因此在Windows环境中运行的图形图像软件都支持BMP图像格式。它是包括Windows在内多种操作系统图像展现的终极形式,能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的 Windows应用程序的开发,B

    展开全文
  • 常用图片格式   图片是网页制作中很重要的素材,图片不同的格式,每格式都自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下: 1、psd photoshop的...
  • 常用图片格式及其特点

    千次阅读 2015-12-06 19:42:29
    Windows 位图文件格式与其他 Microsoft Windows 程序兼容。它不支持文件压缩,也不适用于 Web 页。从总体上看,Windows 位图文件格式的缺点超过了它的优点。为了保证照片图像的质量,请使用 PNG 文件、JPEG 文件或 ...
  • 这里一点要注意的是web开发中用到的图片都不是矢量图,即使是一个三角形,只有一个边框,都是位图。 那么矢量图在哪里有用到呢? 我目前的知识池就知道一个图标字体,比如 font-awesome 
  • 每日一学(六)常用图片格式及比较

    千次阅读 2017-06-14 10:57:18
    图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两。 有损压缩。指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种损失是不可逆...
  • 常用图片格式支持的深度,通道,压缩情况 在介绍图片格式之前首先普及一下图片的基本知识: 彩色图像:每个像素由R、G、B三个分量表示,每个通道取值范围0~255。数据类型一般为8位无符号整形。 灰度图像:每个像素...
  • 于比较常用图片格式Png、Jpg、Gif、Bmp,我们需要针对不同的图片格式使用不同的控件来显示,这里就一个来解析图片格式的问题。我们不能单纯的用文件后缀名.png、.jpg、.jpeg、.gif、.bmp来区分图片格式,因为...
  • web常用的三图像格式

    千次阅读 2017-05-14 19:48:32
    已经很多大牛详细的整理过三种图片格式的内容了,现在仅对三web图片存储格式做一个简单归纳如下: 一、JPEG 适用于:照片和复杂图像使用 特点: 1.适合连续色调图像,如照片。  2.可以表示包含多达1600万
  • 常用web图片格式:gif、jpg、png、webp

    千次阅读 2020-08-23 21:12:50
    1.GIF(87年):使用无损压缩,支持256中颜色(一般叫8 bit...一张图片多次上传下载后,图片逐渐会失真。 优点 JPEG/JFIF是最普遍在万维网(World Wide Web)上被用来储存和传输照片的格式。JPEG在色调及颜色平滑变化的
  • Spark的数据读取与存储,常规来看可分为两个维度,文件格式和文件系统: 文件格式:Text文件、Json文件、Sequence文件和Object文件 文件系统:linux本地文件系统、HDFS、HBase、MySQL数据库 目录 一、文件...
  • 常用图像格式

    2020-01-11 14:28:42
    常用图像格式有bmp,tif,jpeg,png,gif等。 图像的基本数据结构 其中A通道,则图像可以做透明效果。 不能工具读取RGB的顺序不同 图像格式 如果将原始格式的图像直接存储到文件中是非常大的,如果使用zip或rar类的...
  • jpeg图片格式详解

    万次阅读 多人点赞 2017-09-29 16:27:41
    jpeg图片格式详解1. JPEG文件简介JPEG的全称是JointPhotographicExpertsGroup(联合图像专家小组),它是一种常用的图像存储格式, jpg/jpeg是24位的图像文件格式,也是一高效率的压缩格式,文件格式是JPEG(联合...
  • Java-图片格式

    千次阅读 2016-12-02 23:26:29
    Java图片格式这两天在处理...通过 url常见的图片格式有jpg(jpeg),png,gif这三,可以分别通过字符创的contains(“jpg”);contains(“png”); contains(“gif”) 来获取对应格式的图片,这种方法我认为是简单粗暴
  • 常见图片格式优缺点分析

    千次阅读 2017-11-17 14:04:22
    PNG是一比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8还支持透明度的调节,而GIF并不...
  • 常用图片jpg png jpeg gif等格式介绍

    千次阅读 2019-12-25 15:55:23
    常见的图片格式大全: JPEG (Joint Photographic Experts Group) TIFF (Tagged Image File Format) PNG (Portable Network Graphics) GIF (Graphics Interchange Format) BMP (Bitmap)PSD (Photoshop Document) SVG...
  • 【php】PHP判断图片格式的七方法

    千次阅读 2012-12-20 17:07:24
    摘要:图片上传是网站常用的程序模块,本文浅析php判断图片后缀格式的7方式。 正文: 使用php判断文件图片格式 1 2 $imgurl = ...
  • png、jpg、gif三种图片格式的区别

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

    千次阅读 2017-07-06 14:54:57
    做互联网产品的小伙伴一定不会对...在这里为大家介绍最常用的6原型图文件格式以及各自的优缺点。 一、Mockplus的原型图格式(.mp) Mockplus是一款快速原型设计工具。一拖一拽之间,便可完成原
  • 主流图片格式介绍

    千次阅读 2009-09-27 19:31:00
    不过比较常用格式就是那么几,要知道到底是,只要打开WINDOWS自带的画图程序就知道了。”开始“--》”所有程序“--》”附件“--》”画图“。然后保存就会出现你要将文件保存为哪种格式图片文件。包括:...
  • bmp图片格式详解

    万次阅读 多人点赞 2017-09-29 15:51:07
    bmp图片格式详解1. BMP文件简介BMP(Bitmap-File)图形文件是Windows采用的图形文件格式,在Windows环境下运行的所有图象处理软件都支持BMP图象文件格式。Windows系统内部各图像绘制操作都是以BMP为基础的。windows ...
  • 前端常见图片格式整理

    千次阅读 2016-06-26 22:30:32
    前端常见图片格式整理
  • 比较JPG、PNG、GIF、BMP图片格式

    千次阅读 2019-06-09 16:22:26
    基本概念比较四种图片格式实验分析 本文比较JPG、PNG、GIF、BMP四种常见的图片格式的优劣。 基本概念 首先需要了解电子图片的一些基本概念: 分辨率 可以用(水平像素数×垂直像素数)表示,即图片的长宽是多少个...
  • 图片的常见的8种格式

    2018-04-12 09:05:00
    在很多软件中被广泛应用.2,JPEG格式:也是应用最广泛的图片格式之一,它采用一特殊的有损压缩算法,将不易被人眼察觉的图像颜色删除,从而达到较大的压缩比(可达到2:1甚至40:1),因为JPEG格式的文件尺寸较小,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 172,713
精华内容 69,085
关键字:

常用的图片格式有哪四种