UD5工具箱
srcset
定义：HTML img 元素的一个属性，允许开发者指定一组候选图片及其对应的宽度描述符（如 480w、800w）。浏览器会根据当前视口宽度、像素密度和 sizes 属性，自动选择最合适的图片加载。
与工具关系：本工具的核心功能就是自动生成 srcset 属性值，用户无需手动计算各宽度的图片 URL。
sizes
定义：HTML img 元素的属性，告诉浏览器图片在不同视口宽度下的实际显示尺寸（以 CSS 像素为单位）。浏览器结合 sizes 和 srcset 来决定加载哪张图片。例如 sizes="(max-width: 768px) 100vw, 50vw" 表示小屏全宽显示，大屏半宽显示。
与工具关系：工具提供四种预设布局方案和自定义 sizes 表达式输入，自动计算最优的 sizes 值。
响应式断点
定义：视口宽度的特定阈值，当浏览器窗口宽度跨越这些阈值时，页面布局和图片尺寸会发生变化。常见的断点值如 576px（手机横屏）、768px（平板竖屏）、992px（平板横屏/小桌面）、1200px（桌面）等。
与工具关系：用户在工具中选择或自定义断点列表，工具会为每个断点生成对应的图片 URL 和尺寸参数。
像素密度（DPI）
定义：屏幕每英寸的像素数量。标准屏幕为 1x（96 DPI），Retina 高清屏为 2x（192 DPI），超高分辨率屏幕为 3x（288 DPI）。高密度屏幕需要用更大分辨率的图片才能呈现清晰的效果。
与工具关系：选择 2x 或 3x 密度后，工具会为每个断点生成对应倍率的图片 URL，确保高 DPI 屏幕上的清晰度。
picture 元素
定义：HTML5 引入的 picture 元素，提供比 img srcset 更强大的响应式图片控制能力。它允许开发者为不同视口宽度或图片格式偏好指定不同的 source 元素，实现更精细的图片加载策略。
与工具关系：工具支持生成 picture 元素格式的代码，适合需要按格式（如 WebP vs JPEG）区分加载的场景。
宽度描述符（w descriptor）
定义：srcset 属性中每个 URL 后面的数值标记，如 480w 表示该图片的固有宽度为 480 像素。浏览器利用宽度描述符来计算图片的像素密度，从而选择最优的图片资源。
与工具关系：工具在生成 srcset 时自动为每个 URL 附带正确的 w 描述符，用户无需手动标注。
视口（Viewport）
定义：浏览器窗口中用于显示网页内容的区域，不包括地址栏、标签栏等浏览器 UI 部分。在移动端，视口宽度通常为 320px 到 428px；在桌面端，视口宽度通常为 1024px 到 2560px。
与工具关系：断点配置基于视口宽度，工具根据用户设置的断点值为不同视口宽度范围生成对应的图片尺寸。
Retina 显示
定义：Apple 推广的高分辨率屏幕技术，使用 2 倍或更高密度的像素阵列。在 Retina 屏幕上，标准分辨率的图片会显得模糊，需要用 2 倍或 3 倍分辨率的图片才能呈现清晰效果。
与工具关系：工具的像素密度设置专门针对 Retina 屏幕优化，确保生成的 srcset 包含高清版本的图片 URL。
图片 CDN
定义：专门用于存储、处理和分发图片内容的 CDN 服务。常见的图片 CDN（如 Cloudinary、Imgix、imgproxy）支持通过 URL 参数实时调整图片尺寸、格式和质量，无需预先生成多个版本。
与工具关系：工具支持配置 CDN 来源，生成的 URL 可以直接用于 CDN 的图片变换功能，实现按需缩放。
图片格式协商
定义：浏览器通过 Accept 头告知服务器支持的图片格式（如 WebP、AVIF），服务器据此返回最优格式。现代浏览器普遍支持 WebP，部分已支持 AVIF，这些格式比 JPEG 小 25% 到 50% 且质量更高。
与工具关系：工具的 picture 元素输出支持按格式分组的 source 元素，方便开发者配置 WebP/AVIF 回退方案。