占位图片生成器
新创建自定义尺寸的占位图片，可设置颜色与标签文字。
600 × 400 px · SVG stays sharp at any size; PNG & WebP keep transparency, JPG does not.
Runs entirely in your browser. Nothing is uploaded.
几秒钟生成占位图片
这款占位图片生成器可在浏览器中本地生成用于原型图、线框图和前端开发的自定义虚拟图片。设置宽度和高度，选择背景色和文字颜色，添加可选标签，即可得到一张干净的占位图片——可直接下载或粘贴到代码中。
与在服务器上渲染图片的托管服务（如placehold.co、dummyimage.com、via.placeholder.com）不同，这里的每张图片都通过SVG和HTML Canvas API在本地生成。这使其即时、私密、免费，且可离线使用——无需网络请求，无速率限制，任何内容也不会上传到任何服务器。
分步指南：如何创建自定义占位图片
创建占位图片只需10秒以内：1) 输入宽度和高度（像素），或选择尺寸预设（OG图片1200×630、Instagram方图1080×1080、视频缩略图1280×720、头像256×256）。2) 使用颜色选择器选择背景色，或选择调色板预设（如"灰色"经典占位效果）。3) 可选填写自定义文字——若留空，图片将自动显示其尺寸。4) 选择导出格式：SVG适合网页用途（体积最小、最清晰），PNG适合带透明度的栅格文件，JPG或WebP适合照片兼容格式。5) 点击"下载"保存文件，或切换到"代码"标签页复制data URI、<img>标签，或CSS背景样式，可直接粘贴到项目中。
SVG、PNG、JPG还是WebP——如何选择正确格式
对于带标签的纯色矩形，SVG通常是最佳选择：仅需几百字节，任意分辨率下都清晰锐利，且可作为data URI内嵌。这是本工具的默认格式，比大多数占位工具仅支持PNG的输出更胜一筹。SVG data URI在所有现代浏览器和邮件客户端中均可正常使用。
需要栅格文件？可导出PNG（支持完整透明度）、JPG（兼容性最广）或WebP（栅格格式中体积最小）。无论选择哪种格式，实时预览都会在保存前准确显示最终效果——打开文件时不会有任何意外。
为何优于placehold.co等托管服务
placehold.co、dummyimage.com和via.placeholder.com等服务提供的URL需要连接其服务器渲染图片。这会产生依赖风险：如果服务宕机、触发速率限制或被内容安全策略拦截，原型图就会崩溃。此外，这些服务会追踪哪些页面请求了其图片，为内部原型带来隐私隐患。
本工具提供更便携的方案：可生成自包含的data URI，可嵌入<img src>或CSS的url()中，也可提供原始SVG标记、含匹配尺寸的即用<img>代码片段或CSS背景样式。由于图片已内嵌，无需额外上传文件，不存在服务宕机导致的断链风险，也不会被第三方追踪使用情况。复制、粘贴，完成。
社交媒体、广告、头像和缩略图预设
需要构建包含多个图片插槽的布局？预设尺寸涵盖了最常用的格式——社交/OG图片（1200×630）、广告单元（728×90、300×250）、方形帖子（1080×1080）、快拍（1080×1920）、横幅、产品图、书籍封面和视频缩略图（1280×720）。将占位图尺寸与实际插槽匹配，可保持布局稳定，避免影响核心网页指标（CWV）评分的累积布局偏移（CLS）。
宽高比预设（1:1、4:3、16:9、9:16等）搭配可选的比例锁定，支持在缩放时保持比例。开启锁定后，修改一个尺寸，另一个会自动调整——非常适合设计响应式图片网格，确保每张卡片无论容器宽度如何都保持相同比例。
私密、即时、免费——支持所有设备
无需注册账户，无水印，创建图片数量无限制。每张占位图片均在本地设备上生成，对于处理机密设计或内部原型的设计师和开发者来说，这是一款快速、注重隐私的工具。支持Windows、Mac、Linux、iPhone、iPad和Android——在任何现代浏览器中打开即可立即使用。
页面加载后，该工具甚至可以离线使用。将其加入书签，原型图需要占位图片时随时生成——无需搜索占位服务网址，无需担心速率限制，也无需登录账户。您的设计始终属于您自己。
Frequently asked questions
什么是占位图片？
占位图片是在最终照片或美术资源尚未就绪时使用的临时替代图形。通常是一个与所填充插槽像素尺寸完全相同的纯色矩形，常标注其尺寸——例如标有"600 × 400"字样的灰色方框。设计师和开发者将其放入原型图、线框图和交互原型中，使布局在真实图片到来之前显得完整。它也被称为虚拟图片、图片占位符或模拟图片。
如何在HTML中添加占位图片？
将<img>标签指向该图片即可。最便于自包含的方式是data URI，无需托管独立文件：<img src="data:image/svg+xml,…" width="600" height="400" alt="占位图片">。点击此处的"<img>"标签页并复制，完整标签——含data URI及已填入的宽高属性——即存入剪贴板，可直接粘贴使用。您也可以保存下载的文件并正常引用，例如<img src="/img/placeholder-600x400.png">。
这是placehold.co的替代工具吗？
是的——而且更注重隐私保护。placehold.co、via.placeholder.com和dummyimage.com均从其服务器提供图片，这会产生额外的网络请求、可能触发速率限制，并意味着这些服务会追踪哪些页面使用了其图片。UtiloKit完全在浏览器中生成占位图片，任何请求都不会离开您的设备。您可以获得可下载的文件或自包含的data URI，可离线使用，且不会因外部服务宕机而失效。
占位图片有哪些用途？
占位图片用于网站和应用原型图、线框图、邮件模板、设计交接以及前端开发（当真实素材尚在制作中时）。它们预留了精确的布局空间（防止布局偏移/CLS），有助于测试响应式断点，并为CMS模板和组件库填充演示内容。开发过程中，一张1280×720的方框可替代网格中的所有视频缩略图，让整个团队在等待正式素材之前即可审查布局。
占位图片应该是什么尺寸？
应与所填充插槽的精确像素尺寸匹配，这样真实图片加载时布局不会发生偏移。常用目标尺寸：社交/OG分享图1200×630、Instagram方图1080×1080、视频缩略图1280×720、头像256×256、全宽主图横幅1920×1080、排行榜广告728×90。使用本工具的尺寸和宽高比预设，一键即可完成设置，也可输入任意宽高（最大4000像素）。
如何创建带自定义文字的占位图片？
在"文字"输入框中输入标签——例如"主图"、"头像"或"广告位300×250"。若留空，图片会自动标注其尺寸（如"600 × 400"）。您还可以设置文字颜色和字号，使原型中的插槽清楚地说明其用途。在设计评审时，当客户需要在看到最终素材之前了解每个图片区域的含义，这一功能尤为实用。
占位图片应选择哪种格式——SVG、PNG、JPG还是WebP？
对于带文字的纯色方框，SVG通常是最佳选择：仅几百字节，任意尺寸下均清晰锐利，且可作为data URI整洁嵌入——非常适合网页开发。需要栅格文件时选PNG，需要支持透明度时也选PNG；某些工具要求照片格式时选JPG；追求最小栅格文件体积时选WebP。本工具支持导出以上四种格式，默认为SVG，因为它对网页开发工作流最为实用。
本工具与Lorem Picsum有何不同？
Lorem Picsum（picsum.photos）提供随机真实照片，适合需要逼真图像效果的场景，但每次加载都是从第三方服务器拉取的不同图片。本工具生成的是确定性纯色方框，尺寸、颜色和标签完全由您指定——可预期、体积小，且在浏览器中离线生成，不会上传任何内容，每次加载结果也不会改变。需要逼真的照片原型时使用Picsum，需要简洁、可控的布局占位符时使用本工具。
如何获取占位图片的URL？
placehold.co等托管服务提供类似placehold.co/600x400的URL，因为服务器会在每次请求时渲染图片。本工具完全在浏览器中运行，无服务器支持，因此不提供外链URL，而是生成自包含的data URI——可粘贴到任何需要URL的地方（<img>的src属性、CSS的url()函数），并提供可下载的SVG、PNG、JPG或WebP文件。无需网络请求，无速率限制，离线也能正常使用。
如何制作灰色占位方框？
将背景色设置为浅灰色（如#e2e8f0），文字色设置为中灰色（如#475569）——这就是熟悉的中性占位外观。选择"灰色"调色板预设可一次性应用这两种颜色，选择尺寸后下载即可。灰色传达"有意留空"的信息，使占位图在评审过程中不会与周围设计产生视觉竞争。这是Figma、Sketch及大多数设计系统中占位插槽所采用的标准惯例。
可以在手机上使用吗——iPhone或Android均可？
完全可以。该工具可在任何现代浏览器中运行，包括iPhone上的Safari和Android上的Chrome。设置尺寸、选择颜色、添加文字，然后直接在手机上下载或复制data URI。在设备上查看响应式布局、需要快速填充图片插槽以截图或交接设计时，这一功能尤为方便。无需安装任何应用——只需在手机浏览器中打开页面即可。
如何为特定宽高比制作占位图片？
选择宽高比预设（1:1、4:3、3:2、16:9、2:1或9:16），高度会根据您的宽度自动更新——输入宽度1280并选择16:9，即可得到1280×720。开启"锁定宽高比"，在缩放任意一个尺寸时保持该比例。这对于需要在各断点保持固定比例的响应式图片插槽，或设计每张图片缩略图需保持相同比例的卡片网格时非常实用。
占位图片完全免费且无限制吗？
是的——每张图片均免费，无需注册、无水印、无账户，使用次数无限制。与一些限制免费用户每日下载次数或要求邮箱注册的在线图片工具不同，本工具无任何限制。这是placehold.co、dummyimage.com和via.placeholder.com的注重隐私的替代方案：无需连接其服务器，您在本地生成图片，完全拥有该文件或data URI，不依赖任何第三方服务的可用性。
