阅读 95

各种图片格式

png

  • png8 256色+支持透明 每个像素需要8byte表示

  • png24 2^24色 +不支持透明 每个像素需要24byte表示

  • png32 2^24色+支持透明 增加了8位支持透明

    支持透明，浏览器兼容性好

jpg

有损压缩，压缩率比较高但不支持透明

webp

压缩程度更好，安卓全部都可以使用，但是在ios中有兼容性问题

svg矢量图

代码内嵌，相对较小，图片样式相对简单的场景

相关推荐
  • liuyueershihao
    3年前
    JavaScript
    前端图片预览
    很多时候我们都会有图片上传的功能需求，如果我们先将图片上传到服务器，然后在将返回结果显示在前端，这样的操作性能开销太大，如果图片一多，简直要哭，而且万一还碰到了上传错误要删除的，那简直无法想象了。所以我们需要先将图片在前端展示后，然后由用户确认没有问题了，再统一上传，这样才是比…
    • 7911
    • 8
  • 大雄没了哆啦A梦
    2年前
    前端 稀土 CMS
    图片懒加载
    图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。 2、可以给这个类名设置背景图片，作为图片未加载前的过…
    • 1.5w
    • 32
  • antwang
    3年前
    WebP 图片资源 前端
    聊一聊几种常用web图片格式：gif、jpg、png、webp
    在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多，本文仅针对几种web应用中常用的图片格式：gif、png、jpg、webp进行一个基本的总结。 无压缩。无压缩的图…
    • 7395
    • 6
  • 路遥TM
    2年前
    逆向
    Android逆向笔记 —— DEX 文件格式解析
    DEX 文件结构思维导图及解析源码见文末。 系列第一篇文章就分析过 Class 文件格式，我们都知道 .java 源文件经过编译器编译会生成 JVM 可识别的 .class 文件。在 Android 中，不管是 Dalvik 还是 Art，和 JVM 的区别还是很大的。Andr…
    • 5667
    • 8
  • 快狗打车前端团队
    2年前
    前端
    聊一聊几种常用web图片格式：gif、jpg、png、webp
    在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多，本文仅针对几种web应用中常用的图片格式：gif、png、jpg、webp进行一个基本的总结。 无压缩。无压缩的图…
    • 4966
    • 12
  • 阿健Kerry
    3年前
    前端 jQuery JavaScript
    图片上传，预览以及图片删除
    现在就单独写一篇博客来记录下实现的整个过程，以及在做的过程中遇到的一些坑。
    • 9480
    • 2
  • Linux中国
    2年前
    Python
    使用 Python 处理 JSON 格式的数据
    JSON 的全称是 JavaScript 对象表示法JavaScript Object Notation。这是一种以键值对的形式存储数据的格式，并且很容易解析，因而成为了一种被广泛使用的数据格式。另外，不要因为 JSON 名称而望文生义，JSON 并不仅仅在 JavaScrip…
    • 2543
    • 评论
  • ocavue
    3年前
    JavaScript 前端 后端
    格式校验利器：JSON Schema 简介
    JSON，全称 JavaScript Object Notation. 是 JS 的数据结构的子集。相信大家对 JSON 也非常熟悉了。JSON 一共只有六种数据结构，这里列举他们在 JS 和 Python 中的叫法以及在 JSON 中的例子： 由于 JSON 是 JS 语法的…
    • 1.3w
    • 1
  • 一_曲
    2年前
    前端
    图片上传方案详解
    以往用到图片上传功能都是直接使用现成的插件，今天把其中用到的知识点整理一下。 指定选择文件类型的范围。默认为所有文件类型 当文件类型为图片或视频且在移动端时，此属性才有意义。 返回一个 FileList，列出每个所选文件对象。除非 multiple 指定了属性，否则此列表只有一…
    • 1.0w
    • 27
  • Andy_GF
    9天前
    iOS
    iOS 加载 webp 格式的图片
    能进来看这篇文章的同学, 相信已经不是新手了, 所以基本的东西就不多说了. 本文主要说的是使用 SDWebImage 以不同的方式加载 webp 格式的图片, webp 格式图片的优点 与 缺点我也不
    • 430
    • 4
    iOS 加载 webp 格式的图片
  • 快乐的小小程序猿
    2月前
    Python
    随笔-Python批量转换图片格式
    随笔-Python批量转换图片格式 使用Python批量转换图片格式是非常方便的，这里选用比较小的python库Imageio来实现图片格式转换。 代码：
    • 138
    • 评论
  • fengxianqi
    3年前
    前端 Canvas 服务器
    前端图片canvas，file，blob，DataURL等格式转换
    场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法： 当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520…
    • 1.3w
    • 3
  • 轻舟已过万重山
    5月前
    Spring Boot
    约定前后端对接数据格式
    # 引言 轻舟采用前后端分离架构，前后端数据传输主要使用 json 格式。对 json 格式数据进行统一约定，将为 HTTP 接口对接，调试带来方便。 # 格式约定 清单1：返回信息格式约定源码
    • 452
    • 评论
  • 止战之殇
    3年前
    前端 Canvas 动效
    水波图实现原理
    在项目中自己使用 Canvas 实现了一下水波图，在这里给大家分享一下它的实现原理。 一开始看到波浪，可能不知道从何入手，我们来看看波浪的特征就会有灵感了。 没错，有人肯定会想到，就是 正余弦曲线！对于波陡很小的波动，一般选择正弦或余弦的曲线来表示波形，这是最简单而又最接近实际…
    • 2.0w
    • 50
  • OBKoro1
    3年前
    前端 命令行 ESLint
    VsCode读取项目文件的Eslint规则 保存时自动修复格式错误
    同一个项目，保持代码风格的一致，是非常重要的一个规范。但事实上项目小组成员的代码校验规则、格式化工具通常都不一致，为了避免项目到后期出现无法维护的问题，项目成员使用同一套校验规则，同一个格式化方式是相当好的步骤之一。 注意要安装在开发环境上，还有就是如果你使用的是脚手架的话，选…
    • 9027
    • 20
    VsCode读取项目文件的Eslint规则 保存时自动修复格式错误
  • 九酒
    3年前
    JavaScript 前端 算法
    js实现封装MP4格式文件并下载
    在MP4文件格式中，整个视频容器都是由多个box和子box组成，根据box类型主要分为3大类：视频类型（ftyp）、视频数据（mdat）、视频信息（moov）。视频信息（moov）用来描述视频数据（mdat）。（注：还有一个主要box为moof box，因这里仅解释普通MP4格…
    • 3050
    • 2
  • kyrieliu
    2年前
    SVG WebP 前端
    [译] 你用对图片格式了吗？
    截至2017年3月，超过65%的网页内容都是由图片组成的。 这并不是一件令人意外的事情：图片是一种美观并具有感染力的信息载体，它可以直观的和你网站的访问者建立联系并讲述内容。 但出于事物的两面性，如果使用的不得当，图片往往会变成导致网页加载缓慢和差劲用户体验的罪魁祸首。 在这篇…
    • 3475
    • 1
  • leobert-lan
    6月前
    Android
    好玩系列：让项目中的相册支持Heif格式图片
    考虑到页面UI统一度问题，甚至会在应用内实现 相册功能。据此推断：各位的项目中，会遇到 Heif格式图片 需要兼容的需求。 笔者目前参与的商业项目，也被市场要求对Heif图片进行适配。这篇文章，记录了我在这件事情上 折腾 的过程。 随着市场上的Android机器已经大面积过渡到…
    • 717
    • 评论
  • 张鑫旭
    2年前
    JavaScript 前端 Canvas
    图片纯前端JS压缩的实现
    以上就是图片前端压缩并上传demo的完整演示。 要想使用JS实现图片的压缩效果，原理其实很简单，核心API就是使用canvas的drawImage()方法。 各参数具体含义可以参见“Canvas API中文文档-drawImage”，这里不展开。 把大图片画在一张小画布上，压缩…
    • 2.5w
    • 54
  • 大海我来了
    8月前
    图片资源
    为你的网站加上 WebP 格式的图片吧
    之前写了一篇文章：jpg、gif、png和svg用于web上，我们该如何选择最合适的图像格式，介绍了这几种图片格式的特点，以及如何为网站选择合适的图片，然后评论区有位大佬让我补充下 WebP 格式，于是乎它来了。 WebP 是一种现代图像格式，可为 Web 上的图像提供出色的无…
    • 587
    • 评论
    • 关于作者
    获得点赞7
    文章被阅读10,201
    下载掘金客户端
    一个帮助开发者成长的社区
    相关文章
    聊一聊几种常用web图片格式：gif、jpg、png、webp
    82
    6
    聊一聊几种常用web图片格式：gif、jpg、png、webp
    108
    12
    格式校验利器：JSON Schema 简介
    44
    1
    iOS 加载 webp 格式的图片
    2
    4
    前端图片canvas，file，blob，DataURL等格式转换
    173
    3