3.1、常用图片格式

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

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、制作网页图标时候,

  • 如果图标含多种颜色,可以使用gifpng图片;
  • 如果图标是单色,而且要求有很好的显示效果,可以使用svg
  • 如果是动画图标,可以使用gif

原文地址:https://www.cnblogs.com/LiuYanYGZ/p/12254595.html

时间: 2024-10-29 19:08:08

3.1、常用图片格式的相关文章

web开发常用图片格式

web开发常用图片格式有:gif   jpg/jpeg    png gif:图片压缩率高,可以显示动画,但是只能显示256色,可能造成颜色丢失. jpg:图片压缩率高(有损压缩),可以用小文件来显示,网页上比较常用. png:该格式综合了gif.jpg优势,在上传时会首先压缩到极致,但不能显示动画. 图片保真度:png > jpg > gif web开发常用图片格式

常用图片格式——笔记

1.BMP格式 BMP是英文Bitmap(位图)的简写,该格式是Windows操作系统中的标准图像文件格式,能够被多种Windows应用程序所支持,这种格式的特点是包含的图像信息较丰富,几乎不进行压缩,缺点是占用磁盘空间过大. 2.GIF格式 GIF格式是英文Graphics Interchange Format(图像交换格式)的缩写.GIF格式是用来交换图片的,其特点是压缩比高,磁盘空间占用较少,因此这种图像格式迅速得到了广泛的应用. 3.JPEG格式 JPEG也是常见的一种图像格式,JPEG

怎么转换常用图片格式,jpg格式怎么转换

图片的格式是分很多种的,我们最常用的图片格式大概就是jpg.png.bmp,但是可能由于各种需要需要转换格式,比如我们在上传自己的×××件的时候,可能会有专门允许的格式,那这个时候就需要将照片转换成需要的格式了,那怎么转换常用图片格式,jpg格式怎么转换呢? 1.首先今天要说的是一个电脑端的转换工具--迅捷图片格式转换器,可以相互转换常用图片格式,也可以将heic格式转为常用格式,并且可以压缩图片: 2.默认的界面就是常用图片格式的转换,如果转换一张图片的话点击"添加图片",批量转换格

常用图片格式

一.webP 由谷歌推出的新一代图片格式,在压缩方面比当前JPEG格式更优越. 与JPEG相同,WebP是一种有损压缩.但谷歌表示,这种格式的主要优势在于高效率.在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%.美中不足的是,WebP格式图像的编码时间“比JPEG格式图像长8倍.尽管WebP格式尚未像JPEG格式那样,得到各种软硬件的广泛支持,但谷歌推广这一格式的优势在于Chrome浏览器. 二.BMP格式 BMP是英文Bitmap(位图)的简写,它是Windows操作系统

常用的图片格式

常用图片格式 图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下: 1.psd psd是photoshop的专用格式,UI设计师使用photoshop设计效果图,最后会将psd格式的效果图交付给前端工程师,这种格式是不压缩的,而且保留了图层.透明和半透明等图片信息,所以这种图片格式的容量相对来说是很大的,前端工程师使用这种格式的效果图来切图制作网页,但是网页中不会使用这个格式的图片,它的作用一是保存

前端开发中常用的几种图片格式及其使用规范

在介绍图片格式之前,首先说一些额外的东西. 矢量图与位图. 矢量图是通过组成图形的一些基本元素,如点.线.面,边框,填充色等信息通过计算的方式来显示图形的.一般来说矢量图表示的是几何图形,文件相对较小,并且放大缩小不会失真. 这里有一点要注意的是web开发中用到的图片都不是矢量图,即使是一个三角形,只有一个边框,都是位图. 那么矢量图在哪里有用到呢? 我目前的知识池就知道一个图标字体,比如 font-awesome 目前在前端的开发中常用的图片格式有三种:jpg,png,gif.这些都是位图.

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

五种常用的图片格式及其是否有数据压缩的总结 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:本文主要介绍五种最常见和最常用的图像格式:BMP,PNG,JPEG,JPEG200,以及GIF.在进行图像处理相关应用之前第一步首先是能够读取这些图像文件,虽然很多开发工具支持库比如OpenCV等已经帮助节省了这些工作的麻烦,便利的同时也使得开发人员不再熟悉这些基本的图像格式.本文的作用就在于将这五种常用的图像格式进行分条叙述,方便查阅. 内容借鉴主流图片格

WEB开发常用的图片格式

1.JPEG JPEG格式是一种大小与质量相平衡的压缩图片格式.通俗一点讲,就是:高的压缩比=低的图片质量=小的文件大小.反之,低的压缩比=高的图片质量=大的文件大小.由于JPEG文件无法保持100 %的原始图像的像素数据,所以它不被认为是一种无损图像格式. 用途: 由于这种极其敏感的平衡特性,JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片(照片)场合.反之,JPEG格式图片并不适合做简单色彩(色调少)的图片,比如LOGO,各种小图标(ICONS). 2.GIF GIF格式,是为使

有关图片格式的分析

图片格式是计算机存储图片的格式,常见的存储的格式有bmp,jpg,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw等. BMP图像文件格式 BMP是一种与硬件设备无关的图像文件格式.它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大.BMP文件的图像深度可选lbit.4bit.8bit及24bit.BMP文件存储数据时,图像的扫描方式是按从左到右.从下到上的顺序. 由于BMP文件