图片资源需按用途、格式、访问频率、设备能力四维度分类：首屏图精控尺寸与格式，非首屏图懒加载并适配双尺寸，装饰图转svg或严控体积；jpeg限摄影图，png限透明/文字图，webp/avif为主力；热图缓存1年，温图按周期更新，冷图边缘缓存；服务端依设备分发响应式图，路径含分类信息，html禁用固定大图。
合理分类图片资源，本质是让每张图“各司其职”，避免用高规格资源干低需求的活。分类不是简单按文件名打标签，而是围绕使用场景、技术特性与加载逻辑做结构化归档，从而精准控制带宽分配。
按用途分层：明确每类图的带宽责任
把图片划为三类核心角色，能直接约束体积与加载策略：
- 首屏关键图：如商品主图、登录页Banner、核心CTA按钮背景。必须优先加载、尺寸精控（例如移动端≤800px宽）、格式强制WebP、质量设为75–85，禁用懒加载。
-
非首屏内容图：如详情页长图文、用户评论配图、分页列表缩略图。启用懒加载（
loading="lazy"），统一生成2x/1x双尺寸，服务端根据devicePixelRatio和width媒体查询动态返回适配版本。 - 装饰性与占位图：如UI图标、分割线、骨架屏占位图。全部转为SVG或内联data URL；若必须用位图，则统一压缩至2KB以内，格式用PNG-8或AVIF（支持浏览器下）。
按格式特性分类：匹配内容本质，不硬套统一标准
不同格式天生适合不同图像类型，混用反而浪费带宽：
- JPEG：仅用于真实摄影类图（人像、场景、商品实拍），禁用在文字截图、扁平UI上——后者用PNG或SVG更小。
- PNG：只保留两类：①需要Alpha透明通道的图（如带阴影logo、镂空图标）；②含锐利线条/文字的截图（避免JPEG压缩伪影）。其余一律转WebP。
-
WebP/AVIF：作为默认主力格式。WebP兼容性好（Chrome/Firefox/Safari 14+均支持），AVIF用于支持它的现代环境（体积再降20–30%），通过
<picture></picture>标签优雅降级。
按访问频率与生命周期分类：分离冷热数据，优化CDN缓存效率
带宽消耗不仅来自体积，更来自重复传输。分类后可配置差异化缓存策略：
-
热图（高频访问、长期不变）：如品牌Logo、通用图标、首页轮播图。设置CDN缓存TTL为1年，加
immutable头，彻底规避304请求。 -
温图（中频更新、有业务周期）：如促销Banner、季节性活动图。按业务周期命名（如
banners/2026-fall-sale.jpg），TTL设为30天，URL变更即刷新缓存。 - 冷图（低频、用户生成、临时性强）：如买家秀、客服上传凭证。不进CDN主缓存池，走边缘缓存+对象存储直链，配合签名URL防盗链，避免被爬取放大带宽。
按分辨率与设备能力分类：杜绝“一图打天下”
不做响应式适配，就是把PC图强塞给手机用户——典型带宽浪费。必须按设备能力分发：
- 服务端识别
User-Agent或Accept-CH: DPR, Width（Client Hints），对移动设备默认返回宽度≤750px的图；平板≤1200px；桌面≥1920px但不超过原始图宽的1.5倍。 - 静态资源目录结构体现分类，例如：
/img/product/iphone15/hero/webp/750w.webp，路径本身即携带尺寸、格式、用途信息，便于CDN规则匹配与运维排查。 - 禁止在HTML中写死
src指向原始大图，所有<img>必须用srcset或<picture></picture>声明多源，由浏览器自主选择最适配版本。
