前端资源优化（一）

简要

前端所用的静态资源一般有图片，音乐，视频。我今天就分享一些优化压缩这些资源的工具以及方法

图片

非常强大的线上图片压缩工具https://tinypng.com/

• 常用的图片格式jpg，png都能进行压缩，操作很简单，将图片拖拽到指定区域即可，最多可同时压缩20张图片
• 除了线上地址，tinypng官网也提供了ps的插件
• 还准备了本地压缩工具 http://tgideas.qq.com/cguide/down/Tinypng.rar（需要注意它会自动覆盖源文件，提前备份）
• 基本压缩率都在百分之七十左右，非常高效好用

音乐

给大家推荐一款强大的音频编辑器 cool edit pro

• 它是一款强大的多轨数字音频处理系统
• 因为它不仅仅可以压缩剪辑音频，还可以随意改变音频信号曲线，对音频进行放大，降噪，回声，延迟等等流弊操作
• 如果你是一个歌曲爱好者，你完全可以用它编辑出录音棚的效果

• 这块软件是收费的，但是网上可随意搜出破解版，这里我就不放链接了，大家有兴趣可以自己了解下。英文不好可以下个汉化版玩玩，操作很简单

  
  

视频（主要移动端）

https://handbrake.fr/ 是个免费的视频压缩软件，对x264也支持的很好，视频压缩可以有很多参数去设置

• 现在移动端插入视频的需求越来越多，视频需要持续的加载，所以优化视频编码能让视频播放的更加流畅
• 特别是现在h5活动中，运用全屏视频效果深受客户喜爱，所以能在移动端和微信流畅播放的视频，达到的效果比后端去操作服务器更简单一点
• 下面是腾讯建议的参数，大家在压缩视频时可以作为参照

建议参数
格式 mp4
编码 H.264（AVC）
编码工具 x264
尺寸 1334*750
码率 950≤x≤1350kbps
帧率 推荐24fps
编码配置 main
编码等级 4.1
编码方式 平均码率+二次编码
音频格式 AAC
音频码率 ≤128kbps
音频采样率 44.4kHz