9种图片格式基础知识//基础知识、经验分享、资源分享

最新推荐文章于 2024-04-23 13:08:42 发布
最新推荐文章于 2024-04-23 13:08:42 发布
阅读量950 收藏 2
点赞数 2
分类专栏： 计算机 文章标签： 后端 经验分享 程序人生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_powerup/article/details/119958928
版权

今天和大家分享九种照片格式基础知识，个人认为对于文章创作和平时工作很有用，无论前端后端都有益处，希望能给你带来帮助。

彩色深度

彩色深度标准通常有以下几种：

  • 8位色，每个像素所能显示的彩色数为2的8次方，即256种颜色。
  • 16位增强色，16位彩色，每个像素所能显示的彩色数为2的16次方，即65536种颜色。
  • 24位真彩色，每个像素所能显示的彩色数为24位，即2的24次方，约1680万种颜色。
  • 32位真彩色，即在24位真彩色图像的基础上再增加一个表示图像透明度信息的Alpha通道。
    32位真彩色并非是2的32次方的色数，它其实也是1677万多色，不过它增加了256阶颜色的灰度,为了方便称呼，就规定它为32位色

图的分类

光栅图和矢量图

对于图片，一般分光栅图和矢量图。

  • 光栅图：是基于 pixel像素构成的图像。JPEG、PNG，webp等都属于此类
  • 矢量图：使用点，线和多边形等几何形状来构图，具有高分辨率和缩放功能. SVG就是一种矢量图。

无压缩, 无损压缩, 有损压缩

另一种分类

  • 无压缩。无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP格式就是其中之一。

  • 无损压缩。压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。png是其中的代表。

  • 有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。

前端9种图片格式

诞生时间

对于超过30岁的程序员来说，她们都很年轻，真的是遇到好时光！

85年前，人们都在干嘛呢？

  1. GIF - 1987
  2. Base64- 1987
  3. JPEG - 1992
  4. PNG - 1996
  5. SVG - 1999
  6. JPEG2000 - 1997 to 2000
  7. APNG - 2004
  8. WebP - 2010

ico: 1985年??
查阅文档说ico文件格式是伴随着 Windows 1.0 发行诞生的。

GIF

GIF是一种索引色模式图片，所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明图片，其中一种方案就是生成GIF图片。

优点：

  • 支持动画和透明背景
  • 兼容性好
  • 灰度图像表现佳
  • 支持交错
    部分接收到的文件可以以较低的质量显示。这在网络连接缓慢时特别有用。

缺点：

  • 最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感
  • 支持透明，但不支持半透明，边缘有杂边

适用场景

  • 色彩简单的logo、icon、线框图适合采用gif格
  • 动画

JPG/JPEG

这里提个问题： jpg和jpeg有啥区别

平常我们大部分见到的静态图基本都是这种图片格式。这种格式的图片能比较好的表现各种色彩，主要在压缩的时候会有所失真，也正因为如此，造就了这种图片格式体积的轻量。

优点

  • 压缩率高
  • 兼容性好
  • 色彩丰富

缺点

  • JPEG不适合用来存储企业Logo、线框类的这种高清图
  • 不支持动画、背景透明

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%。

优点

  • 支持有损和无损压缩

缺点

  • 支持率太低了

ICO

ICO (Microsoft Windows 图标)文件格式是微软为 Windows 系统的桌面图标设计的。网站可以在网站的根目录中提供一个名为 favicon.ICO, 在收藏夹菜单中显示的图标，以及其他一些有用的标志性网站表示形式。
一个 ICO 文件可以包含多个图标，并以列出每个图标详细信息的目录开始。

其主要用来做网站图标，现在png也是可以用来做网站图标的。

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. 支持透明（alpha通道）

缺点

       文件大

这里额外提一下，gif和jpg有渐进，png有交错，都是在没有完全下载图片的时候，能看到图片全貌。

 

APNG：Animated PNG

APNG（Animated Portable Network Graphics）顾名思义是基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，同时加入了 24 位图像和 8 位 Alpha 透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的 GIF 格式，但它目前并没有获得 PNG 组织官方的认可。

从Can I Use上查看，除了IE系列， chrome, firefox, safari均已支持。2021-08月的时候支持达到94%。

相对GIF来说

  • 色彩丰富
  • 支持透明
  • 向下兼容 PNG
  • 支持动画

缺点

  • 生成比较繁琐
  • 未标准化

webP

有损 WebP 图像平均比视觉上类似压缩级别的 JPEG 图像小25-35% 。无损耗的 WebP 图像通常比 PNG 格式的相同图像小26% 。WebP 还支持动画: 在有损的 WebP 文件中，图像数据由 VP8位流表示，该位流可能包含多个帧。

