作为前端开发人员,了解一些常见的图片格式是必不可少的,接下来就简单地介绍一些常见的图片格式,方便日后查阅。图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特性可以方便我们在制作网页时选取合适的图片格式。常见的图片格式及一些特性如下:
首先我们知道在网站制作中网站设计图片是重要的,但是在使用的同时也分好多中的类型的额,你懂吗 现在和大加分享一下,网站设计图片使用得恰当与否与网站设计完成后的关键字排名同样有着千丝万缕的联系,如果网站设计图片使用得不当很有可能会影响到网站打开的速度,降低了网站的客户体验,同时也影响到搜索引擎的抓取。在这篇文章中,我们就来和大家一起探讨一下网站设计过程中常用格式图片各自的一些优势与不足,希望可以有效的帮助大家进行正确的选择。
网站设计常用格式图片之JPG
这是一款以 24 位颜色存储的图像,它不仅色彩丰富,而且非常清晰细腻,可以支持高达 100:1 的文件压缩处理,同时,更是广泛的支持 Internet 标准,是网站设计中最常用的一种图片格式。
但是将 JPG 图片进行压缩处理存储于很小的空间的代价便是图像质量,因此一些颜色较少、对比级别较强烈、实心边框或纯是色区域大的简单 JPG 图像在经过压缩后便无法再保持一个理想的效果。
这一类格式的图片比较适用于网站设计中色彩丰富清晰细腻的人像风景类大图。
网站设计常用格式图片之GIF
GIF 格式的图片同样广泛支持 Internet 标准,同时它还支持有限的透明度、压缩、交错和多图像图片即动画,也支持无损耗压缩,更重要的是目前几乎所有网站制作相关软件都支持这种格式的图片。
不足的是 GIF 格式的图片只支持 256 色调色板,也没有半透明效果或褪色效果
支持动画、只有全透明和不透明两种模式、只有256种颜色
它最大的特点是支持动画,但对于图片透明度的支持并不好,只有全透明和不透明两种模式,由于它只有256种颜色,所有用来保存色彩丰富的照片就不行了。它可以用来做一些常见的图形、图表之类的,对于动画图像我们肯定会选择gif,这也是为什么动态图片通常看起来颜色都比较失真的原因。这种类型的图片格式比较适用于网站设计当中色彩比较简单、颜色比较少、对比级别比较强烈、实心边框或纯色区域大的较简单的小图像
网站设计常用格式图片之PNG
PNG 格式的图片又分为 PNG-8 、 PNG-24 两种
其中,PNG-8 与 GIF 类似,支持 256 色调色板 ,而 PNG-24 只支持 48 位真彩色,凡是 GIF 拥有的优势 PNG-8 都拥有,GIF 所没有的优势 PNG-8 也有,同样的文件,PNG-8 格式比 GIF 要小, PNG-8 的特点使得它在网站设计切图环节深受网站设计师的喜爱。采用无损压缩算法、体积也相对较小、支持背景透明、不支持动画。PNG可以以任何颜色深度存储图像,也支持高级别的无损耗压缩、支持伽玛校正,支持交错,受最新 Web 浏览器的支持,能够提供长度比 GIF 小30%的无损压缩图像文件,最高支持 48 位真彩色图像以及 16 位灰度图像,渐近显示和流式读写。不足的是较旧的浏览器和程序可能不支持 PNG 文件,适用于网站设计当中色彩比较丰富的规则渐变图像。
最后总结:
在网页制作中,如何选择合适的图片格式呢?
1. 使用大幅面图片时,如果要使用不透明背景时,首选jpg图片,因为它的容量相对最小;如果要使用透明或半透明背景的图片时,就使用png图片。
2.使用小幅面图片或图标图片时,如果图片含多种颜色,可以使用gif或png图片;如果图片的色彩很单一,而且要求有很好的显示效果放大不失真,可以使用svg图片;如果要求图片是动画的,可以使用gif。