jpeg

jpeg是一个国家专家小组，同事也是一种算法名称，而用JPEG算法压缩出来的静态图片文件称为JPEG文件，扩展名通常为*.jpg、.jpe.jpeg。
JPEG文件大体上可以分成两个部分：标记码(Tag)和压缩数据。标记码由两个字节构成的，换而言之他们都是数据来的，是可以进行算法压缩的。本质上就是算法和空间的权衡。

.jpe.jpeg是同样的东西，和.htm与.html一样，受限当年DOS时代对扩展名不能超过3个字符的规则。严格来讲后者才是正主。

png

png格式是一种16进制数据，并且是可以无损压缩的。由于数据记录方式的不同，png不会有数据丢失就能达到无损记录，压缩到极致后不断压缩清晰度是不会受影响的。压缩掉的内容包括了数据的“j简写”，以及图片信息（eg: 作者、版权、位置信息等）

··

区别

1.jpg格式就比png格式加载的快。原因是同样大小的jpg和png图片下载的时间是相同的，但是jpg图片是有RGB三种描述的，
2.jpg在反复的上传保存中会有损压缩
3.png和jpg，前者是无损格式，后者有有损格式，和是否能压缩无关。
4.jpg对于颜色繁杂的图片优势较大，因为png记录这么复杂的情况体积会很大，而且jpg图片压缩前压缩后肉眼分辨几乎不计

开放时选择哪种图

综上所述，透明只能选png，清晰大小都相同选jpg，色彩复杂选jpg。
不想这么麻烦：透明png，其他jpg，就能应付绝大部分场景并且打上70分了。

扩展：

1.APNG是一个基于PNG格式的位图动画格式图片，是 PNG 的位图动画扩展，可以实现 png 格式的动态图片效果，其诞生目的是为了替代老旧的 GIF 格式，但它目前并没有获得 PNG 组织官方的认可。

扩展-位图

位图，称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。当放大位图时，可以看见赖以构成整个图像的无数单个方块（像素点）。由于要保存像素位置和颜色值，位图有着占用存储空间大的特点。

扩展-矢量图

矢量图是使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，，只与图像的复杂程度有关。最大的缺点是难以表现色彩层次丰富的逼真图像效果。

ps：

矢量图与位图的效果是天壤之别，矢量图无限放大不模糊，大部分位图都是由矢量导出来的，也可以说矢量图就是位图的源码，源码是可以编辑的

jpg、png、jpeg区别与压缩等知识总结 —— 性能优化篇相关推荐

html压缩原理,webpack--前端性能优化与Gzip原理
目录前言前不久看过掘金小册<前端性能优化原理与实践>,受益匪浅."我深感性能优化实在是前端知识树中特别的一环--当你需要学习前端框架时,文档和源码几乎可以告诉你所有问题的答案 ...
html文件压缩成gzip,前端性能优化成神之路-HTTP压缩开启gzip
什么是HTTP压缩css HTTP压缩是指: Web服务器和浏览器之间压缩传输的"文本内容"的方法. HTTP采用通用的压缩算法,好比gzip来压缩HTML,Javascript, ...
知识总结--性能优化总结(摘录+转载)
目录 1.硬件选型 2.操作系统 3.应用程序 1.项目自身的优化 java 代码优化 2.数据库优化 mysql调优对于索引的优化策略对于sql语句优化策略 3.架构上的优化 4.redis优化 ...
javaee, javaweb和javase的区别以及各自的知识体系
javaee, javaweb和javase的区别以及各自的知识体系来源 https://blog.csdn.net/weixin_39297312/article/details/79454642 ...
java和javaweb的区别_javaee, javaweb和javase的区别以及各自的知识体系
javaee, javaweb和javase的区别以及各自的知识体系来源 https://blog.csdn.net/weixin_39297312/article/details/79454642 ...
JAVA知识体系之JVM篇（新）
目录 1.Java概述 1.1 Java技术体系 1.2 Java发展历史 2.类文件解析 2.1 类文件结构 2.1.1 魔数(magic) 2.1.2 大小版本号(minor_version &a ...
前端性能优化基础知识--幕课网
作为一个前端小码农,在页面样式都能实现以后,就开始考虑:同一个效果,我该用什么样的方式和代码去实现它比较规范?前两天逛幕课网发现了两门课程–<前端性能优化-基础知识认知>和<前端性能 ...
性能优化——图片压缩、加载和格式选择
本文首发于政采云前端团队博客:性能优化--图片压缩.加载和格式选择 https://www.zoo.team/article/images-compress 前言相信大家都听说过 "258 ...
性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）
目录 1. 前端基础知识 1.1 为什么要关注前端页面的性能,了解页面的加载,渲染方式和顺序? 1.2 一次页面请求会经历哪些步骤? 1.3 页面的展示过程 2. 前端性能测试的常用工具 2.1 Go ...
Nginx一网打尽：动静分离、压缩、缓存、黑白名单、跨域、高可用、性能优化......
干货!文章有点长,建议先收藏引言一.性能怪兽-Nginx概念深入浅出二.Nginx环境搭建三.Nginx反向代理-负载均衡四.Nginx动静分离五.Nginx资源压缩六.Nginx缓冲区 ...

jpg、png、jpeg区别与压缩等知识总结 —— 性能优化篇

jpeg

png

区别

开放时选择哪种图

扩展：

扩展-位图

扩展-矢量图

jpg、png、jpeg区别与压缩等知识总结 —— 性能优化篇相关推荐

最新文章

热门文章