包括体积小、色彩表现足够、支持动画。 简直了就是心中的完美女神！！

从can i use - webp上看，支持率95%。 主要是Safari低版本和IE低版本不兼容。

优点

  • 同等质量更小
  • 压缩之后质量无明显变化
  • 支持无损图像
  • 支持动画

缺点

  • 兼容性吧，相对jpg,png,gif来说

SVG

SVG 是一种基于 xml 的矢量图形格式，它将图像的内容指定为一组绘图命令，这些命令创建形状、线条、应用颜色、过滤器等等。SVG 文件是理想的图表，图标和其他图像，可以准确地绘制在任何大小。因此，SVG 是现代 Web 设计中用户界面元素的流行选择。

优点

  • 可伸缩性
    你可以随心所欲地把它们做大或者做小，而不用牺牲质量
  • 小
    Svg 平均比 GIF、 JPEG、 PNG 小得多，甚至在极高的分辨率下也是如此
  • 支持动画
    更灵活，质量无与伦比
  • 与DOM无缝衔接
    Svg 可以直接使用 HTML、 CSS 和 JavaScript (例如动画)来操作

缺点

  • SVG复杂度高会减慢渲染速度
  • 不适合游戏类等高互动动画

base64

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。

优点

  • 无额外请求
  • 对于极小或者极简单图片
  • 可像单独图片一样使用，比如背景图片重复使用等
  • 没有跨域问题，无需考虑缓存、文件头或者cookies问题  

缺点

  • 相比其他格式，体积会至少大1/3
  • 编码解码有额外消耗

一些对比

PNG, GIF, JPG 比较

大小比较：通常地，PNG ≈ JPG > GIF 8位的PNG完全可以替代掉GIF
透明性：PNG > GIF > JPG
色彩丰富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG

gif， jpg， png， web优缺点和使用场景

格式优点缺点适用场景
gif文件小，支持动画、透明，无兼容性问题只支持256种颜色色彩简单的logo、icon、动图
jpg色彩丰富，文件小有损压缩，反复保存图片质量下降明显色彩丰富的图片/渐变图像
png无损压缩，支持透明，简单图片尺寸小不支持动画，色彩丰富的图片尺寸大logo/icon/透明图
webp文件小，支持有损和无损压缩，支持动画、透明浏览器兼容性相对而言不好支持webp格式的app和webview

写在最后

