短视频开发app,谈谈前端图片的相关知识点

简介: 短视频开发app,谈谈前端图片的相关知识点

图片是短视频开发app中的常用元素之一,图片可以用在多种场景下,并且能发挥出不同的作用。虽然在用户看来短视频开发app中使用的图片没什么区别,但对开发者而言,前端图片的使用并没有看起来那么简单。

一、图片的类型

1、矢量图

在短视频开发app当中,矢量图不论是放大还是缩小都不会影响其清晰度。

2、位图

由于位图可以展现出色彩的变化和颜色的细微过渡,所以呈现的效果更逼真,在短视频开发app中应用也比较广泛,但位图的存储需要保存每一个像素的位置和颜色值,所以占用空间较大。

二、图片的压缩

1、无压缩

主要是指不对图片进行压缩处理,直接以原片的形式呈现。

2、有损压缩

主要是指以损失一部分图片信息为代价进行图片的压缩,虽然有损压缩的压缩比比较高,但会降低图片的质量,而且降低的这部分图片质量是不可恢复的。

3、无损压缩

主要是指不对图片质量造成影响的压缩方式,在短视频开发app中使用无损压缩不会损耗任何图片质量,但是压缩比不高。

三、不同图片格式的优缺点

1、Gif

优点:可在保证图像质量的同时缩小图片的体积,可在短视频开发app中插入多帧实现动画效果,可以设置为透明色。

缺点:能够处理的颜色只有256种。

2、Png

优点:能够保证图片不失真的情况下缩小图片的体积,像素比较丰富且支持透明。

缺点:该格式下的图片体积比较大。

3、Jpeg

优点:可用于短视频开发app中色彩丰富的图片、照片,可通过控制压缩比改变图片体积大小,支持交错。

缺点:属于有损压缩,图片被压缩后图片的质量会下降,该格式的图片是不支持透明度处理的。

4、Svg

优点:该格式的图片尺寸更小,且压缩性强,在短视频开发app中使用该格式的图片可以实现多种滤镜和特殊效果,即便不改变图片内容也能实现位图格式中的阴影效果。

缺点:该格式图片复杂度比较高,所以渲染速度慢、渲染成本高、学习成本高。

在短视频开发app中图片往往能够传达更丰富的内容,所以图片被使用在各种场景中,在不同场景下应该选择合适的图片格式,这样才能在保证短视频开发app质量的同时,提升用户的使用体验。

声明:本文由云豹科技原创,转载请注明作者名及原文链接,否则视为侵权

相关文章
|
2天前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
6天前
|
运维 Android开发 开发者
你知道APP是怎么开发的吗?
【7月更文挑战第9天】你知道APP是怎么开发的吗?
|
1天前
|
Android开发 Kotlin
kotlin开发安卓app,如何让布局自适应系统传统导航和全面屏导航
使用`navigationBarsPadding()`修饰符实现界面自适应,自动处理底部导航栏的内边距,再加上`.padding(bottom = 10.dp)`设定内容与屏幕底部的距离,以完成全面的布局适配。示例代码采用Kotlin。
30 15
|
1天前
|
存储 API Android开发
kotlin开发安卓app,使用webivew 触发 onShowFileChooser, 但只能触发一次,第二次无法触发,是怎么回事。 如何解决
在Android WebView开发中,`onShowFileChooser`方法用于开启文件选择。当用户只能选择一次文件可能是因为未正确处理选择回调。解决此问题需确保:1) 实现`WebChromeClient`并覆写`onShowFileChooser`;2) 用户选择文件后调用`ValueCallback.onReceiveValue`传递URI;3) 传递结果后将`ValueCallback`设为`null`以允许再次选择。下面是一个Kotlin示例,展示如何处理文件选择和结果回调。别忘了在Android 6.0+动态请求存储权限,以及在Android 10+处理分区存储。
|
4天前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
9 0
|
4天前
|
JavaScript 前端开发
【vue】 接口返回的preview是张图片,前端如何渲染
【vue】 接口返回的preview是张图片,前端如何渲染
8 0
|
7天前
|
前端开发 JavaScript Java
开发做前端好还是后端好?
开发做前端好还是后端好?
|
11天前
|
JSON 小程序 数据格式
uni-app 使用vscode开发uni-app
uni-app 使用vscode开发uni-app
41 0
|
11天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
23 0
|
12天前
|
JSON 前端开发 API
移动端---------app开发03----apicloud必须掌握的代码
移动端---------app开发03----apicloud必须掌握的代码