9种前端图片格式，你应该知道的 前言：对大部分前端来说，图片是页面中不可或缺一部分，但很多人对其知之甚少，今天题主就跟大家共同探索一下各类图片的基本特性及使用场景。 一.GIF GIF是一种索引色模式图片，所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明图片，其中一种方案就是生成GIF图片。 优点： 1.支持动画 2.高兼容性 3.灰度表现佳 4.支持交错 缺点：最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感支持透明，但不支持半透明，边缘有杂边 二、JPG/JPEG 最常用的静态图片格式之一。这种格式的图片能比较好的表现各种色彩，主要在压缩的时候会有所失真，也正因为如此，造就了这种图片格式体积的轻量。 优点： 1.兼容性强 2.色彩丰富 3.压缩率高，图片小 4.支持渐进 缺点：不支持动画、透明不适合存储企业类logo,线框类高清图片 三、PNG PNG格式是有三种版本的，分别为PNG-8，PNG-24，PNG-32，所有这些版本都不支持动画的。PNG-8跟GIF类似的属性是相似的，都是索引色模式，而且都支持背景透明。相对比GIF格式好的特点在与背景透明时，图像边缘没有什么噪点，颜色表现更优秀。PNG-24其实就是无损压缩的JPEG。而PNG-32就是在PNG-24的基础上，增加了透明度的支持。 如果没有动画需求推荐使用png-8来替代gif 优点： 1.像素丰富 2.支持透明 3.支持交错 4.压缩时几乎不失真 5.兼容性强 缺点：文件较大 四、BASE64 图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。 优点： 1.不需要额外的HTTP请求 2.适用于极小或简单图片 3.没有跨域问题，无需考虑缓存、文件头或者cookies问题 缺点：相对于其他图片格式，要大至少1/3不适用于中等以上图片 五、SVG SVG 是一种基于 xml 的矢量图形格式，它将图像的内容指定为一组绘图命令，这些命令创建形状、线条、应用颜色、过滤器等等。SVG 文件是理想的图表，图标和其他图像，可以准确地绘制在任何大小。因此，SVG 是现代 Web 设计中用户界面素的流行选择。 优点： 1.你可以对其放大、缩小，而不用担心损失质量 2.对于其他常用的图片格式来说，他要更小 3.支持动画 4.html,js,css都可以对其操作，更灵活，与DOM无缝衔接 缺点渲染时间较长，尤其是在它较复杂时不适用于游戏等高互动动画 六、JPEG 2000 JPEG 2000是基于小波变换的图像压缩标准，由Joint Photographic Experts Group组织创建和维护。JPEG 2000通常被认为是未来取代JPEG（基于离散余弦变换）的下一代图像压缩标准。JPEG 2000文件的副档名通常为.jp2，MIME类型是image/jp2。JPEG2000的压缩比更高，而且不会产生原先的基于离散余弦变换的JPEG标准产生的块状模糊瑕疵。JPEG2000同时支持有损压缩和无损压缩。目前就safari支持，can is use-png2000支持18%。优点 1.支持有损和无损压缩 缺点支持率太低了 七、APNG：Animated PNGAPNG（Animated Portable Network Graphics）顾名思义是基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，同时加入了 24 位图像和 8 位 Alpha 透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的 GIF 格式，但它目前并没有获得 PNG 组织官方的认可。从Can I Use上查看，除了IE系列， chrome, firefox, safari均已支持。2021-08月的时候支持达到94%。 优点： 1.色彩丰富 2.支持透明 3.向下兼容 PNG 4.支持动画 缺点生成比较繁琐未标准化 八、webP有损 WebP 图像平均比视觉上类似压缩级别的 JPEG 图像小25-35% 。无损耗的 WebP 图像通常比 PNG 格式的相同图像小26% 。WebP 还支持动画: 在有损的 WebP 文件中，图像数据由 VP8位流表示，该位流可能包含多个帧。包括体积小、色彩表现足够、支持动画。 简直了就是心中的完美女神！！从can i use – webp上看，支持率95%。 主要是Safari低版本和IE低版本不兼容。 优点： 1.同等质量更小 2.压缩之后质量无明显变化 3.支持无损图像 4.支持动画 缺点兼容性相对较差，相对jpg,png,gif来说 九、ICO ICO (Microsoft Windows 图标)文件格式是微软为 Windows 系统的桌面图标设计的。网站可以在网站的根目录中提供一个名为 favicon.ICO, 在收藏夹菜单中显示的图标，以及其他一些有用的标志性网站表示形式。一个 ICO 文件可以包含多个图标，并以列出每个图标详细信息的目录开始。其主要用来做网站图标，现在png也是可以用来做网站图标的。 PNG, GIF, JPG 比较 大小比较：通常地，PNG ≈ JPG > GIF 8位的PNG完全可以替代掉GIF 复制代码 透明性：PNG > GIF > JPG 复制代码 色彩丰富程度：JPG > PNG >GIF 复制代码 兼容程度：GIF ≈ JPG > PNG 复制代码图片格式优点缺点使用场景GIF文件小，支持动画、透明，无兼容性问题只支持256种颜色色彩简单的logo、icon、动图JPG色彩丰富，文件小有损压缩，反复保存图片质量下降明显色彩丰富的图片/渐变图像PNG无损压缩，支持透明，简单图片尺寸小不支持动画，色彩丰富的图片尺寸大logo/icon/透明图WEBP文件小，支持有损和无损压缩，支持动画、透明浏览器兼容性相对而言不好支持webp格式的app和webview 光栅图和矢量图 对于图片，一般分光栅图和矢量图。 光栅图：是基于 pixel像素构成的图像。JPEG、PNG，webp等都属于此类矢量图：使用点，线和多边形等几何形状来构图，具有高分辨率和缩放功能. SVG就是一种矢量图。 无压缩, 无损压缩, 有损压缩 无压缩。无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP格式就是其中之一。 无损压缩。压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。png是其中的代表。 有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。 部分内容来自https://juejin.cn/post/7000154907156152327
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/44970.html
