Pictures of kittens for use as placeholders in your designs or code | Hacker News Reader

Pictures of kittens for use as placeholders in your designs or code

placekitten.com

569 pointsthehodge116 comments

Mark here, I threw placekitten.com together this weekend after a journey on a train in which I could not access placehold.it and few weeks of jokes about the concept with colleagues.

I was not planning on posting to HN, as I thought that a kitten-meme related site might not be the most appropriate (looks like the wisdom of the crowd has decided otherwise).

I can't claim that the server will stand up, so I would refrain from using the site for anything critical (not sure why you would need/want to), or that caching is entirely correct (I'm sending far-future expires, but I'm sure that I could improve given some time).

Glad that the internet likes kittens though. Confirmed a suspicion I had.

Is a followup to Silk next, with 1,000 strokably-soft kittens?

(I'm kidding. I love Silk, thanks for making it.)

It also appears that I should have taken that extra couple of hours to host the site somewhere other than a small mediatemple server, you're all hitting HTTP client limits at the moment.

If you could somehow gather all the lolcat meme texts together to use as an alternative to Lorem Ipsum, that would be hilarious!

Awesome work, and I love your icons too dude.

Just wanted to say: thanks for prettifying up the web with your Silk icons!

Thanks, it's really cute.

Any way we can have puppies?

Wondering where you got all the pictures from? Is this a gray area of copyright? I'm asking because I've tried to source large amount of pictures in the past will little luck.

http://placekitten.com/attribution.html

AAAAAHHHHHHH there's pictures of kittens at the top of HackerNews!

If ever there was proof needed to show just how far HN has fallen...

Perhaps time for me to move on.

I know it's easy to be negative about kittens because of the whole lol cats thing, but a service which provides free, sizable, placeholder images that are more than just gray boxes is actually pretty useful. Remember the days when people used to use "blah blah blah" for all of their text before the copy was in? Now we use Lorem Ipsum. These kittens may well be what we do for photographs in the future.

Agreed. This is something someone might find useful in a project they're working on. Unlike any Techcrunch or Gruber post.

If HN were my personal pet project, that would be my link litmus test. "Is this something that might be useful info for making something, and not just 'news' to jabber on about?"

Might be too restrictive at first blush, but that is what I come here for, not to read "news" stories that are posted everywhere else too.

I agree. This (or a similar tool) is set to become a genuinely useful part of my web development toolkit.

If it used random CC images from flickr, rather than kittens, I wonder if there would be so much objection.

If you let the /b/tards' love of kittens forever bond the "kitten" symbol in your brain indelibly to the "idiocy" symbol, you are letting the /b/tards win. They are just mammals. (Kittens, not /b/tards.)

However, it probably doesn't warrant the #1 spot.

I was about to post the exact same thing. It would be cool if there was a service that pulled CC licensed photos from Flickr for this purpose and scaled them according to the user's wishes, pulling from an archive of photos based on aspect ratio, size, etc.

I would most definitely use a version of this that pulled random photos from Flickr. That's a brilliant idea. Would also give clients a much better view of a mockup than just the gray boxes, by seeing what a mixture of different coloured photos look like.

There are a couple of other services which are more "client-suitable" and have a few more options:

* http://dummyimage.com/ * http://placehold.it/

The most useful thing to come out of this post for me is the knowledge of dummyimages.com, and specifically the aliases for the IAB standard ad sizes such as http://dummyimage.com/leaderboard/E/C. Great work by Russell Heimlich on that site, and the source code is MIT too if you want to run it locally.

Thanks I'm glad you like the ad sizes. My goal was to make it pretty hard to get a 404 while sticking to a format that's natural and easy to use. Originally dummyimage.com only had size parameters then peopel clamored for color and custom text thanks to another Hacker News post.

I've jotted down the brief history of how dummyimage.com got started for anyone interested as well http://www.russellheimlich.com/blog/the-history-of-dummyimag...

I think that it is correct to question whether this should be the top submission though.

I completely agree. I've been asking around recently for a decent source of imagery for placeholders, it's a stupid thing to spend time on every time I build a site where visuals are essential. This service is an interesting way of tackling the problem, and I think it's technologically interesting - and the image selection looks very high quality and professional compared to the random Flickr rips I was doing before.

The advantage of Lorem Ipsum is that it has zero intrinsic appeal. It looks right, but doesn't distract from the overall.

Unless you're a bloody dog lover, you're going to be distracted by the rather cute kittens. The client is going to think, at first: "Ha ha. That's funny and cute." and then they're going to think, "What am I not seeing?"

About time, too. For the last few hours it's been nothing but a kitten-themed link to an HTTP timeout.

Would the developer like to help us stay on topic by telling us how the kittens were brought back to life using HIGH TECHNOLOGY? ;)

