在开发网站、测试网页模版设计时经常会需要用到占位图(Placeholder),这是什么呢? 简单来说就是范例图片,用于填充一些可能要预留、之后显示图片的位置,既然是占位图片就要符合几个要件,像是快速设定要产生特定尺寸大小、可以快速取用(甚至不用下载图片、直接给用户图片链接),或是在图片上方会清楚标示出这张占位图的尺寸,对于开发来说就会更方便更省时间。
Placy
本文要推荐的「Placy」是一个免费在线占位图生成器,开启网页即可产生特定尺寸范例图,透过网站工具栏调整图片的宽度、高度、背景色,亦可在图片加入文字,调整字型、文字大小、字重和文字颜色选项,最后生成 PNG、JPG 和 SVG 三种格式。
值得一提的是 Placy 会提供使用 Data URI 经过 Base64 编码的格式,只要复制 HTML 代码就能在特定位置快速加载某张占位图片。
Placy
https://placy.org/
值得一试的三个理由:
- 依照需求产生特定尺寸(宽度、高度、颜色)占位图片
- 设定图片上显示的文字内容,调整字体、文字大小和颜色
- 产生 PNG、JPG 和 SVG 三种图片格式