UD5工具箱
占位图（Placeholder Image）
定义
占位图是在网页或应用开发过程中，用于临时占据图片位置的图像。当最终图片资源尚未准备好时，占位图帮助开发者预览布局效果、测试响应式设计、验证图片加载逻辑。
与本工具的关系
本工具的核心功能就是生成这种临时占位图，让开发者无需依赖外部服务即可在本地快速创建各种规格的占位图。
HTML5 Canvas API
定义
HTML5 Canvas API是浏览器提供的绘图接口，允许通过JavaScript在网页上动态绘制图形、图像和文字。它支持2D和3D渲染，是现代Web应用中实现复杂视觉效果的核心技术之一。
与本工具的关系
本工具使用Canvas API在浏览器端实时渲染占位图，包括绘制背景色块、文字内容等，所有操作均在客户端完成，无需服务器参与。
SVG（可缩放矢量图形）
定义
SVG是一种基于XML的矢量图像格式，使用数学方程而非像素点来描述图形。这使得SVG图像可以无限缩放而不失真，文件体积通常非常小，且支持CSS样式和JavaScript交互。
与本工具的关系
本工具支持将占位图导出为SVG格式，适合需要在不同分辨率下清晰显示的场景，如响应式网页设计和高DPI屏幕适配。
无损压缩（Lossless Compression）
定义
无损压缩是一种数据压缩方式，压缩后的数据可以完全还原为原始数据，不会丢失任何信息。PNG格式就采用无损压缩算法，适合保存需要精确还原的图像内容。
与本工具的关系
本工具推荐使用PNG格式输出占位图，正是因为其无损压缩特性可以确保文字清晰锐利，不会出现JPEG常见的压缩伪影。
有损压缩（Lossy Compression）
定义
有损压缩通过丢弃部分人眼不敏感的数据来大幅减小文件体积。JPEG格式采用有损压缩，通过质量参数控制压缩程度，在文件大小和图像质量之间取得平衡。
与本工具的关系
本工具的JPEG输出模式支持质量滑块调节（0-1），用户可以根据对文件大小和图像质量的需求灵活调整压缩比。
WebP格式
定义
WebP是Google开发的现代图像格式，同时支持有损和无损压缩。它在相同质量下比JPEG和PNG格式体积更小（通常减小25%-35%），已被主流浏览器广泛支持。
与本工具的关系
本工具支持WebP格式输出，适合对页面加载性能有较高要求的项目，可以在保证视觉效果的同时减少传输数据量。
响应式设计（Responsive Design）
定义
响应式设计是一种网页设计方法，使页面能够根据不同设备的屏幕尺寸和分辨率自动调整布局和内容显示方式，确保在桌面、平板和手机等设备上都有良好的用户体验。
与本工具的关系
本工具提供多种预设尺寸（包括移动端尺寸320x480、375x667），方便开发者测试页面在不同屏幕尺寸下的响应式布局效果。
像素密度（DPI/PPI）
定义
DPI（每英寸点数）和PPI（每英寸像素数）是衡量显示设备像素密度的指标。高DPI屏幕（如Retina显示屏）在相同物理尺寸下包含更多像素，需要更高分辨率的图片才能清晰显示。
与本工具的关系
本工具支持自定义任意像素尺寸，开发者可以生成适合高DPI屏幕的大尺寸占位图（如1920x1080），确保在高分辨率设备上测试时的视觉效果。
原型设计（Prototype Design）
定义
原型设计是在产品开发初期创建的交互式模型，用于展示产品的基本功能和用户界面布局。原型帮助团队在投入大量开发资源之前验证设计方案的可行性。
与本工具的关系
占位图是原型设计中的重要元素，本工具帮助设计师快速生成各种尺寸的占位图来填充原型中的图片区域，使原型更加真实和完整。
客户端渲染（Client-Side Rendering）
定义
客户端渲染是指在用户的浏览器或设备上完成页面内容的生成和渲染，而非在服务器端完成后发送给客户端。这种方式可以减少服务器负载，并保护用户数据隐私。
与本工具的关系
本工具采用纯客户端渲染架构，所有占位图生成逻辑在浏览器本地执行，图片数据不离开用户设备，从根本上保障了数据安全和用户隐私。
剪贴板API（Clipboard API）
定义
剪贴板API是浏览器提供的JavaScript接口，允许网页程序读取和写入系统剪贴板的内容，支持文本、图片等多种数据类型的复制和粘贴操作。
与本工具的关系
本工具利用剪贴板API实现「复制到剪贴板」功能，用户可以一键将生成的占位图复制到系统剪贴板，然后粘贴到设计工具、文档或即时通讯软件中使用。