[发布]temp.im 一个图片占位符服务

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4361 天前的主题，其中的信息可能已经有所发展或是发生改变。

网站：
http://temp.im/
域名含义：I'm temp | 我是临时的(图片)

使用范例：
http://temp.im/123×456

描述：提供用于占位的图片文件在线托管，方便快捷的获得临时占位图片链接

特性：
* 所有图片文件托管在Drop/box上，安全稳定
* 使用Nginx [反//向//代//哩]避免了Drop/box被xx
* 所有图片已经静态生成，无需计算生成时间，快速响应
* 优化了http head，支持 <img alt="" /> 及 CSS background-image:url() 等调用方式
* 支持任意整数尺寸图片调用从 1×1 -> 1024×768
* 无需.png 或 .jpg等后缀，直接调用

制作过程以及在Github 和 Dropbox 的选择遇到的问题感兴趣的可以进一步看博客里写了，欢迎交流：
https://zlz.im/temp-im-placeholder-images-service/

附图：

第 1 条附言 · 2013-01-14 00:37:09 +08:00

更正一下我2L的回复：
Dropbox每日限制流量 20G，参看：
https://www.dropbox.com/help/45/en
这个服务处理图片是考虑这个问题的，所以精简了尺寸，图片都是0.4k->1.4k左右一张，理论是不会超的。

第 2 条附言 · 2013-03-02 20:49:35 +08:00

BTW：
首页所有图片尺寸队列是斐波那契数列哟，完美啊。
1
1
2
3
5
8
13
21
34
55
89
144
233
377

第 3 条附言 · 2014-05-14 12:33:26 +08:00

加入了七牛CDN 的支持，国内分法速度很快。

第 4 条附言 · 2014-06-02 11:09:46 +08:00

更新了字体大小和文件返回类型，七牛CDN已同步。

第 5 条附言 · 2014-06-03 18:34:22 +08:00

补充一下，支持自定义背景色和文字色颜色参数：

http://temp.im/123x456/f2f/fff
http://temp.im/123x456/000000/ff2222

第 6 条附言 · 2014-07-04 10:49:32 +08:00

第 7 条附言 · 2015-12-30 00:20:29 +08:00

号外：现已全面接入七牛 CND 自定义域名，快来体验飞一般的感觉吧。

图片

占位

调用

52 条回复 • 2015-12-30 12:05:35 +08:00

honk

2013-01-13 23:39:19 +08:00 via Android

没有商业支持，又想作为公共服务的话，流量成本会很大。

推荐这个：
http://imsky.github.com/holder/

hzlzh

2013-01-13 23:56:33 +08:00

@honk 不需要商业支持，使用的 Dropbox Public目录+Nginx 反向代理：
* Dropbox 托管免费
* Dropbox 服务器不会挂
* Dropbox 流量无限
唯一浪费就是我一个小号的5G Dropbox 储存空间而已。

NemoAlex

2013-01-14 00:00:24 +08:00

一直在用
http://getimg.in/300x300

huihen

2013-01-14 00:02:33 +08:00

dropbox流量有限制，貌似一天20G？

hzlzh

2013-01-14 00:07:13 +08:00

@honk 补充一下，不单独调用js的好处是，比如做完了Html重构的 demo，可以直接发一个单文件就能给对方预览：[另存为这个文件看看]
https://gist.github.com/4524827

insraq

2013-01-14 00:14:12 +08:00

一直用这个：http://placekitten.com/

hzlzh

2013-01-14 00:15:07 +08:00

@NemoAlex 我为什么不在前端规范中调别人做的那种动态程序生成图片的服务，就是考虑稳定性这个原因，除此之外，要求不高的可以使用这个
http://placehold.us/233x233
--
Try:
http://getimg.in/22%E5%85%882x30
http://getimg.in/22xx30

hzlzh

2013-01-14 00:24:22 +08:00

@huihen 嗯，是的。Dropbox每日限制流量 20G，参看：
https://www.dropbox.com/help/45/en
我处理图片是考虑这个问题了，所以跟精简尺寸，都是0.4k->1.4k左右一张，理论是不会超的。

@insraq
@NemoAlex 其实还有个点，你们不觉得 temp.im 更容易记忆么？lol

honk

2013-01-14 00:27:08 +08:00 via Android

@hzlzh
dropbox public 目录流量是有限制的；

demo 的话，直接放dropbox public, 发url给对方看不是更方便？如果讲到另存的话，js 直接引用线上的，一样可以是单文件；

当然，这些都是开发阶段的个人偏好，自己喜欢就好

hzlzh

2013-01-14 00:33:44 +08:00

@honk
流量的问题看8L回答，

Demo分享的问题就复杂了：
不是每个人都用一样的网盘，而且Dropbox撞墙，对方若访问不了会叫的。demo是给非技术人员看，越优雅越好，弄一些容易复杂化的代码进去，可能会有不好的效果。

个人开发我同意你的，自己开发需要用占位符的话，怎么方便怎么好，但团队间互相传递Demo，比如前端->设计师 | 前端->产品 | 前端->另一个前端，用占位符会好很多。

guozhi

2013-01-14 00:50:55 +08:00

@benzhe img.la

honk

2013-01-14 00:51:10 +08:00 via Android

@hzlzh
可能你没细看我发的那个 repo , 其实除了多引用一个 js 文件外，占位符用法一样，完全可以不用额外写 js 代码。
最大的好处是，它不需要依赖服务端来存储图片，甚至它不会向服务端发请求

hzlzh

2013-01-14 01:13:06 +08:00

@honk 你介绍那个之前我下载下来还看了里面的readme.md，这个占位符的思路和我这个是两种完全不同的想法。
说几个这种offline js处理方法的弊端吧：

* 为了避免404 作者建议使用`data-src`代替`src`
问题：若用js方法做了demo，设计师最终图出来之后我要替换的不只是URL 还要改标签(data-src -> src)。
* 由于基于JS，在没有JS环境时此思路行不通，如：某软件或APP中临时调用一张占位图（我就遇到过iOS 移动嵌入页面时需要占位来查看Retina的适配情况）
* 最后也是最重要的一点：
比如我重构了一个WordPress 主题，当前banner image是预留的高：300px，宽：1024px；仅此一处需要使用一张占位符，为此开销多余的js调用来实现显得不可取。

当然在特定的情况下，这个js的解决方案优势也很明显，就是offline，完全拜托了网络的禁锢。
特别是有的公司或开发环境是内网，无法访问万维网的情况，显得尤为有用，是么？

hzlzh

2013-01-14 01:21:14 +08:00

@honk 突然想到我做这个的初衷，去年的一天，我发了重构稿（当时用的 http://placehold.it/ 服务）给对方，结果对方浏览器中所有的占位图都挂了(后查出是服务器稳定原因)，页面布局失真，自此不再信任个人托管服务器的稳定性。如果当时我使用JS `Holder` 或许不会出错，不过还是不愿意多调用一个额外的js库，习惯问题吧。