通过PHP上传时自动缩放再压缩、按客户端支持动态输出WebP格式，并设置正确Content-Type与Nginx优先协商，可有效解决图片加载慢、带宽高、移动端卡顿问题。

你的PHP 图片加载慢、带宽消耗高，用户滑动页面时图片卡顿、白屏，根源很可能是服务端未对上传图片做尺寸控制和格式优化。

大图直传、JPEG硬扛、无条件输出，都会导致移动端首屏加载超3秒。

上传时自动压缩并缩放

先确认GD扩展能力完整

先做第一步：确认GD扩展已经启用，而且确实具备JPEG、PNG、WebP的处理能力。

可以直接运行php -r "print_r(gd_info());"，重点看jpeg support、png support、webp support这三项是不是都为true。

只要其中任意一项是false，就说明相关能力没装完整。

这时候需要把对应的系统依赖重新补齐，例如在Ubuntu环境下可执行sudo apt install php-gd libjpeg-dev libpng-dev libwebp-dev。

上传逻辑中插入压缩流程

第二步：在文件上传逻辑中插入压缩函数，先缩放再压缩，顺序不可颠倒。

否则浏览器仍要下载原图，再靠CSS压窄，CDN流量白流。

优先使用高质量重采样

第三步：使用imagecopyresampled()而非imagecopyresized()进行重采样。

• imagecopyresampled()用双线性插值，边缘锐利。
• imagecopyresized()是最近邻插值，缩放后模糊发虚，尤其文字图标会糊成一片。

压缩参数建议

第四步：JPEG质量设为75～80，PNG压缩等级设为6（0–9），WebP质量设为75。

• 低于60的JPEG会出现明显色块。
• 高于85则体积陡增，但人眼难辨提升。

【关键前提】必须先获取原始尺寸再计算目标比例，不能直接写死resizeToWidth(800)。

若源图宽仅400px，强行拉伸会导致像素失真变形。

按浏览器支持动态返回WebP

方法一：根据 Accept 头判断

先看HTTP的 Accept 头里有没有声明对 WebP 的支持。

做法并不复杂：读取$_SERVER['HTTP_ACCEPT']，再用stripos($accept, 'image/webp') !== false来判断。

一旦确认支持，再调用imagewebp()输出；如果不支持，就老老实实回退到 JPEG/PNG 作为 fallback。

方法二：前端配合 picture 标签

前端可配合标签实现无JS降级。

服务端无需判断，统一输出WebP路径，由浏览器自主选择：

确保返回正确Content-Type

注意：WebP响应必须设置正确Content-Type，否则Chrome等浏览器拒绝渲染。

输出前务必加header('Content-Type: image/webp');，JPEG对应image/jpeg，PNG对应image/png。

批量转换存量图片为WebP

• ① 在Linux服务器上安装cwebp工具：sudo apt install webp（Ubuntu/Debian）或sudo yum install libwebp-utils（CentOS/RHEL）。
• ② 进入图片目录，执行单图有损压缩：cwebp -q 75 product_001.jpg -o product_001.webp。-q参数范围0–100，75是画质与体积的黄金平衡点。
• ③ 批量处理全部JPG：for i in *.jpg; do cwebp -q 75 "$i" -o "${i%.jpg}.webp"; done。执行后用ls -lh *.webp对比原始大小，典型商品图可缩减28%～33%。
• ④ 生成同名.jpg的.webp文件后，修改Nginx配置启用WebP自动协商（需配合map指令与try_files），让静态请求优先命中.webp文件。

《夸克》非常好用的免费AI浏览器

下载APP查看