UD5工具箱
随机占位图生成器术语表
以下是本工具及占位图设计领域中常见的专业术语解释，帮助您更好地理解和使用各项功能。
占位图（Placeholder Image）
占位图是在网页设计、应用开发或原型制作过程中，用于临时填充图片区域的临时性图像。它通常以简单的色块或带有尺寸标注的形式呈现，目的是在正式设计稿或摄影素材准备完成之前，让团队成员能够直观地查看和验证页面的整体布局结构。占位图的使用可以显著提升设计协作效率，帮助设计师和开发者在项目早期就发现和解决布局问题。
前端生成
前端生成是指所有图片处理和渲染操作都在用户的浏览器端（客户端）完成，而无需将数据发送到远程服务器进行处理。本工具采用 HTML5 Canvas 和 SVG 技术实现纯前端图片生成，这意味着用户的宽高参数、颜色选择和文字内容等数据完全不会离开本地浏览器，有效保障了数据隐私和安全性。同时，前端生成还避免了网络传输延迟，使得图片的生成速度几乎为即时完成。
PNG（Portable Network Graphics）
PNG 是一种无损压缩的位图图片格式，支持透明通道（Alpha Channel）。它在网络设计中应用广泛，特别适合需要透明背景或对画质要求较高的场景。PNG 格式的优点是图片质量无损，缺点是文件体积通常比 JPEG 格式更大。在占位图生成中，选择 PNG 格式可以确保图片在任何背景下都能保持清晰的边缘和准确的颜色表现。
JPEG（Joint Photographic Experts Group）
JPEG 是一种有损压缩的图片格式，通过丢弃部分图像信息来实现较小的文件体积。它广泛应用于照片类型的图片存储和传输。JPEG 格式不支持透明通道，但在相同画质下文件体积通常远小于 PNG。通过调节压缩质量参数（1%-100%），用户可以在图片质量和文件大小之间灵活权衡。在生成占位图时，如果不需要透明背景且希望文件体积较小，JPEG 是一个不错的选择。
WebP
WebP 是 Google 开发的一种现代图片格式，同时支持有损和无损压缩。在相同画质条件下，WebP 的文件体积通常比 JPEG 小 25%-35%，是目前网页图片优化的最佳选择之一。WebP 格式支持透明通道，兼容性方面，所有现代浏览器（Chrome、Firefox、Edge、Safari）均已支持。对于追求网页加载速度和性能优化的开发者来说，WebP 是生成占位图时的首选格式。
SVG（Scalable Vector Graphics）
SVG 是一种基于 XML 的矢量图形格式，与位图格式不同，它通过数学公式描述图形，因此可以无限缩放而不损失任何清晰度。SVG 特别适合图标、Logo、简单图形等场景，也非常适合响应式设计中需要适配多种屏幕尺寸的场景。本工具支持将占位图导出为 SVG 代码，用户可以直接将代码嵌入 HTML 文件中，无需额外的图片文件托管。
Base64 编码
Base64 是一种将二进制数据转换为 ASCII 文本字符串的编码方式。在网页开发中，图片的 Base64 编码可以直接嵌入到 HTML 或 CSS 代码中，而无需引用外部图片文件。这种方式的优点是可以减少 HTTP 请求次数、简化图片部署流程，缺点是编码后的文本体积比原始图片大约增加 33%，且无法被浏览器缓存。本工具提供的"复制 Base64"功能可以一键获取图片的 Base64 编码，方便在快速原型开发中直接使用。
响应式设计（Responsive Design）
响应式设计是一种网页设计方法，通过灵活的布局和媒体查询技术，使网页能够自动适配不同尺寸和分辨率的设备屏幕。在响应式设计中，占位图需要在不同设备尺寸下都能正确显示，因此 SVG 格式或多种预设尺寸的位图占位图都是常用的方案。
颜色选择器（Color Picker）
颜色选择器是一种可视化界面工具，允许用户通过点击色盘、输入十六进制颜色代码或调节 RGB/HSL 参数来精确选择所需的颜色。本工具内置的颜色选择器支持标准的色相环和亮度/饱和度调节面板，方便用户直观地选取和微调颜色。
质量参数（Quality Parameter）
质量参数是 JPEG 和 WebP 等有损压缩格式特有的调节选项，取值范围为 1% 到 100%。它控制着图片压缩过程中保留的细节信息量。较高的质量值意味着更少的压缩损失和更清晰的图片效果，但文件体积也相应更大。合理调节质量参数可以在视觉效果和文件大小之间找到最优平衡点。
十六进制颜色代码（Hex Color Code）
十六进制颜色代码是以 # 号开头的六位十六进制数字，用于精确表示 RGB 颜色值。例如，#FF0000 表示纯红色，#00FF00 表示纯绿色，#0000FF 表示纯蓝色。前两位数字代表红色通道（00-FF），中间两位代表绿色通道，最后两位代表蓝色通道。本工具的颜色选择器支持显示和输入十六进制颜色代码，方便与设计稿中的颜色值精确对应。
像素（Pixel）
像素（Pixel）是数字图像的基本组成单位，是屏幕上能够显示的最小颜色点。图片的宽度和高度以像素为单位来度量，例如 1920×1080 表示图片横向有 1920 个像素，纵向有 1080 个像素，总计约 207 万个像素点。在生成占位图时，宽高参数直接决定了图片的像素尺寸，也影响着图片在屏幕上显示的物理大小。
Alpha 通道（Alpha Channel）
Alpha 通道是图片中用于存储透明度信息的额外通道。每个像素除了 RGB 三个颜色通道外，还可以拥有一个 Alpha 值来表示该像素的透明程度。Alpha 值为 0 表示完全透明，为 255 表示完全不透明。PNG 格式支持 Alpha 通道，因此可以实现半透明效果，这在需要将占位图叠加在其他内容上方时非常有用。