前端9种图片格式基础知识, 你应该知道的
彩色深度
彩色深度标准通常有以下几种:
- 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年前,人们都在干嘛呢?
- GIF - 1987
- Base64- 1987
- JPEG - 1992
- PNG - 1996
- SVG - 1999
- JPEG2000 - 1997 to 2000
- APNG - 2004
- 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
优点
- 不失真的情况下尽可能压缩图像文件的大小
- 像素丰富
- 支持透明(alpha通道)
缺点
- 文件大
这里额外提一下,gif和jpg有渐进,png有交错,都是在没有完全下载图片的时候,能看到图片全貌。
具体可以看在线示例: png正常,png交错,jpg渐进
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 |
写在最后
如果你觉得不错,你的一赞一评就是我前行的最大动力。
技术交流群请到 这里来。
或者添加我的微信 dirge-cloud,一起学习。
引用
图像文件类型与格式指南
JPEG_2000
APNG - Wikipedia
Can I use - APNG
谈谈web上各种图片应用的优缺点
web前端开发常用的几种图片格式及其使用规范
聊一聊几种常用web图片格式:gif、jpg、png、webp
APNG 那些事
GIF vs APNG vs WebP
浅谈base64图片
图片Base64编码的利与弊分析
ICO File Format
相关文章:
前端9种图片格式基础知识, 你应该知道的
彩色深度 彩色深度标准通常有以下几种: 8位色,每个像素所能显示的彩色数为2的8次方,即256种颜色。16位增强色,16位彩色,每个像素所能显示的彩色数为2的16次方,即65536种颜色。24位真彩色,每个…...
ChatGPT 与 OpenAI 的现代生成式 AI(上)
原文:Modern Generative AI with ChatGPT and OpenAI Models 译者:飞龙 协议:CC BY-NC-SA 4.0 序言 本书以介绍生成式 AI 领域开始,重点是使用机器学习算法创建新的独特数据或内容。它涵盖了生成式 AI 模型的基础知识,…...
全量知识系统 程序详细设计之架构设计:一个信息系统架构
统架构,整体设计分成了三部分--三种方面:信息nformation、系统Syste 原文 以下是对全知系统程序详细设计需要的架构规划的考虑。 全知系统架构是一个信息系统架构,整体设计分成了三部分(三种“方面”):信…...
从零开始:成功进入IT行业的方法与技巧
如今,信息技术(IT)行业成为了就业市场上的热门领域。由于其快速发展和广阔的职业机会,许多人希望能够进入这个行业。然而,对于没有任何相关背景知识的人来说,要成功进入IT行业可能会面临一些挑战。本文将分…...
SpringCloud - 如何本地调试不会注册到线上环境(Nacos)?
问题描述 有时候我们需要本地调试注册到 Nacos 上,但是会影响线上服务的 Feign 请求打到本地导致不通影响了线上业务。 原因分析 一般最传统的解决方案就是修改本地 bootstrap.yml 的 spring.cloud.nacos.discovery.namespace spring:application:name: app-serv…...
1.9 面试经典150题 除自身以外数组的乘积
除自身以外数组的乘积 给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法࿰…...
【美团笔试题汇总】2023-09-02-美团春秋招笔试题-三语言题解(CPP/Python/Java)
🍭 大家好这里是KK爱Coding ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新美团近期的春秋招笔试题汇总~ 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢…...
小黑逆向爬虫探索与成长之路:小黑独立破解毛毛租数据加密与解密
前言 有道和招标网的加密入口定位在前面两期做了详细的介绍,本小结将通过简单的关键词搜索定位到加密与解密入口 数据接口寻找与请求 根据响应数据长度,确定数据接口,发现传入的参数需要加密,响应的结果需要解密,后…...
深入浅出 -- 系统架构之微服务架构常见的六种设计模式
面向服务的架构(SOA) 面向服务的架构(SOA)是一种设计方法,也是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来。接口是采用中立的…...
SSM框架学习——SqlSession以及Spring与MyBatis整合
SqlSession以及Spring与MyBatis整合 准备所需要的JAR包 要实现MyBatis与Spring的整合,很明显需要这两个框架的JAR包,但是只是使用这两个框架中所提供的JAR包是不够的,还需要配合其他包使用: Spring的JAR包MyBatis的JAR包Spring…...
6、【单例模式】确保了一个类在程序运行期间只有一个实例
你好,我是程序员雪球 在软件设计中,单例模式是一种常见的设计模式。它确保了一个类在程序运行期间只有一个实例,并提供了全局访问该实例的方式。单例模式在许多场景中都有广泛的应用,例如共享资源管理、数据库连接、日志记录器等…...
vuex插件实现数据共享
vuex插件 vuex是管理多个vue通用的数据的插件.(状态管理工具,状态是数据) 我们对于多个vue文件之间的共同数据,是用props传递,或者对于一个vue实例对象,进行绑定,传参,也是多次传参,多个文件之间,比较麻烦. 但是我们vuex会创建一个公共对象,从这个公共对象上赋值,比较简单易…...
【吊打面试官系列】Redis篇 - 使用过 Redis 分布式锁么,它是什么回事?
大家好,我是锋哥。今天分享关于 【使用过 Redis 分布式锁么,它是什么回事?】面试题,希望对大家有帮助; 使用过 Redis 分布式锁么,它是什么回事? 先拿 setnx 来争抢锁,抢到之后&#…...
DashOJ-8.奇偶统计
题目链接: 题目详情 - 奇偶统计 - DashOJ 思路: (while循环加if分支语句) 巧用死循环 while(1) 然后在里面第一句就判断输入的数字是否等于0 if(x0) ,如果 等于0就直接break跳出循环 或者用 while(cin>>x) 代…...
车源宝微信小程序源码
源码介绍 车源宝微信小程序源码 images — 存放项目图片文件 pages — 存放项目页面相关文件 store — 存放数据接口文件 utils — 存放时间格式化等文件 演示截图 源码下载 https://download.csdn.net/download/huayula/89082980...
“双碳”目标下资源环境中的可计算一般均衡(CGE)模型应用
我国政府承诺在2030年实现“碳达峰”,2060年实现“碳中和”,这就是“双碳”目标。为了实现这一目标就必须应用各种二氧化碳排放量很高技术的替代技术,不仅需要考虑技术上的可靠性,也需要考虑经济上的可行性。可计算一般均衡模型&a…...
在 Git Bash 中调整字体大小,可以按照以下步骤进行操作,注意这里是linux虚拟机,命令都是Linux方式的
在 Git Bash 中调整字体大小,可以按照以下步骤进行操作: 打开 Git Bash 终端。 在终端中,点击顶部菜单栏的 "Options"(选项)。 在弹出的下拉菜单中,选择“text”文本 右侧font那里…...
STM32之HAL开发——不同系列SPI功能对比(附STM32Cube配置)
不同系列STM32——SPI框图 F1系列框图 F4系列框图 TI模式时序图特性 F7系列框图 H7系列框图 注意:F7系列以及H7系列支持Quad-SPI模式,可以连接单,双或者四条数据线的Flash存储介质。 SPI——Cube配置流程 RCC时钟源配置 SYS系统调试模式配…...
Codeforces Round 836 (Div. 2) D. Range = √Sum
题目 思路: #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e6 5, inf 1e18, maxm 4e4 5; c…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
