移动端相册缩略图应通过srcset配合sizes属性，结合后端生成120w/240w/360w三档适配DPR的缩略图，并用PHP动态生成路径、支持WebP与CDN，辅以loading="lazy"实现高效加载。
移动端相册缩略图用 srcset 优化加载效率，核心是让浏览器按设备像素比（dpr）和视口宽度自动选最合适的缩略图尺寸，避免手机下载远超显示需要的大图。关键不在“加个属性”，而在后端生成合理尺寸集 + 前端精准声明。
缩略图尺寸要匹配典型移动端场景
相册缩略图通常以网格或列表形式展示，比如 3 列卡片、2 行瀑布流。常见显示宽度区间为：
- 小屏手机（
- 中屏（480–768px）：单图宽约 140–180px
- 大屏/高 DPR 设备（如 iPhone 15 Pro）：需提供 2x 或 3x 版本
建议生成三档缩略图：thumb-120.jpg、thumb-240.jpg、thumb-360.jpg（对应 1x/2x/3x），再配合 srcset 声明。
HTML 中正确写法（搭配 sizes）
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<img
src="thumb-120.jpg"
srcset="
thumb-120.jpg 120w,
thumb-240.jpg 240w,
thumb-360.jpg 360w
"
sizes="(max-width: 480px) 120px, (max-width: 768px) 160px, 180px"
alt="相册缩略图"
loading="lazy"
>-
120w等表示该图源的固有宽度（像素），不是显示宽度 -
sizes告诉浏览器：“在不同断点下，这张图在页面中实际占多少 CSS 像素” - 浏览器结合
devicePixelRatio自动算出应加载哪张（例如 iPhone 14 在 414px 宽视口下，sizes计算出显示宽≈120px，但 dpr=3 → 需要至少 360px 宽的图源）
PHP 后端需动态支持缩略图生成与路径拼接
不能只靠前端硬编码路径。推荐在模板中调用统一缩略图函数：
<?php echo thumbnail_url($photo_id, ['width' => 120, 'quality' => 85]); ?>
该函数内部：
- 检查对应尺寸缩略图是否存在，不存在则用 GD/ImageMagick 实时生成并缓存
- 自动适配 WebP：若请求头含
Accept: image/webp，且文件存在.webp版本，优先返回 WebP 路径 - CDN 域名自动注入，如
https://cdn.example.com/thumbs/photo_120.webp
别忽略懒加载与降级兼容
- 所有非首屏缩略图必须加
loading="lazy"，防止滚动前预加载大量图片 - 若需兼容老 Android（如 UC 内核），可保留
data-src+ JS 懒加载兜底，但现代项目优先用原生loading - 不要用
picture包裹纯缩略图（除非明确要多格式切换），简单img[srcset]更轻量、解析更快
基本上就这些。
