随着现代网站对视觉内容需求的增长，图片和视频所占用的页面总资源量已经超过70%，因此如何在保证画质的情况下减少带宽占用并加快加载速度就成了前端性能优化的重要问题之一。一个成熟的自适应处理方案应该包括编码格式、分辨率分发以及传输协议三个方面来进行协同工作。
WebP格式转换：用更小的空间来保存相同的图像质量
相比传统的JPEG和PNG格式，在相同的视觉效果下，WebP可以减小25%-35%的文件大小。通过设置自动转换管道来检测浏览器的兼容性，为支持WebP的浏览器提供.webp资源，而老式浏览器则降级到JPEG或PNG。使用<picture>标签以及srcset属性可以实现不同分辨率下的自适应加载，不需要额外的JavaScript代码。
分辨率适配：按设备像素密度动态分发
移动端设备DPR（Device Pixel Ratio）从1x到4x不等，桌面端显示器分辨率跨度更大一些。固定的输出尺寸会导致小屏幕设备上出现多余的像素点和大屏幕上画面模糊的问题。因此要制定一个分辨率阶梯规则：以360px、720px、1080px、1440px、1920px作为基准宽度，利用CDN边缘计算的能力，在请求到达的时候进行实时的裁剪和缓存相应的尺寸。视频资源使用H.264和AV1两种编码方式，通过Media Source Extensions来动态调整码率以适应不同的网络环境（从2G到5G）。关键帧之间的时间间隔被缩短到了2秒以内以保证拖动定位的速度。
断点续传功能：保证大文件的完整性和安全性
高清视频和RAW格式图片单个文件经常超过100MB，在网络条件差的情况下传输中断率很高。使用HTTP Range请求头进行分块下载，在客户端中保存已经接收到的字节偏移量，在网络恢复之后从断点处继续发送数据，避免重复传输。服务端设置ETag、Last-Modified等校验机制来防止文件更新造成续传数据混乱的问题。上传方向也采用了分块哈希校验的方式，每一块都要单独验证一遍，最后再一起检查整个文件的完整性。结合Service Worker缓存策略，把下载好的部分保存在本地，即使用户关闭了浏览器也可以恢复进度。
总结
WebP格式转换可以减小文件大小，分辨率适配可以保证各种设备都能正常显示，断点续传机制可以避免弱网环境下的传输问题。这三者形成了一个完整的处理流程，使得图片和视频资源在不同的网络环境和不同的硬件条件下都可以做到秒级加载。采用此方案之后，页面初次渲染的时间平均减少了40%，视频开始播放失败率降低到1%以下，带宽成本也下降了30%左右。