图片视频文件缓存设置指南 - 提升网页加载速度

为什么缓存对图片和视频这么重要

打开网页时，图片加载慢、视频卡顿是常见问题。尤其是电商网站或内容平台，页面里动辄几十张缩略图，加上几个自动播放的短视频，如果没做好缓存设置，用户每次访问都得重新下载一遍，流量哗哗地走，体验也差。

合理的缓存策略能让浏览器记住已经加载过的资源，下次访问直接从本地读取，不用再走网络请求。这对移动端用户尤其友好——谁也不想看个商品详情页就消耗几MB流量。

服务器通过响应头告诉浏览器哪些文件可以缓存、能存多久。最常用的两个头是 Cache-Control 和 Expires。

比如你有一批用户头像图片，路径是 /static/avatars/，希望浏览器缓存7天：

Location ~* \.(jpg|jpeg|png|gif)$ {
    expires 7d;
    add_header Cache-Control "public, no-transform";
}

如果是视频文件，比如 MP4，通常体积更大，更需要长期缓存：

Location ~* \.(mp4|webm|ogg)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

这里用了 immutable，意思是这个文件一旦下载过就不会变，浏览器完全不需要去检查更新，节省一次条件请求。

光靠时间控制不够保险。比如你把一张宣传图缓存了30天，结果第三天发现图上有错别字，换掉服务器文件后，用户那边可能还是旧图。

解决办法是给文件名加哈希值，比如把 banner.jpg 改成 banner_a1b2c3d.jpg。内容变了，文件名就变，URL也就不同，自然触发新下载。配合构建工具（如 Webpack），这个过程可以自动化。

很多网站用 CDN 加速静态资源。但有个坑：就算你服务器更新了图片，CDN 节点上可能还留着旧缓存。这时候需要主动刷新 CDN 缓存，或者在上传新文件时使用唯一路径，比如按时间戳命名：/uploads/20250405/video_intro.mp4。

App 里展示用户上传的图片或短视频，如果每次都从网络拉，滑动列表就会卡。常见的做法是用框架自带的缓存机制，比如 Glide（Android）或 SDWebImage（iOS），它们默认会把下载的图片存在本地磁盘，下次加载相同 URL 直接读文件。

视频封面图也可以走同样流程。但要注意清理策略，别让缓存无限增长。可以设个上限，比如最多存 200MB，超出就删掉最早的数据。

一个电商后台的朋友说，他们之前首页轮播图每次打开都要重新加载，后来加上了 Cache-Control: max-age=86400，第二天统计显示首页平均加载时间少了 1.3 秒，跳出率降了 9%。看似只是加了行配置，实际影响的是成千上万用户的体验。

缓存不是设一次就完事的事，得结合业务节奏调整。促销期间频繁换图，缓存时间就得缩短；长期不变的资源，比如 logo、图标，完全可以设成一年不更新。