一、基础设置调整
1. 关闭图片预加载：在开发者工具的“Network”面板 → 右键点击图片资源 → 选择“Block Request” → 阻止特定图片加载。
2. 修改渲染设置：在地址栏输入 `chrome://settings/system` → 取消勾选“预测性网络内容加载” → 减少自动图片请求。
3. 限制缓存容量：在设置的“隐私与安全” → 点击“清除浏览数据” → 设置缓存上限为500MB → 避免存储过期图片。
二、代码级优化
1. 使用懒加载指令：在控制台输入以下代码：
javascript
document.querySelectorAll('img').forEach(img => {
img.loading = 'lazy';
img.setAttribute('defer', '');
});
→ 仅加载视口内图片。
2. 替换无效占位图：使用CSS样式：
css
[data-src]:not([src]) {
content: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
}
→ 用1像素GIF替代未加载图片。
3. 过滤低分辨率图片：在开发者工具的“Sources”面板 → 添加以下代码到页面：
javascript
let images = document.querySelectorAll('img');
images.forEach(img => {
if (img.width < 100 && img.height < 100) {
img.style.display = 'none';
}
});
→ 隐藏过小无价值图片。
三、网络请求管理
1. 阻止第三方图片：在扩展商店安装“uBlock Origin” → 添加自定义规则：
||example.com/images/
→ 屏蔽指定域名图片。
2. 设置带宽限制：在开发者工具的“Network”面板 → 右键点击图片请求 → 选择“Throttle” → 限制单个请求速度。
3. 合并重复请求：在控制台输入：
javascript
let seen = new Set();
document.querySelectorAll('img').forEach(img => {
let src = img.src;
if (seen.has(src)) {
img.src = '';
} else {
seen.add(src);
}
});
→ 去重相同图片请求。
四、插件辅助方案
1. 安装“Image Control”扩展：在扩展商店搜索安装 → 设置规则：
- 隐藏大于1MB的图片
- 阻止非HTTPS图片加载
- 移除广告类图片元素
2. 使用“NoMoreTabs”插件：将多标签页合并为缩略图 → 减少多页面图片缓存占用。
3. 配置“Disable Images”扩展：设置白名单仅显示必要图片 → 其他图片显示为占位符。
五、服务器端配合
1. 验证响应头：在开发者工具查看图片请求头 → 确保包含：
- `Cache-Control: no-cache`（重要图片）
- `Expires: 0`（临时图片）
2. 设置CDN规则：通过Cloudflare等平台配置：
- 对小于5KB的图片启用浏览器缓存
- 对动态生成的图片添加版本后缀
- 对广告类图片设置1小时超时时间
3. 检测盗链请求：在服务器日志筛选referer为空的请求 → 设置防盗链策略 → 减少外部无效调用。