预签名URL图片列表加载缓慢，如何优化图片大小或提升加载速度？

一、从图片源头上压缩（最核心优化） #

• 生成预签名URL时直接请求压缩后的目标尺寸资源：如果你的存储服务（如对象存储）支持实时图片处理，在生成预签名URL时拼接尺寸、格式、质量参数，比如?w=300&h=300&format=webp&q=80，让存储端直接返回适配列表的小图，跳过前端二次处理的开销。
• 提前生成多尺寸缩略图：若存储不支持实时处理，提前把原图压缩成列表专用的缩略图版本，单独存储，列表页直接请求缩略图的预签名URL，彻底避免加载大图。

二、前端加载策略优化 #

• 懒加载：仅加载视口内的图片，用原生loading="lazy"属性快速实现，或用Intersection Observer自定义懒加载逻辑，减少初始请求量。
• 低质量占位图（LQIP）：先加载10x10像素的极小模糊图当占位，等原图加载完成后再替换，提升页面感知速度。
• 放弃canvas前端压缩：你之前的方案是先下载大图再压缩，反而多了下载+处理的双重耗时，直接请求适配尺寸的预签名URL才是高效路径。
• 控制并发请求数：浏览器对同一域名的并发请求有数量限制（通常6个），如果图片数量多，可通过存储服务的多域名分发（支持的话），或分批触发请求，避免请求排队阻塞。

三、缓存策略优化 #

• 配置合理的缓存头：如果预签名URL允许设置缓存参数，配置合适的缓存时长（比如1小时），让浏览器缓存已加载的图片，避免重复请求。注意预签名URL的有效期要长于缓存时长，或缓存失效后重新生成新的预签名URL。
• 本地缓存复用：把加载完成的图片Blob数据存在localStorage或IndexedDB中，下次进入页面直接读取本地缓存，无需再次请求服务器。

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