[css] 描述下你所了解的图片格式及使用场景
[css] 描述下你所了解的图片格式及使用场景
通常网页在显示的图片（图形）的时候，有以下几种格式：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格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。缺点：相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。适用场景：WebP既支持有损压缩也支持无损压缩。将来可能是JPEG的代替品。
个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
[css] 描述下你所了解的图片格式及使用场景相关推荐
- 如何在没有 System.Drawing.Common 的情况下使用 C# 获取图片格式
之前写过一篇博文,用来获取图片的正确格式.博文所示代码一直工作良好,直到今天在将程序部署到阿里云函数计算时,发生了以下报错: System.Drawing is not supported on th ...
- HTML中常用的图片格式及应用场景
和油漆是一个道理,不同的图片格式特性不一样,使用场合也有所不同. 一:图片的格式 JPEG(JPG) - JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明 - 一般用来保存照片等颜色丰富的图 ...
- 三种常用图片格式的使用场景
GIF: 1:256色 2: 无损,编辑 保存时候,不会损失. 3:支持简单动画. 4:支持boolean透明,也就是要么完全透明,要么不透明 JPEG: 1:millions of colors 2 ...
- 常用图片格式必须了解
常用图片格式汇总及区别 首先说一说为什么要学习图片格式呢,因为身为一个前端开发的程序员,或者你是一个全栈开发的工程师,那么你就会接触的网页,那么网页中会有很多,**图片**,那么问题来了,这些图片有不 ...
- 计算机图形学【1】基础概念，图片格式及C++实现
文章目录 Chapter 1: 图片格式 PPM 格式 C++代码实现 输出 BMP 格式 C++实现 输出 JPEG/JPG 格式 Chapter 1: 图片格式 PPM PPM format: P ...
- STM32F407ZGT6控制ESP8266与OV2640下的百度智能图片识别
前言:STM32F407ZGT6控制OV2640下采集到JPG图片格式的二进制数据,然后对二进制数据进行BASE64编码,接着通过串口将数据传输给ESP8266并上传至训练好的EASYDL的AI算法识 ...
- win11怎么更改图片格式
很多网友刚下载安装了win11系统,对于win11系统的很多基本操作还不熟悉,遇到需要更改图片格式等问题的时候可能第一时间就是想去下载第三方工具进行转换.其实win11自带的画图工具就能实现,那么wi ...
- 前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...
- day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标
文章目录 day07 项目切图规范 PS常用工具 常见的图片格式和特点 CSS精灵 CSS小箭头 BFC (Block Formatting Context) 块级格式化上下文 阿里矢量图标 day0 ...
最新文章
- float gpu 加速_tensorflow - GPU 加速
- 缓存 Memached
- iOS 开发一定要尝试的 Texture(ASDK)
- java new关键字
- 链路聚合-CISCO
- 2--OC -- 类的创建与实例化
- C# 从DataTable中取值
- Spark Streaming之运行原理
- uniapp ---- 添加分页
- 特斯拉首个中国工厂落户上海临港
- 从微服务跨越到中台，架构领域年度盘点！
- windbg调试C#代码（二）
- 【蓝桥杯2015Java】奇妙的数字、打印大叉
- 计算机组成原理——存储器容量扩充
- ppt编辑图片进阶功能
- SPI读取NRF24L01
- android 手机资料互传,不同系统手机资料互传so easy
- SiTime硅晶振 高性能MEMS时钟方案在5G中的应用
- 如何用思维导图软件绘制组织结构图？
- 自动弹窗加QQ群代码