移动端图片卡顿主因是HTTP请求阻塞与资源过大，需设Cache-Control+ETag、按DPR/viewport生成适配尺寸WebP缩略图，并将图片服务剥离至CDN/对象存储。
移动端图片加载卡顿，本质是 HTTP 请求阻塞与资源体积过大
PHP 本身不直接渲染图片，但常通过 readfile()、imagejpeg() 或 Nginx/Apache 的动态路由（如 /api/image.php?id=123）输出图片。这类接口若未正确设置缓存头、未压缩、未适配设备分辨率，就会导致移动端反复请求、解码慢、首屏延迟——不是 PHP 执行慢，而是浏览器没复用缓存，或下载了远超屏幕所需的高清图。
必须设置 Cache-Control 和 ETag，否则每次都是 200 而非 304
PHP 动态生成图片时，默认无缓存响应头，浏览器无法复用。即使内容不变，也会重复下载。关键不是「加缓存」，而是「加对缓存」：
-
Cache-Control: public, max-age=86400（静态化图片可设 1 天；若图片可能更新，改用max-age=3600+ETag） - 务必配合
ETag：用图片内容哈希（如md5_file($path)）或数据库中记录的 version 字段生成，避免时间戳类弱 ETag - 禁用
Expires（HTTP/1.1 已过时），优先用Cache-Control - 如果用 CDN（如 Cloudflare、腾讯云 CDN），确保其未覆盖或忽略你设的
Cache-Control
示例片段：
header('Cache-Control: public, max-age=3600');
header('ETag: "' . md5_file($real_path) . '"');
header('Content-Type: image/jpeg');
readfile($real_path);
PHP 生成缩略图必须按设备 DPR 和 viewport 宽度裁切，不能只靠前端
移动端网络差、CPU 弱，浏览器下载 2000px 宽原图再缩放显示，既浪费带宽又触发 JS 解码卡顿。PHP 后端需主动识别设备能力并输出合适尺寸：
