网站图片、视频优化处理

2020-09-23

2023-06-02

4 min read

Hits

5G 时代了，每一个网站都少不了图片和视频，图片和视频文件越大，占用的服务器空间就越大，要花的 money 就越多。而且大型文件的加载速度也更慢，还浪费用户宝贵的流量。有些和博主一样聪明的站长会想到“压缩”，可是如果要压缩，势必会影响画质，总不能为了省钱影响观感。所以相信广大站长朋友们，也一定和博主一样，试图寻找一个“最佳图片格式”和“最佳视频格式”。所谓的“最佳”便是——牺牲最小的画质，占用最小的空间！

而现在，它来了！

图片优化

先来讲讲图片优化。要压缩图片，同时也要尽可能地“无损画质”，当然首先要确定一种图片格式。常见的图片格式大家也一定不陌生，例如 png、jpg、jpeg、gif、bmp 等等。但是今天博主要安利的是一种船新的图片格式：WebP

WebP

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. ——摘自 Google WebP

WebP 是由谷歌推出的一种图片格式，由它的名字就可以知道，这个图片格式就是“为网络而生”。将图片压缩为 WebP 格式，可以完美的解决本文开头的问题。经博主少量测试，图片压缩为 WebP 格式后，画质会有一定的影响，但是不影响肉眼的观看，而图片大小惊人地缩小了 N 倍。大部分一般的图片都能缩小到 4KB！少数则可能为十几 K。所以下面博主给出谷歌官方压缩工具和用法

libwebp

“libwebp”就是谷歌官方的图片压缩工具了，谷歌官方下载地址：libwebp

下载完成后，我们进入文件夹中的bin目录，将其中的cwebp.execopy 到要压缩的图片文件目录下，并使用这一行命令进行压缩

cwebp.exe 要压缩的图片文件名.png -o 压缩后的图片文件名.webp

然后就得到压缩后的图片咯。

视频优化

同样的再来讲讲视频优化。因为本文要压缩的视频是针对网站上的，所以在选择视频格式的时候，肯定优先选择又是“谷歌出品”的 WebM。可能是因为技术太前卫，将视频压缩为 WebM 格式，所需消耗的时间是视频本身时长的好几倍，为了兼顾那些长视频的压缩，无奈只能放弃 WebM 格式，转而寻求其它视频格式。

在博主尝试了多种常用视频格式，并考虑了 CDN 的因素（现在主流的 CDN，都会对 mp4 格式的文件进行“分片缓存”）后，决定还是采用 mp4 的视频格式，只不过是 H.264 编码的 mp4 格式。

H.264 编码

H.264，又称为MPEG-4第10部分，高级视频编码（英语：MPEG-4 Part 10, Advanced Video Coding，缩写为MPEG-4 AVC）是一种面向块，基于运动补偿的视频编码标准。到2014年，它已经成为高精度视频录制、压缩和发布的最常用格式之一。第一版标准的最终草案于2003年5月完成。 H.264因其是蓝光盘的其中一种编解码标准而著名，所有蓝光盘播放器都必须能解码H.264。它也被广泛用于网络流媒体数据如Vimeo、YouTube、以及iTunes Store，网络软件如Adobe Flash Player和Microsoft Silverlight，以及各种高清晰度电视地面电视（ATSC、ISDB-T、DVB-T或DVB-T2）、线缆（DVB-C）以及卫星（DVB-S和DVB-S2）。 ——摘自《维基百科》H.264/MPEG-4 AVC 词条

博主在这里要澄清下：为什么选用 H.264 编码而不是更先进的 H.265 编码？

答：因为在 Windows 10 上，需要购买解码器才能播放。

FFmpeg

视频处理博主选用了国外开源软件：FFmpeg。听说国内好多视频处理软件都是这个开源软件加的壳？博主怕被封，话不多说，直接放出官方下载地址：FFmpeg

和上面 libwebp 一样的操作，进入文件夹中的bin目录，然后将其中的ffmpeg.execopy 到要压缩的视频文件目录下，然后博主教大家两种优化，分别是“压缩”和“剪辑”

ffmpeg -i 要压缩的视频文件名.mp4 -c:v libx264 压缩后的视频文件名.mp4     # 将视频以 H.264 编码压缩
ffmpeg -i 要压缩的视频文件名.mp4 -c:v libx265 压缩后的视频文件名.mp4     # 将视频以 H.265 编码压缩
ffmpeg -i 要剪辑的视频文件名.mp4 -ss 01:22:33.0 -c copy -t 04:55:66.0 剪辑后的视频文件名.mp4     # 剪出视频的 01(h):22(m):33(s):0(ms) 至 04:55:66:0
ffmpeg -f concat -i 要合并的视频.txt -c copy 合并后的视频文件名.mp4     # 依次合并“要合并的视频.txt”内的视频，“要合并的视频.txt”内的格式如下所示

file '要合并的视频1.mp4'
file '要合并的视频2.mp4'
……
file '要合并的视频n.mp4'