制作网页常见图片格式及特性介绍

2024-01-24    分类: 网站建设

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

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。

标题名称:制作网页常见图片格式及特性介绍
分享网址:https://www.cdcxhl.com/news17/315217.html

成都网站建设公司_创新互联,为您提供小程序开发网站设计域名注册品牌网站设计建站公司网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

手机网站建设