Traffic was unexpected, I was expecting the site to travel within a small group of friends and colleagues who were in on the joke. I uploaded the site to a mediatemple (dv) server, on which Apache's MaxClients is set to a paltry 20. Whilst the server appears to be fine, Apache is unable to satisfy the requests, and I am unwilling to up the MaxClients because normally (mt) automatically disable the server.

It appears that most of the requests were being made to the ~8 images on the homepage, so I've moved these to an S3 bucket and the site is now responsive again. Hardly HIGH TECHNOLOGY, but any port works in a storm (and AWS is typically my 'any port').

I've also repointed nameservers to run via a https://www.cloudflare.com/ free account which should provide a reverse caching proxy for the homepage at the least, but will take some time to kick in.

The lesson to learn — one that I would expect most would not need to learn — is that launching a website (even in jest) in a 5 minute break in-between real work with real deadlines is not advisable.

And to second the parent post, I don't feel comfortable with this being posted to HN at all, and certainly not with it ranking #1/#2. I fear someone may have timed it perfectly to start Eternal February.

I dunno man. I need placeholders, but there was something missing... But I love kittens even more, so the choice was obvious. This just made my site mid-design look exponentially cuter (meow).

There is nothing wrong with your HIGH TECHNOLOGY. Yes, it is S3, and it is kind of boring because from the customer's perspective it just magically works, but you know what they say about things that are indistinguishable from magic... ;)

There is also nothing wrong with your flock of kittens on HN. Into each life there must inevitably come some kittens. We all know the first rule of HN: When kittens appear on the top ten, the Apocolypse is nigh. Unfortunately, the second rule of HN is that too many of us, when presented with a button clearly marked APOCALYPSE, cannot always resist the urge to press it just once just to see what happens next:

http://xkcd.com/242/

And besides, at least the kittens aren't discussing politics.

Are you the famfamfam guy from the Silk icon set? If so, let me say thank you, you did a huge service to the community by releasing those high-quality icons at a time where there were no decent free icon set available for web apps.

Keep up the good work. I love kittens, too :)

They've also essentially became the official icons of web 2.0 so many sites used them, there should be some sort of lifetime achievement award.

Some of the cropping is surprisingly excellent.

For instance:

http://placekitten.com/g/128/1024

worked so much better than I hoped.

http://placekitten.com/g/1024/128

Isn't half bad either.

Did you deliberately crop like this?

I just wanted to clear something up. A lot of our customers increase MaxClients settings, and we don't usually disable their servers for doing so. You can actually go into our community wiki to see how to do it. Other than that, good luck with S3!

Couple that with the other article about Linus going to the Oscars and HN is one drunk celebrity article from becoming TMZ.

