Yii2框架下如何在用户上传时压缩图片大小

问题根源 #

只限制上传大小到100KB远远不够——用户可能传的是高分辨率的小体积图（比如高清PNG），浏览器渲染时还是要花大量资源解码；加上没做格式转换、懒加载这些优化，页面加载慢自然会推高跳出率。

具体优化步骤 #

1. 强制转WebP+自动压缩 #

不管用户传的图多大，在Yii后端处理上传时直接转成WebP格式，同时压缩质量。WebP比JPG/PNG体积小30%左右，对性能提升明显。
Yii 2.x的示例代码：

use yii\imagine\Image;

// 假设上传后的图片路径存在$imagePath里
$img = Image::getImagine()->open($imagePath);
// 转WebP，质量设80（平衡画质和体积）
$img->save(str_replace('.png', '.webp', $imagePath), ['webp_quality' => 80]);
// 删掉原文件，后续页面直接用WebP版本
unlink($imagePath);

2. 给图片加懒加载 #

页面里所有图片都加上loading="lazy"属性，让浏览器只加载可视区域内的图，减少初始加载资源。Yii视图里可以这么写：

echo Html::img($imageUrl, [
    'loading' => 'lazy',
    'alt' => '图片描述' // 别忘了加alt，还能优化SEO
]);

3. 生成多尺寸缩略图 #

别在列表页用原图！根据页面场景生成不同尺寸的缩略图：列表页用300x300的小图，详情页用800x600的中图，避免大材小用。
示例代码：

// 生成300x300的缩略图，自动裁剪居中
Image::thumbnail($originalPath, 300, 300)
    ->save('uploads/thumb_' . $fileName, ['quality' => 80]);

4. 配置图片缓存 #

在服务器（比如Nginx）里给图片加长期缓存，让浏览器重复访问时直接读本地缓存，不用再请求服务器：

location ~* \.(webp|jpg|png)$ {
    expires 30d; # 缓存30天
    add_header Cache-Control "public, immutable";
}

5. 前端加占位符 #

用低像素占位图（LQIP）或者纯色占位，用户打开页面时不会看到空白，感知加载速度会快很多，也能避免布局跳动。

额外提醒 #

• 前端的大小限制只能做辅助，后端必须再校验一遍，防止有人绕过前端传大文件。
• 定期清理服务器上没人用的旧图片，减轻存储和加载压力。

内容的提问来源于stack exchange，提问作者Kartikey Joshi