主机运维
当前位置:主页 > 建站资讯 > 主机运维 >
水平对比度GIF / JPEG / PNG / SVG教您如何合理选择图像格式
发布日期:2021-04-28 阅读次数: 字体大小:

PNG:可移植网络图形格式
在某种程度上,PNG是GIF和JPEG的组合。 这是因为其设计的原始目的是尝试替换GIF和jpeg格式,并添加了这两种文件格式所不具备的某些功能。 一方面,与gif格式相比,尽管gif支持透明的背景色,但它只有两种透明信息,即1和0,并且只有透明和不透明,而PNG支持0到255之间的alpha波段透明信息。 使图像透明区域清晰地分层,并且彩色图像和背景图像的边缘可以完美平滑地融合。 另一方面,与JPEG相比,由于PNG使用特殊的编码方法来标记重复的数据,因此PNG可以实现较高的图像压缩率并促进网络传输,同时保留与图像有关的所有细节,而不会降低图像质量。 这也是PNG的最大功能。PNG适用于需要重新编辑,复杂颜色或透明度的图像,但并非与所有应用程序和平台都通用。PNG也可以分为两种格式:PNG8和PNG24。PNG8使用8位索引值在调色板上查找颜色,PNG24使用24位保存像素值。png格式通常用作图片素材。
SVG:可缩放矢量图形状
与上述三种图像格式的最大区别在于,SVG并非位图格式,而是矢量图形状格式,这意味着它可以以任何分辨率显示,而不会破坏图像的清晰度和细节。 这是因为位图图像存储图像上每个点的像素值,而矢量图图像使用点和线来描述对象,从而可以提供清晰的图像。 另外,尽管svg图像中的文本可以表现出类似图像的修饰效果,但仍以文本形式存在,可以将其读为搜索引擎蜘蛛,这也方便视障读者使用工具进行浏览。 一般来说,svg文件比JPEG和GIF文件小,并且在移动设备上下载或显示时,它更快。 还有一点,svg图形非常灵活,我们可以将位图图形嵌入到这样的矢量图形状中。 下图显示了一些svg矢量图标。不同文件格式的适用场景:
gif格式现在主要用于创建有趣的动画,动态gif应用更广泛,并且静态图像上的应用基本上已由png格式代替。 小飞将不在这里gif格式讨论更多内容,让我们看一下其他三种文件格式的适用方案!
我什么时候应该使用JPEG?
根据上面介绍的JPEG的特性,它更适合于存储色彩层次丰富的照片或真实照片。 这是因为由于阴影,反射或透视等效果,色彩丰富的图像通常形成具有不同阴影和阴影的区域。 如果我们选择使用PNG8进行存储,则调色板上可能找不到某些颜色,从而导致图像丢失了某些数据。 如果使用PNG24,它确实可以找到图像的不同级别的颜色,但是由于数据更多,它会增加图像的大小,严重降低加载速度,并容易在网站上显示不完整。 因此,JPEG是最佳选择,它可以在尽可能多地压缩文件大小的同时更好地恢复图片质量(请参见下图)。 为什么不在这里使用SVG?SVG有其自身的局限性。 由于它是通过点和线精确计算的,因此某些位图(例如摄影元素svg)无法实现适当的缩放。
我什么时候应该使用PNG?
对于某些相对简单的图像,更适合使用png格式保存。 以下图为例,我们可以清楚地看到,使用jpg格式完全不压缩图像时的文件大小是使用png格式的文件大小的5倍以上,即使以45%的压缩率进行压缩也是如此。 文件仍然大于png格式。图像较大,并且图像存在变形问题。 相对而言,png格式可以在不增加颜色的情况下高度还原该图像。 现在,普通用户等待网页加载的时间仅为1-3秒。 加载速度(受文件大小影响)在很大程度上决定了网站流量,尤其是在移动设备上。 使用PNG可以解决此问题。 另外,当网站需要使用透明背景图像时,png格式也是更好的选择。何时使用SVG?
SVG主要用于显示矢量图,例如形状,线条和点的某些组合,因此当前许多主流图标库都提供svg格式文件。 建立网站时,我们经常会遇到这样的问题:您是否需要为高分辨率浏览器进行一些特殊设置以用于所使用的图片? 实际上,这个问题的答案取决于您的目标访问者及其浏览需求,毕竟用户才是第一位的。 如果您希望您的网站适应不同的屏幕分辨率,则使用svg格式更方便。 肖飞之前也提到过,SVG是一种矢量格式,可以在不牺牲图像质量的情况下完美地适应任何屏幕尺寸,并且占用服务器上的少量空间。 此外,如果要在网站上应用浮动效果或精美的动画,SVG也是一个更好的选择,因为它可以作为代码输出,并可以使用CSS或Javascript编辑。 实际上,SVG还可以包含位图(即GIT,PNG或JPEG),还可以用于制作JS控制的动画。 在HTML5时代,SVG的使用将越来越广泛。
总而言之,如果您需要在网站中使用位图(它更容易模仿照片的真实效果并具有很强的表现力),则可以根据不同情况进行选择。 如果不需要透明度,请使用JPEG,而要支持透明背景图像,请使用PNG。 如果要使用矢量图(适用于任何不失真的分辨率),请使用svg格式! 由于SVG的功能,许多人认为svg格式更适合响应式网站,但这并不意味着该网站无法使用。 数字。 你怎么看? 欢迎留言。 快来在Qifeipage()自助网站建设平台上创建一个网站!

标签:HTML5搜索引擎蜘蛛PNG格式jpg格式矢量图索引值SVG格式SVG图形SVG文件SVG图像GIF格式JPEG格式摄影元素SVG动态GIF应用SVG矢量图标