各种Web图片格式及其应用场景

谁借莪１个温暖的怀抱￠ 2022-05-14 11:20 242阅读 0赞

通常网页在显示的图片（图形）的时候，有以下几种格式：GIF、PNG、JPG、SVG，还有个比较新的WebP格式。

▍GIF

**优点：**GIF是动态的；支持无损耗压缩和透明度。

**缺点：**的详细的图片和写实摄影图像会丢失颜色信息；在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式；GIF 支持有限的透明度，没有半透明效果或褪色效果。

**适用场景：**主要用于比较小的动态图标。

▍PNG

**优点：**PNG格式图片是无损压缩的图片，能在保证最不失真的情况下尽可能压缩图像文件的大小；图片质量高；色彩表现好；支持透明效果；提供锋利的线条和边缘，所以做出的logo等小图标效果会更好；更好地展示文字、颜色相近的图片。

**缺点：**占内存大,会导致网页加载速度慢；对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

**适用场景：**主要用于小图标或颜色简单对比强烈的小的背景图。

▍JPG

**优点：**占用内存小，网页加载速度快。

**缺点：**JPG格式图片是有损压缩的图片，有损压缩会使原始图片数据质量下降，即JPG会在压缩图片时降低品质。

**适用场景：**由于这种格式图片对色彩表现比较好，所以适用于色彩丰富的图片。主要用于摄影作品或者大的背景图等。不合适文字比较多的图片。

▍SVG

**优点：**SVG是矢量图形，不受像素影响，在不同平台上都表现良好；可以通过JS控制实现动画效果。

**缺点：**DOM比正常的图形慢，而且如果其结点多而杂，就更慢；不能与HTML内容集成。

**适用场景：**主要用于设计模型的展示等。

▍WebP

**优点：**WebP格式，[谷歌][Link 1]（[google][]）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。

**缺点：**相较编码[JPEG][]文件，编码同样质量的WebP文件需要占用更多的计算资源。

**适用场景：**WebP既支持有损压缩也支持无损压缩。将来可能是JPEG的代替品。

![关注公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]

[Link 1]: https://baike.baidu.com/item/%E8%B0%B7%E6%AD%8C/117920
[google]: https://baike.baidu.com/item/google/86964
[JPEG]: https://baike.baidu.com/item/JPEG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220514/3978eedf2ef04015bcb50ef88eddc96d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java反射机制详解及其应用场景

Java反射机制是一种强大的工具，它允许程序在运行时检查类、字段和方法的信息。以下是反射机制的详细解释以及其应用场景。 1. **基本概念：** - 类 (Class)

﹏ヽ暗。殇╰゛Y/ 2024年09月19日 19:18/ 0 赞/ 64 阅读

相关【随笔二】useReducer详解及其应用场景

前言 `useReducer` 实际上是 useState 的升级版，都是用来存储和更新 state，只是应用的场景不一样。一般情况下，我们使用 `useState`

怼烎@/ 2024年03月26日 19:49/ 0 赞/ 66 阅读

相关归并排序及其应用场景

文章目录一、归并排序的概念二、归并排序递归与非递归实现三、归并排序应用场景四、归并排序总结一、归并排序的概念 ![在这里插入图片

「爱情、让人受尽委屈。」/ 2022年09月12日 03:55/ 0 赞/ 205 阅读

相关 mysql参数详解及其应用场景介绍

一、innodb\_flush\_log\_at\_trx\_commit 这是关系到事务日志的一个参数,0或者2,只是定时的刷新到log buffer, 事务日志..不

系统管理员/ 2022年08月06日 04:05/ 0 赞/ 263 阅读

相关二级缓存应用场景及其局限性

二级缓存应用场景适用于访问次数多且用户对查询结果实时性要求不高的查询，采用二级缓存可降低数据库访问量，提高访问速度，应用场景——耗时较高的统计分析sql、通讯记录查询（

今天药忘吃喽~/ 2022年06月15日 07:07/ 0 赞/ 270 阅读

相关 Filter过滤器应用场景及其使用

过滤器Filter作用过滤器可以再请求和响应之前做一部分预处理，有效的过滤掉不需要的内容，而且过滤器可以被复用，节省了大量的复用代码，提高了java的代码执行效率

超、凢脫俗/ 2022年05月25日 10:23/ 0 赞/ 202 阅读

相关各种Web图片格式及其应用场景

通常网页在显示的图片（图形）的时候，有以下几种格式：GIF、PNG、JPG、SVG，还有个比较新的WebP格式。 ▍GIF 优点：GIF是动态的；支持无损耗压缩和透明

谁借莪１个温暖的怀抱￠/ 2022年05月14日 11:20/ 0 赞/ 243 阅读

相关深入理解各种图片格式

1、位图(bitmap)是bit的数组，指定了一个矩形像素数组中每一个像素的颜色。每一个像素的位宽决定了该像素能表示的颜色数。例如，如果每一个像素用4bits表示，那么该像素就

向右看齐/ 2021年12月17日 02:29/ 0 赞/ 473 阅读

相关反射机制及其应用场景

反射----1 反射机制反射的应用场景 Tomcat服务器 1. Java的反射机制 (1).反射和类的关系在程序运行状态中，对任意一个

比眉伴天荒/ 2021年09月26日 15:54/ 0 赞/ 434 阅读

相关 redis概念、做什么及其应用场景

1、什么是Redis Redis是由意大利人Salvatore Sanfilippo（网名：antirez）开发的一款内存高速缓存数据库。Redis全称为：Remote

拼搏现实的明天。/ 2021年09月26日 04:10/ 0 赞/ 292 阅读