您现在的位置是:首页 >其他 >web开发 处理多媒体文件网站首页其他

web开发 处理多媒体文件

可缺不可滥 2024-06-17 10:22:15
简介web开发 处理多媒体文件

图片

html用img标签在网页上输出图片。

格式

图片的格式有很多种,常见如下 gif、jpg、png、webp。

gif

gif 格式,常用于页面中的简单动画,有的时候会被用于logo或者icon。但logo或者icon我们更常用png格式的图片来替代gif。

gif格式的缺点是图片的色彩不够丰富,所以logo或者icon更愿意使用png格式的图片。
gif格式的优点也很明显,可以透明的,而且采用无损压缩,尺寸相对较小,支持动图,兼容性很好。

png

png的格式有两种 png-8和png-24,通常我们使用png-8。

png-8采用无损压缩,尺寸更小,支持透明,色彩表现更好。所以它能部分替代gif格式的图片。
png-8 的缺点也就是不能支持动图,这也是gif不能被png完全替代的原因。

jpg

jpg是一种有损的基于直接色的图片格式。jpg可使用的颜色非常多,色彩渲染极强,对图片视觉要求较高的话,jpg是不错的选择。

jpg图片的缺点也很明显,采用有损压缩后,尺寸仍然较大,可能会影响网站性能。

webp

WebP图片是一种新的图像格式,由Google开发。

与jpg或者png相比,webp格式的图片更小,还支持有损压缩和无损压缩,甚至支持动画和透明。不得不说,google的确很厉害。

webp格式的致命缺点是兼容性不太好,但在移动端的支持还是不错的,但ios完全不支持。

pc端的兼容性
在这里插入图片描述
移动端的兼容性
在这里插入图片描述
所以我们在开发代码的时候,要做好webp图片兼容性的处理,pc端建议的方案是html5的picture。

<picture>
    <source srcset="xxx.webp" type="image/webp">
    <img src="xxx.png" alt="test">
</picture>

图片格式对比

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

图片的使用方式

除了格式需要注意以外,图片的使用方式大致分为三种:

  1. 将图片作为静态资源,随着项目打包上传,然后在项目中直接引用。
  2. 将图片上传到服务器,在项目中直接通过url引用,或者使用外站的图片网址。
  3. 将图片转为base64的格式,直接在代码中使用。

这三种方式各有优劣

将图片作为静态资源上传,会加大项目的体积,如果图片太多会影响整体服务器的性能。但你不用担心很多关于图片的安全问题,因为这样的图片只能在本站使用,其它网站无法通过url直接使用该图片。这样也便于项目的维护,想要替换图片,直接在本项目中替换资源即可。

将图片上传到服务器,会十分方便图片库的搭建。上传一次,多个项目可用。img标签是没有跨域限制的,图片的url在a网站可用,在b网站同样可用,而且图片的加载和整体dom的渲染是异步的,对本项目的影响较小。缺点也很明显,如果图片的url被不怀好意者利用,将会对图片上传的网站构成威胁,维护也不方便,如果图片被上传网站删除或者更改,所有使用图片链接的网站都会收到影响。随意使用外站的图片链接,甚至可能会面临侵权的问题。

将图片转为base64的格式只适用于尺寸较小的图片,一般情况下,小于8k的图片可以通过转为base64的方式直接使用。解析加载快,不需要额外下载,只是会增加代码的体积,但相对于8k以下的图片来说,增加的代码体积会更小,所以比较划算。没有太多的安全问题,兼容性也比较好,但如果图片太大,转为base64,会让代码看起来十分冗长,不便于维护。

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

图片的其它内容

图片在使用的时候,如果太大,影响到网站性能,是需要压缩的。
熊猫在线压缩是一个不错的工具:https://tinypng.com/
将图片转为base64的工具非常多:https://c.runoob.com/front-end/59/
这是一个不错的图片格式转换器:https://convertio.co/zh/image-converter/

视频

格式

网站主流的视频格式为MPEG4和WebM两种。
两种视频格式在大小和质量上相似,只是编码和兼容性上存在差异。

格式IEFirefoxOperaChromeSafari
MPEG49.0+yesyes5.0+3.0+
WebMNo4.0+10.6+6.0+yes

从兼容性上看,这两种格式刚好互补,因此,我们开发过程中,需要准备好两种格式的视频。

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

转换

我们常用的视频格式转换工具 https://convertio.co/zh/video-converter/

音频

音频格式类别较多,MP3、WAV、AIF、MIDI等,在网站中,常用的也就MP3和WAV这两种。

<audio controls>
  <source src="foo.mp3" type="audio/mpeg">
  <source src="foo.wav" type="audio/wav">
  Your browser does not support the <code>audio</code> element.
</audio>

wav

WAV格式的音频文件具有较好的声音品质,许多浏览器都支持此格式,并且不要求安装插件。可以利用CD、磁带、麦克风等获取自己的WAV文件。但是,WAV文件容量通常较大,严格限制了可以在WEB页面上使用的声音剪辑的长度。

mp3

MP3格式的音频文件最大的特点就是能以较小的比特率,较大的压缩比达到近科完美的CD音质。CD是以1.4MB/S的数据流量来表现其优异的音质的。而MP3仅需要112KB/S或128KB/S就可以达到逼真伯CD音质。

所以,可以用MP3格式对WAV格式的音频文件进行压缩,既可以保证音质效果,也达到了减小文件容量的目的。

转换

我们常用的视频格式转换工具 https://convertio.co/zh/audio-converter/

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。