Placy 线上佔位图产生器，製作特定尺寸範例图三种格式下载

在开发网站、测试网页模版设计时经常会需要用到佔位图（Placeholder），这是什么呢？简单来说就是示例图片，用于填充一些可能要预留、之后显示图片的位置，既然是佔位图片就要符合几个要件，像是快速设定要产生特定尺寸大小、可以快速取用（甚至不用下载图片、直接给使用者图片链结），或是在图片上方会清楚标示出这张佔位图的尺寸，对于开发来说就会更方便更省时间。

之前介绍过的佔位图片产生器：

• Dummy Image 假图产生器，以网址快速载入各种尺寸颜色图片
• Placemat 漂亮的佔位图片产生器，开发网页快速嵌入特定尺寸示例图片
• Fake images please? 快速产生特定大小的示例图片

本文要推荐的「Placy」是一个免费在线佔位图产生器，开启网页即可产生特定尺寸示例图，透过网站工具列调整图片的宽度、高度、背景色，亦可在图片加入文字，调整字型、文字大小、字重和文字颜色选项，最后产生 PNG、JPG 和 SVG 三种格式。

值得一提的是 Placy 会提供使用 Data URI 经过 Base64 编码的格式，只要复制 HTML 程序码就能在特定位置快速载入某张佔位图片。

Placy
https://placy.org/

使用教程

STEP 1

开启 Placy 网站会看到一张佔位图片示例，图片上会显示尺寸大小。

STEP 2

透过右侧选项列调整 Placeholder 宽度、高度和背景色，如果不需要图片文字也可选择隐藏，文字部分是自行填入要显示的内容，也能调整字型、文字大小、字重和文字颜色。

STEP 3

设定后会即时在网站中间更新、显示新的预览图。

STEP 4

点击下方的「Get Placeholder」选择要下载 PNG、JPG 或 SVG 格式，如果想要使用在网页设计，也能获取经过 Base64 编码的程序码，只要将程序码复制、贴上即可在特定位置显示佔位图。

值得一试的三个理由：

1. 依照需求产生特定尺寸（宽度、高度、颜色）佔位图片
2. 设定图片上显示的文字内容，调整字型、文字大小和颜色
3. 产生 PNG、JPG 和 SVG 三种图片格式