Lorem Pixel | Hacker News Reader

Lorem Pixel

lorempixel.com

282 pointsmarshray51 comments

What I don't like about it is that it always returns the same image (not a random one) for a given size.

Yeah, they seem to be static images stored on the server, rather than generated dynamically via, say, Google Search. Personally I would have gone via that route. Have the word "kitten" and the pixel size as parameters, and serve a random photo out of the first 50 results.

This would mean no caching, so your computer would have to download the image every time, even if it was the same as one you'd already seen.

Unless you're only using these images for client demos, it can be very slow and frustrating waiting for them to load every time you refresh while trying to do html, css or js tweaks.

Also, licensing.

Add ?image=n to the end of the URL for fine-grained catte selection. I've definitely got some favorites that I'd rather see more of at any size :3

http://placekitten.com/452/450?image=1 http://placekitten.com/452/450?image=4 http://placekitten.com/452/450?image=5 http://placekitten.com/452/450?image=6 http://placekitten.com/452/450?image=9 http://placekitten.com/452/450?image=12 http://placekitten.com/452/450?image=13 http://placekitten.com/452/450?image=14 http://placekitten.com/452/450?image=15

I like http://pugholder.com

I fail to see any problems with hotlinking to random images hosted at a site that you don't control from a webpage that you're probably going to demo to your boss or client.

Good god, you've uncovered the prank of the century.

I use this quite often when I'm mocking up a design and I want it to have kind of realism. I've recently discovered http://placehold.it/ which is pretty cool as well

You might want to checkout Holder.js, it is much like placehold.it but client-side.

http://imsky.github.com/holder/

Alternatively, if you're just looking for a way to put placeholders on a page, image services and javascript solutions seem like overkill. You can achieve the same thing with a bit of css:

https://github.com/adamsanderson/placeholder

Twitter Bootstrap recently Replaced Placehold.it with Holder.js, a client-side and retina-ready placeholder image tool.

If you aren't looking for realism, robohash.org is fun

Great resource. This can prove helpful for quick comping or prototyping, but I wouldn't present these placeholder photos to a client.

How do services like this make money (or at least cover their costs)?

~100k images sent so far today at ~10kB per image is one GB of traffic, which costs less than a dime. Assuming usage goes up to twice this by the end of the day, that's ~$6/mo.

There are some ads on the page.

if those images were ads, how would advertisers track impressions?

no, there are actual ads on the page too. you using an ad blocker?

This image is lovely, but I could not use it in staging environments for certain clients: http://i.imgur.com/ZAD2Z.png

I am continually amazed at what some of my customers find to be objectionable. The internet is a big place.

It would be nice if it was possible to supply a seed for the randomization algorithm. Then the image wouldn't change at every reload and it's still possible to get another one if it's desired.

I imagine it would be a bit annoying if the image changed every time I reloaded the page which I do quite a lot while developing a web page. If I were to show a page I've developed to a customer I would not like to have to explain why the images are changing all the time.

Apart from that I find this really nice.

They have links for specifying image categories and even specific images.

I didn't notice that. This is what happens when you post comments when you are supposed to sleep.

I don't think I've bookmarked anything in ages. I'd almost forgotten how! But that's seriously useful. Thanks to whoever is responsible.

The best of the best has to be: http://www.placecage.com/

no retina image http://lorempixel.com/4000/2000/

Based on the generator on their front page, it looks like the maximum size is 1920x1920.

This is a great idea! Although I'd prefer if the generation form was the center of attention in that page. On my 14" MacBook display I had to scroll down to see it.

Reminds me of an unicode lorem ipsum I came across some time ago which I forgot the name of. Anyone know it?

Maybe: http://www.geertvanderploeg.com/unicode-gen/

Great idea. Could you please put a button that will cause the size sliders to obey common sizes? I tried to do 1280x1024 and I basically had to use the up/down arrows to zoom in on each one.

Brilliant, just brilliant. It's so simple it's one of those products that makes you wonder how it hasn't been invented until now. nice work.

(...) it hasn't been invented until now.

http://placehold.it

http://placekitten.com

Yes, there's ages similar services exist : http://www.dummyimages.com/

I do use this service for some time now for prototyping. So not invented right now, actually. ;-)

Big fan of placehold.js for web placeholder images.

pick colour, pick people, observe random chance of getting a greyscale photo...

if you reset and repeat it happens very often, but once it rights itself its fine.

dodgy logic?

nice otherwise, but this is a problem i have to say i've never had. generally google has something for me or i need to make it. :I

debugged it - some of the sources are already grayscale or close enough. you should filter these out... it feels like a bug.

A charts and graphs category would be useful on top of the categories that this already has.

But what if I want non-rectangular images! I kid, this is useful stuff for prototyping.

Did you look at the service at all?

Just curious...

I used it a lot for prototyping and it is totally possible to generate images in (nearly) every aspect ratio.

I think you missed the part where they said "rectangular".

Uups. OK, yes, my mistake. I read quadratic... shameonme

can anyone take a guess as to how this works? i have not a clue.

I would guess they pull from the wiki commons and then use typical JPG or PNG algorithm libraries to stretch or compress the image. There's probably some AI to retrieve images that don't need to be stretched much so that it looks natural.

From their images list:

> The provided images are for layout purposes and each image we use for this project is released under the creative commons license (CC BY-SA). For more information visit http://creativecommons.org/licenses/ So, if you want to use the images for more than just layouts, you have to double check the license and ask the author. For this we will link to each photographer's flickr page. Furthermore, we assume no liability.

Almost any picture can be used, the algorithm just needs to stretch and crop to maintain the correct image size ratio.

They have some set of categorized photos and simply crop them to the size you request after selecting a random one.

They have a page[1] listing all of their images (the "Images" tab at the top-right).

[1] http://lorempixel.com/images.php

On top of the obvious (resize to largest dimension, crop smallest) I'm guessing they set an anchor point on the image rather than use the center.

For example, the pig's face isn't centered. So rather than returning the center of the image, they crop the sides proportionally to the anchor point on the pig's face.

Edit: Nup. They just crop it down the middle. If you're the developer feel free to steal the above.

Reply on news.ycombinator.com