网页占位图服务推荐

星期六 2016/08/06 0:00 阅读：34284 评论：4 作者：ivan 分类：Web前端、图片、插件工具

前言

在网站开发初期，做重构的过程中，经常要展示一些网站内容相关的不固定图片，如Banner图、产品图，这时候从设计稿中切图下来放上去会比较繁琐。常用的技巧是使用占位图。

占位图片即通过指定宽高或文字动态生成指定尺寸的图片。有很多提供类似服务的网站，接下来一一推荐。

纯色类

temp.im

简介：im temp placeholder images, feel free to use it anywhere. (with https supported)。

temp.im占位图片，可以在任何地方免费使用，支持HTTPS。

特点：支持定义尺寸、颜色。使用七牛CDN服务，访问超快，推荐使用，微信UI工程师@hzlzh 作品。

使用：

placehold.it

简介：A quick and simple image placeholder service. 一个快速和简单的占位图像服务。

特点：支持定制尺寸、颜色、文字、格式，支持HTTPS，老款占位图服务。

使用：

Fake images please

简介：Fakeimg.pl is a little tool that generates images with an URL. Choose the size, the colors, even the text. It’s free and open-source.

特点：支持自定义尺寸、颜色、文字、字体。

使用：

placeholder.cn

简介：Just put your image size after our URL and you’ll get a placeholder.

特点：

使用：

ImgServ

简介：一个简单快速生成占位图片的服务。

特点：支持自定义尺寸、背景颜色、字体颜色、文案

使用：

fpoimg.com

简介：FPO means For Placement Only and is commonly used for providing a placeholder image where actual content will reside in a publication, website, or similar.

特点：支持定义尺寸、文案、背景字体色，还有可视化工具实时编辑预览图片，如制作手机端banner。工具：http://fpoimg.com/generator

使用：

Dynamic Dummy Image Generator

简介：Dynamic Dummy Image Generator

特点：支持自定义尺寸、颜色、文案。支持关键字设置尺寸，如指定屏幕分辨率、视频格式、banner尺寸、按钮尺寸等。

使用：

图片素材类

unsplash.it

简介：Beautiful placeholders using images from unsplash.

特点：非纯色图，支持获取随机图、灰度图、固定图、模糊图等，提供json图片列表接口。

使用：

placekitten

简介：A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you’ll get a placeholder.

特点：图片素材均是萌喵︿(￣︶￣)︿支持定义尺寸、灰度图

使用：

http://placekitten.com/200/300

http://placekitten.com/g/200/300

placebeard.it

简介：Tired of everything being so cute and adorable? Enter placebeard.it. This site is yet another place holder image site.

特点：素材主题为胡须，各类胡子哥~~~^_^~~~ 支持定义尺寸、灰度图。还有个关于熊素材的网站（https://placebear.com/）。

使用：

简介：Placeholder Images for every case. Webdesign or Print. It’s simple and absolutely free! Just put the custom url in your code like this:
<img src=”http://lorempixel.com/400/200″ />
to get your FPO / dummy image.

特点：非纯色图，图片种类丰富，免费简单。

使用：

工具类

griddle.it

简介：A clean and simple way to align your website layout. No complex grid frameworks necessary.

特点：用于帮助调整网站布局，设置图片尺寸、列数、间距后，将图片设置为背景，非常方便。

使用：

取消回复

文章评论 4 条

夕文艺园

，亮哥，问下，像京东淘宝那些还没加载出来的区块，不是img，这个是怎么搞的？类似懒加载div区块内容不止是img

2016 年 12 月 6 日下午 3:28
- 轩枫
  
  就滚动加载内容嘛，本来一个个空div，再获取填充就好
  
  2016 年 12 月 6 日下午 3:36
  - 夕文艺园
    
    这个知道，情况是我是想把内容放在textarea里面，滚动到textarea相应位置时加载内容进来，问题是我不知加载内容的高度情况下想使用个占位图占位，同时左边有个导航栏对应滚动到内容位置，类似京东商城，但他前提是知道外面内容的高度，~~~~(>_<)~~~~
    
    2016 年 12 月 6 日下午 3:50
夕文艺园

很不错，

2016 年 8 月 6 日下午 12:07