如果你觉得不错，加我微信，备注999，送你超值大礼包(记得备注，不然可能会忘记送你资源了）

或者加QQ群我们一起交流：731892759
免费领取价值3000元的Java资料
1、Java自学超详细电子书
2、自录优质网络直播课
3、大厂Java面试题，优质项目练习题

Java研究社
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
机械密封基础知识，pdf格式，非常详细
08-04
机械密封基础知识，pdf格式，非常详细
常用图片格式及特点
weixin_44805839的博客
07-07 4851
目前常用的图片格式类型、优缺点及应用领域
前端实现Base64图片压缩(可直接复制使用)
陈坚泓的博客
07-29 4万+
前端实现Base64图片压缩
前端 img标签显示 base64格式的 图片
热门推荐
KKDH的博客
05-22 20万+
在做项目的时候，我从后端返回了一个base64格式的图片文件，想把它渲染在前端页面上，找了一下午都没有找到办法，最后终于找到了资料！哈哈！解决办法就是这样后来又找了相关用法，总结如下：        data:,文本数据        data:text/plain,文本数据        data:text/html,HTML代码        data:text/html;base64,bas...
图片的所有格式，对应的适合于什么场景？有什么优化的方案？
qq_39507723的博客
08-22 1317
一、常见的图片的格式 1、TIFF格式 TIFF（Tag Image File Format）是Mac中广泛使用的图像格式，它的特点是图像格式复杂、存贮信息多。正因为它存储的图像细微层次的信息非常多，图像的质量也得以提高，故而非常有利于原稿的复制。 2、PSD格式 PSD其实是Photoshop进行平面设计的一张"草稿图"，它里面包含有各种图层、通道、遮罩等多种设计的样稿，以便于下次打开...
base64和jpg/png互转
weixin_45653467的博客
07-12 6293
base64的转换 在中调用base64格式的照片 方式一 <image :src="getBase64(base64)"/> getBase64(base64){ var changebase64='data:image/jpg;base64,'+base64.replace(/[\r\n]/g,'') console.log(changebase64) return changebase64 }, 方式二：vue -element 在imag
前端图片压缩（几乎无损）
qq_35168861的博客
12-03 6116
前端经常会有图片压缩这样的需求，我尝试过很多种压缩方法，最后决定推荐lrz压缩方式 lrz(file, [options]); 1、file 通过 input:file 得到的文件，或者直接传入图片路径 2、[options] 这个参数允许忽略 3、width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。 4、height {Number} 同上 5、quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7 库的话直接去http://www.bejso
图片格式转换（File、Blob、base64）
XUELINGMM的博客
02-16 8030
记录一下比较常见的图片格式（File、Blob、base64）在不同的场景他们之间的相互转换的方法。BlobBLOB(binary large object)： 二进制大对象,是一个可以存储二进制文件的容器。在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。属性名称读/写描述size只读Blob 对象中所包含数据的大小（字节）。type只读一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。例如 “image/png”File。
(自创)纯前端判断浏览器是否支持 webp
b君笔记
08-19 652
纯前端判断浏览器是否支持 webp
图片：前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)
snowball的博客
06-30 7009
与其他图像格式相比，TIFF格式可以存储更大的文件大小，具有更多的细节和更高的分辨率，使得用户可以更准确地保留和传输高质量的图像和照片。原因是同样大小的jpg和png图片下载的时间是相同的,但是jpg图片是有RGB三种描述的, 而png是有ARGB四种描述的,带有透明度,所以浏览器解码png图片要花更多的时间,因此jpg格式比png加载的快。是的，BMP格式图片可以用于浏览器。总之，DDS格式是一种高效、灵活和功能强大的图像格式，可以提供高质量的图像，并在游戏和应用程序中提高性能和速度。
前端常用图片格式
weixin_42008209的博客
05-14 2551
常用图片格式图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特效，可以方便我们在制作网页时选取适合的图片格式，图片格式及特性如下： 1、psd psd是photoshop的专用格式，UI设计师使用photoshop设计效果图，最后会...
SQL基础知识详解思维导图xmind格式
10-04
最详细的SQL知识总结，超级详细，绝对不要错过 ！！
音频基础知识.pdf
12-22
1、声音及声音的数字化 2、数字音频文件格式 3、MIDI技术 4、常用概念
电子元器件基础知识大全:IC测试原理解析
07-11
电子元器件基础知识大全:IC测试原理解析 数字通信系统发射器由以下几个部分构成：*CODEC(编码/解码器) *符号编码 *基带滤波器(FIR) *IQ调制 *上变频器（Upconverter） *功率放大器 CODEC使用数字信号处理方法...
spi协议-基础知识分享
03-16
SPI（Serial Peripheral Interface）协议是一种同步串行通信协议，广泛应用于微控制器、传感器、存储器和其他外围设备之间的通信。SPI协议定义了通信的电气特性和数据传输格式，使得不同厂商生产的设备可以互相通信...
云架构（五）BBF模式
OrPis的专栏
04-20 792
BFF模式（Backends for Frontends pattern）-创建单独的后台服务用以提供给特定的前端或者接口。当你希望避免为多个接口定制单独的后台时，此模式非常有用。这个模式最开始由Sam Newman提出。
linux开发板开机启动向日葵
weixin_42485732的博客
04-23 314
硬件：orangepi 5 pro 操作系统：ubuntu 20.4 lts使用root用户登录后打开终端输入一下命令，至于X11是什么可以自行搜索，我也一知半解，可以理解为一个图形界面的后端接口 编写python脚本 使用supervisor管理该脚本开机启动 最后贴一张效果图，pi放在家里，刚reboot过，我在外面用外网连的
【使用 SLF4J 进行日志记录】
武帝为此的博客
04-22 469
日志记录以帮助跟踪应用程序的行为，排查问题，并改进性能。SLF4J（Simple Logging Facade for Java）是一个用于 Java 应用程序的简单日志记录框架，它提供了一种统一的方式来记录日志，同时允许在后端使用不同的日志实现。SLF4J 是一种日志门面（logging facade），它的主要目标是提供一个统一的日志记录接口，而不绑定到特定的日志实现。可以在应用程序中使用 SLF4J 记录日志，而后端的日志实现可以根据需要进行更改，而无需修改应用程序代码。
java后端项目：视积分抽奖平台
最新发布
m0_61364659的博客
04-23 982
本次抽奖系统实现是在视频中内置一个线上活动抽奖系统，奖品是在一个时间段区间内均匀发布，用户可以在这个时间段内参与抽奖。
java上传svg图片格式为application/octet-stream无法显示
10-09
可能是因为服务器未识别SVG图片的MIME类型，导致以二进制流方式解析而无法正确显示。可以在服务器端添加对SVG图片的MIME类型识别，例如： ...此外，还可以将SVG图片转换为其他常见图片格式进行上传和展示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值