You could use this one for code:

	 /\_/| 
	 =0-0=
	 \'I'|
	 |<|,,\_
	 |[>,,/,\ 
	 |[|,\_,,)
	 ((J(=__/

What about LOLCODE? http://en.wikipedia.org/wiki/LOLCODE

I suppose, the corpus of the lolcat meme could be harvested as an alternative to Lorem Ipsum.

Actually, such sites would have entertainment value of themselves.

Using LOLSPEAK as an alternative to lorem ipsum would be hilarious. At least, to a subset of people.

Coincidentally, I had created a lorem ipsum generator made from the nonsensical names of tech startups back in 2007. I haven't updated the names in years though, but maybe I should. (Apologies for seeming spammy; that's not my intent at all. Just thought I'd share.)

http://bizthoughts.mikelee.org/the-web-20-lorem-ipsum-genera...

Wouldn't be hard to tweak that for LOLSPEAK at all.

That is pretty brilliant. As a wise man once said, "Guba simpy bebo, zecco plazes moola gpokr."

Thanks! It amuses me to see where it's creeped up too: http://www.google.com/search?q=Eskobo+goowy+manjam

http://www.lorizzle.nl/ It's been tweaked for "Gangsta speak"

That's awesome. I'll have to hang onto that site for my next lorem use :)

Though I don't know if I want to know what this means: "we gonna chung a funky fresh"

You can also do Loorum Eepsoom - paste Lorem Ipsum into a Swedish Chef translator.

Makes me laugh, anyway.

I'll see your LOLspeak non-spammy link with one of my own, a lolspeak translator written in JavaScript http://www.txt2lol.com/

This will now be my "code coming soon" cat =]

	 /*_/| 
	 =0-0=
	 \'I'|
	 |<|,,\_
	 |[>,,/,\ 
	 |[|,\_,,)
	 ((J(=_*/

This one is valid C/C++/ObjC, Java, PHP, CSS...

Brilliant!! This was actually what I was expecting.

But it makes me think - are there any code editors that you can literally just drag pictures in, or put in urls and it replaces them with pictures? I could be stuck in some IDE ghetto and not even know about these things.

You can probably do that with Emacs ;-)

the code to do it starts with (

It shouldbe a minor mode that renders images instead of image-like URLs. Not that impossible to do. It's a bit beyond my magical powers, but I am sure it also ends with a ")"

auctex does the rendering-inside-text part, but I don't know of one that does it for html img tags

can't be hard

There's aview (ASCII-art image viewer which uses libaa); aview can render Ascii pictures to stdout.

aview solves a different problem

(insert-image (create-image "/path/to/image/file")) inserts an image into a buffer.

But I'm not sure one would want to actually use that while editing; emacs is not very good about flowing text around the displayed image.

You can paste images into Dr.Racket.

Looks interesting... supports languages called Racket and Swindle...?!

obligatory:

http://wikifaqs.net/index.php/Admiral_Ackbar

You can also have it generate huge text with semicolons.

http://i54.tinypic.com/20ssqk7.png

... and for exactly the same reason, if you paste it into a comment (which seems like the most obvious use) then you lose.

This is a cat that can be pasted right in the middle of your code and everything will still work.

ASCII-art within comments is for n00bs ;-)

I prefer this out-of-code:

  　／l、 
  （ﾟ､ ｡ ７ 　
  　l、 ~ヽ　　　
  　じしf_, )ノ

(works best non-fixed-width, and requires Japanese characters)

I keep it here: http://dl.dropbox.com/u/363028/ascii%20images.rtf (I should really add more...)

It feels so strange to upvote a link to kitten images on HN and actually have it be on topic.

I'll get downvoted to oblivion for this, not that I care. But what the hell is this doing at the top of HN.

Trying to melt a web server, I think.

It's serving as a reminder that HN is changing.

Honestly, it seems really relevant to me. The idea is great, a lot of people will end up using it and it has a cute/wow factor.

It also servers as a reminder that the Internet loves kittens and other ridiculous things. It is important to not forget this general principle and to keep it in mind when designing your product.

People are ridiculous; remember to use that to your advantage.

The less distracting version: http://placehold.it/

Or http://dummyimage.com/

placehold.it and dummyimage.com are one in the same. Source code is available at dummyimage.com

Now someone needs to write a proxy that replaces all images on a site with placekittens, à la Upside-Down-Ternet (http://www.ex-parrot.com/pete/upside-down-ternet.html) and Kittenify (http://www.reload.me.uk/kittenify).

I just learned of Placekitten and had to drop everything and write bookmarklets: http://hans.gerwitz.com/projects/placekitten.html

I didn't know about Kittenify, but they have better code. Though Placekitten has nicely curated images. A marriage is inevitable.

Nice, tiny suggestion for improvement. Allow links to end in .jpg.

There are some cases where that's a nice to have. Otherwise, hilariously useful.

I'd like to have bindings for various languages, to be able to use it like

    placeholder=new Kitten('random');

Here's javascript, the other languages are left as an exercise.

    function Kitten(width, height, color) {
        var img, g, w, h;

        w = parseInt(width,  10);
        h = parseInt(height, 10);
        g = color ? "" : "g/";
        img = document.createElement('img');
        img.src = "http://placekitten.com/" + g + w + "/" + h;
        img.width = w;
        img.height = h;

        return img;
    };

I know theres a similar service with placeholder images but everyone loves kittens right?

Congratulations on your entry to the HN1K club ;-)

Wasn't it a goal of Hacker News to NOT have kittens at the top of the page?

Along the same lines: for all of the Rails developers out there, I wrote a gem called "Sex It Up" that downloads and caches public domain images of famous artwork and sculptures.

Definitely improves the look of any prototype.

