[发布]temp.im 一个图片占位符服务 - V2EX
爱意满满的作品展示区。
hzlzh
63.67D

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

  •  3
     
  •   hzlzh
    PRO
    hzlzh Jan 13, 2013 16439 views
    This topic created in 4867 days ago, the information mentioned may be changed or developed.
    网站:
    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/

    附图:
    Supplement 1    Jan 14, 2013
    更正一下我2L的回复:
    Dropbox每日限制流量 20G,参看:
    https://www.dropbox.com/help/45/en
    这个服务处理图片是考虑这个问题的,所以精简了尺寸,图片都是0.4k->1.4k左右一张,理论是不会超的。
    Supplement 2    Mar 2, 2013
    BTW:
    首页所有图片尺寸队列是斐波那契数列哟,完美啊。
    1
    1
    2
    3
    5
    8
    13
    21
    34
    55
    89
    144
    233
    377
    Supplement 3    May 14, 2014
    加入了 七牛CDN 的支持,国内分法速度很快。
    Supplement 4    Jun 2, 2014
    更新了字体大小和文件返回类型,七牛CDN已同步。
    Supplement 5    Jun 3, 2014
    补充一下,支持自定义 背景色和文字色 颜色参数:

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

    Supplement 6    Jul 4, 2014
    Supplement 7    Dec 30, 2015
    号外:现已全面接入 七牛 CND 自定义域名,快来体验飞一般的感觉吧。

    52 replies    2015-12-30 12:05:35 +08:00
    honk
        1
    honk  
       Jan 13, 2013 via Android   1
    没有商业支持,又想作为公共服务的话,流量成本会很大。

    推荐这个:
    http://imsky.github.com/holder/
    hzlzh
        2
    hzlzh  
    OP
    PRO
       Jan 13, 2013
    @honk 不需要商业支持,使用的 Dropbox Public目录+Nginx 反向代理:
    * Dropbox 托管免费
    * Dropbox 服务器不会挂
    * Dropbox 流量无限
    唯一浪费就是我一个小号的5G Dropbox 储存空间而已。
    NemoAlex
        3
    NemoAlex  
       Jan 14, 2013
    huihen
        4
    huihen  
       Jan 14, 2013
    dropbox流量有限制,貌似一天20G?
    hzlzh
        5
    hzlzh  
    OP
    PRO
       Jan 14, 2013
    @honk 补充一下,不单独调用js的好处是,比如做完了Html重构 的 demo,可以直接发一个单文件就能给对方预览:[另存为这个文件看看]
    https://gist.github.com/4524827
    insraq
        6
    insraq  
       Jan 14, 2013
    一直用这个:http://placekitten.com/
    hzlzh
        7
    hzlzh  
    OP
    PRO
       Jan 14, 2013
    @NemoAlex 我为什么不在前端规范中调别人做的那种动态程序生成图片的服务,就是考虑稳定性这个原因,除此之外,要求不高的可以使用这个
    http://placehold.us/233x233
    --
    Try:
    http://getimg.in/22%E%85%882x30
    http://getimg.in/22xx30
    hzlzh
        8
    hzlzh  
    OP
    PRO
       Jan 14, 2013
    @huihen 嗯,是的。Dropbox每日限制流量 20G,参看:
    https://www.dropbox.com/help/45/en
    我处理图片是考虑这个问题了,所以跟精简尺寸,都是0.4k->1.4k左右一张,理论是不会超的。

    @insraq
    @NemoAlex 其实还有个点,你们不觉得 temp.im 更容易记忆么?lol
    honk
        9
    honk  
       Jan 14, 2013 via Android
    @hzlzh
    dropbox public 目录流量是有限制的;

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

    当然,这些都是开发阶段的个人偏好,自己喜欢就好
    hzlzh
        10
    hzlzh  
    OP
    PRO
       Jan 14, 2013
    @honk
    流量的问题看8L回答,

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

    个人开发我同意你的,自己开发需要用占位符的话,怎么方便怎么好,但团队间互相传递Demo,比如前端->设计师 | 前端->产品 | 前端->另一个前端,用占位符会好很多。
    guozhi
        11
    guozhi  
       Jan 14, 2013
    honk
        12
    honk  
       Jan 14, 2013 via Android
    @hzlzh
    可能你没细看我发的那个 repo , 其实除了多引用一个 js 文件外,占位符用法一样,完全可以不用额外写 js 代码。
    最大的好处是,它不需要依赖服务端来存储图片,甚至它不会向服务端发请求
    hzlzh
        13
    hzlzh  
    OP
    PRO
       Jan 14, 2013
    @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
        14
    hzlzh  
    OP
    PRO
       Jan 14, 2013
    @honk 突然想到我做这个的初衷,去年的一天,我发了重构稿(当时用的 http://placehold.it/ 服务)给对方,结果对方浏览器中所有的占位图都挂了(后查出是服务器稳定原因),页面布局失真,自此不再信任个人托管服务器的稳定性。如果当时我使用JS `Holder` 或许不会出错,不过还是不愿意多调用一个额外的js库,习惯问题吧。
    darcy
        15
    darcy  
       Jan 14, 2013   1
    @hzlzh 插入的GA代码多了几个空格
    kofj
        16
    kofj  
       Jan 14, 2013   1
    hzlzh
        17
    hzlzh  
    OP
    PRO
       Jan 26, 2013 via iPhone
    @darcy 我是故意的,你信么?lol不用统计更快
    qiuai
        18
    qiuai  
    PRO
       Jan 26, 2013
    手上有个 imgs.in 做个啥好呢......
    qiuai
        19
    qiuai  
    PRO
       Jan 26, 2013
    好吧.域名掉了.....
    hzlzh
        20
    hzlzh  
    OP
    PRO
       Jan 26, 2013
    @qiuai 做个图片图片流站?
    qiuai
        21
    qiuai  
    PRO
       Jan 26, 2013
    @hzlzh 刚发现域名掉了.唉.算了.反正暂时也没有图片站这一块的需求
    hzlzh
        22
    hzlzh  
    OP
    PRO
       Jan 27, 2013
    这里文中的链接中字母”x“ 被替换成了utf-8字符”ד
    如下:
    http://temp.im/123x456
    http://temp.im/123%C3%97456

    造成了部分用户撞到404页面,请 @Livid 帮修改下那个字母,不知道什么导致的,是不是[bug]?
    m
        23
    m  
       Jan 27, 2013
    @hzlzh 我想知道"图片占位符服务"是干啥用的?当网站默认图片的背景?用这个图片设置长宽然后控制间距?
    gucheen
        24
    gucheen  
       Jan 27, 2013
    @m 有一些没有确定具体图片但是确实有这么一张图片的时候,就会用到了
    hzlzh
        25
    hzlzh  
    OP
    PRO
       Jan 27, 2013
    @m 正如 @gucheen 所说
    isayr
        26
    isayr  
       Jan 27, 2013
    打开下载一个bin文件怎么回事
    gucheen
        27
    gucheen  
       Jan 27, 2013
    @isayr 请在网页中使用,不要直接打开,另外记得加http,我测试了一下。不加貌似不行
    hzlzh
        28
    hzlzh  
    OP
    PRO
       Jan 27, 2013
    @gucheen
    @isayr 由于是用于 <img src=""> 以及 background-img:url(),没有直接浏览的需要,我强制了http头返回的是下载内容。
    run2
        29
    run2  
       Jan 27, 2013
    Bootstrap 现在用的placeholder.js 很帅
    rannnn
        30
    rannnn  
       May 14, 2014
    Showfom
        31
    Showfom  
    PRO
       May 14, 2014
    @m 你这个 ID 卖吗?
    hzlzh
        32
    hzlzh  
    OP
    PRO
       May 14, 2014
    @rannnn placehold.it有限制 还弹验证码,无法容忍
    MaiCong
        33
    MaiCong  
       Jun 2, 2014 via iPhone
    留名收藏。这类工具一直在用。
    inee
        34
    inee  
       Jun 2, 2014 via Android
    太棒!
    XadillaX
        35
    XadillaX  
       Jun 2, 2014   1
    @hzlzh 你也可以直接调用它:

    <script src="http://imsky.github.io/holder/holder.js"></script>
    hzlzh
        36
    hzlzh  
    OP
    PRO
       Jun 2, 2014
    @XadillaX 额外载入一个js是不是略显不优雅,大多数时候仅仅是想要一张图占位吧。
    XadillaX
        37
    XadillaX  
       Jun 3, 2014
    @hzlzh 用额外的服务主要是怕指不定哪天就挂掉了你懂的 0. 0
    emric
        38
    emric  
       Jun 3, 2014
    颜色选项, 也是应该很重要的参数.
    例如两张图片折叠起来就看不见边缘了.
    hzlzh
        39
    hzlzh  
    OP
    PRO
       Jun 3, 2014
    @emric 是不是这样?我去加到demo里,实际上是支持 背景和文字颜色自定义的
    http://temp.im/123x456/f2f/fff
    shiny
        40
    shiny  
    PRO
       Jun 3, 2014
    我们都是用一像素的图片强制定宽高来实现 placeholder
    emric
        41
    emric  
       Jun 3, 2014   1
    @hzlzh 之前没有把这个写上去, 现在清晰多了.
    好像今晚加载有时候会出现问题.
    hzlzh
        42
    hzlzh  
    OP
    PRO
       Jun 3, 2014   1
    @emric 是的晚上我在更新demo,现在好了,取的 iOS 7 色盘。
    tammy
        43
    tammy  
       Jun 3, 2014
    一直http://fakeimg.pl/
    emric
        44
    emric  
       Jun 3, 2014
    @hzlzh 文字有些时候并不会居中.
    例如这张: http://placeholder.qiniudn.com/100x50
    hzlzh
        45
    hzlzh  
    OP
    PRO
       Jul 4, 2014
    @emric 图片宽度不够情况下,字体导致的。
    Mutoo
        46
    Mutoo  
       Jul 4, 2014
    图片点位符具体有啥应用?好处?
    stonestyle
        48
    stonestyle  
       Jul 4, 2014
    Showfom
        50
    Showfom  
    PRO
       Dec 30, 2015
    @ximan ?#.jpg
    50vip
        51
    50vip  
       Dec 30, 2015
    zgk
        52
    zgk  
       Dec 30, 2015 via Android   1

    看到这图想起了 agar.io 这个游戏
    About     Help     Advertise     Blog     API     FAQ     Solana     3292 Online   Highest 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 151ms UTC 11:53 PVG 19:53 LAX 04:53 JFK 07:53
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86