https://github.com/aantix/sex_it_up

One thing: You should change the name. I was expecting a totally different kind of pictures and was kind of afraid to even click the link.

Never thought of the NSFW implications.. Thanks for the headsup on this.

I had been using pictures of cucumbers culled from flickr up until this point. Good call.

It appears that using the /g/… URL variation gives one black-and-white pictures, and leaving it out gives one color pictures, but it would be nice if you would just say that on the home page, rather than leaving us to experiment and figure it out for ourselves. Leaving out the explanation might be excusable if two sample links on the homepage just led to color and black-and-white versions of the same kitten picture, but that isn’t the case.

This is actually something that I would use. I always need dummy images to use as placeholders for layouts. Sometimes I'll use some of my digital images, but then I'm dealing with 300 DPI 15 megapixel images that need to resized in Photoshop, which is kind of a hassle. And as a cat lover, and fan of good photography (am a sucker for nice B&W images) this is a win-win option. Bookmarked.

http://dummyimage.com is your friend :)

Cool idea!

My co-founder and I used to use pictures of Olivia Wilde as placeholders. It started with just one and then became a sort of tradition.

Kittens are cool too, though.

Recently I've been thinking of a career change. But this, surprisingly, is the first time I've smiled about web development in a long time.

While I wait for the site to load, I figured I'd comment with my own placeholder-cat experience. A site I worked on was taking a while to get me the actual images, so I took to Pixelmator and fixed myself some LOLcat placeholders. People loved it, except for one of the QAs, who said it was going to give her nightmares.

A long time ago, I used to use intentionally-obscene or otherwise offensive text and images for placeholders, lorem ipsum text, variable names, etc., on the theory that this would prevent that content from ever shipping.

It only took one violation for this theory to be discarded. Luckily, the recipient was fairly cool :)

And according to the weather report, it's snowing in hell right now. Looks like the week's off to a good start!

Is this incredibly slow for anyone else?

i think a better name would have been loremkitten.com

Great! Maybe server-side cache the images so they only need to be generated once?

More kittens to waste time at work with: http://www.zooborns.com/zooborns/cat/

And I guess you could see if they'd let you use some of their pictures. :)

Could each dimension (at least popular ones) contain multiple images? Like serving placekitten.com/200/100 is one of three or four random images?

That would avoid caching, an option would be an optional suffix like placekitten.com/200/100/2

A couple months ago I ended up spending good money on iStockPhoto looking for the right kitten picture to put in my app's 404 page.

If only I had waited.

For a second it felt like Digg in here, people talking about content degradation. The idea was fine, just a placeholder nothing more.

This is some sort of bizarro Erlang Day, right??

That's awesome as our dev team here has a folder full of FPO kitties as we call them. Nice to see Front End folks think alike!

The Kitten-Color-Clock: https://gist.github.com/849093

Am I the only one who checked if "placepuppy" was already registered after seeing this?

Yea! Kitties! I like it.

cf: http://xkcd.com/231/

I plan to combine this with the jQuery konami code plugin for lots of fun.

I work on a headless embedded system - what should I do?

I see no kittens....

Using Chrome and thoroughly disappointed.

Meh, 404s need to be fixed though ;)

http://placekitten.com/{string}/{string}

I know thats not the point but a funny error would be nice... :D

404 is the right code for such things.

I applaud your effort. ;)

GENIUS

Somebody should make one for pictures of corporate stock art. You know, the glass skyscraper shot, the white-guy-wearing-glasses-standing-over-laptop, the empty board room with leather chairs, etc...

Its awesome but there is only one feature I request: Add an ability to send arbitrary parameters at the end which will be used in the uniqueness calculation to generate a unique photo. This way I can have 10 identical kitten photo sizes next to each other each with a different picture for 10x the cuteness.

KITTEH!

Another stroke of awesome!

And in a few months they will all be replaced with goatse...

I've been WAITING FOREVER for someone to make this! =D

Errr,why has anyone downvoted this? =s

Am I the only one who absolutely detests cats?

They're evil irritating virmin IMHO.

I felt the same way until I married a cat lover. They grew on me after a couple years.

literally.

They have that effect on you: http://en.wikipedia.org/wiki/Toxoplasmosis

Free Kitten Wallpapers: http://placekitten.com/1920/1080 or http://placekitten.com/1280/1024 http://placekitten.com/1024/768 etc.

Reply on news.ycombinator.com