A 'lorem ipsum' for images.

http://dummyimage.com/

by charliepark • 16 years ago

169 77 16 years ago

dummyimage.com

steerpike• 16 years ago

This is pretty awesome for front-end developers. Nice work.

kingkool6814• 16 years ago

By a front end developer, for front end developers. Let me know how I might make it better.

Planned additions include

True file format support (add .jpg and you get a real jpg etc) Right now you can add an extension but it still serves up a gif.

Easier syntax for making squares (/250 would work instead of typing /250x250)

Ability to change the background color

njharman2• 16 years ago

http://dummyimage.com/1x8000000

Fatal error: Allowed memory size of 94371840 bytes exhausted (tried to allocate 64000000 bytes) in /home/kingkool68/dummyimage.com/code.php on line 18

Opps... Sorry.

Curiously http://dummyimage.com/8000000x1 works

And should have option to set RGB of image.

jbyers• 16 years ago

The code checks to see that x is nine or fewer characters, so you can try to request up to 9999999x9 or 9x9999999.

charlesmarshall• 16 years ago

you can trigger it with http://dummyimage.com/9000x9500 as well

kingkool6814• 16 years ago

Thank you for exploring the bounds of my shared-server memory limits.

njharman2• 16 years ago

That wasn't really my intention, (why the oops). I was trying to see how massive a a scroll bar I could make (sadly firefox does not scroll images (hmmmm, or maybe it was autoresizing it to fit on available screen). Also, being a programmer and very much into testing I naturally think of pushing bounds.

kingkool6814• 16 years ago

Oh yea I'm working on an option to change the background color. I was hoping to use an elegant syntax like http://dummyimage.com/300x250#ccc for a gray background. Too bad you can't capture anything after the hash tag on the server side. Any feedback on a better syntax?

mshafrir• 16 years ago

http://dummyimage.com/300x250/ccc

rbranson• 16 years ago

Author might not want to distribute arial.ttf for reasons of copyright violation.

CamperBob2• 16 years ago

He isn't distributing the font, is he? Rendered representations of fonts are explicitly permitted by US copyright law under all circumstances as far as I'm aware.

ahlatimer• 16 years ago

He is, actually. Download the source.

kingkool6814• 16 years ago

What can I say, I live on the edge.

ori_b2• 16 years ago

Lenna is the lorem ipsum for images (http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png). For a bit of history, http://en.wikipedia.org/wiki/Lenna

akamaka• 16 years ago

Not really, Lenna is more like the Utah teapot of images.

imperator• 16 years ago

http://en.wikipedia.org/wiki/Utah_teapot

mynameishere• 16 years ago

http://images3.wikia.nocookie.net/uncyclopedia/images/3/34/L...

(full nsfw image). Check out the strategic, crude touch up designed to keep away obscenity charges.

stanleydrew• 16 years ago

I'm not seeing it. Help me out?

tlrobinson• 16 years ago

I was hoping for Lenna.

est• 16 years ago

http://dummyimage.com/640x-481

http://dummyimage.com/640x-1e37

Warning: imagecreate() [function.imagecreate]: Invalid image dimensions in /home/kingkool68/dummyimage.com/code.php

thenduks2• 16 years ago

Probably because those are invalid image dimensions?

pizza• 16 years ago

Doesn't handle negative parameters. Otherwise, it looks pretty cool

thechangelog• 16 years ago

For what possible purpose?

oconnore• 16 years ago

So that people on Hacker News can't find a flaw with your program.

nfnaaron• 16 years ago

Shouldn't the example 640 x 480 image instead be labeled DCXL x CDLXXX?

jfornear• 16 years ago

Pretty cool. I usually just use: http://jessefornear.com/images/mr-t.jpg (Dimensions be damned!)

blhack• 16 years ago

I'm pretty partial to this one: http://newslily.com/default.jpg

(It's called default because it used to be the placeholder photo on my website for people who hadn't uploaded a profile pic. I don't know who originally took it, or how to ask them for permission to use it, so I replaced it with something else. I keep it around because it's really funny though)

scott_s• 16 years ago

I think both don't work. The point of a placeholder pic is to have something tangible there while looking at a layout. If the picture is more interesting than the layout, then people will focus on the picture. That's the motivation behind "lorem ipsum": it superficially looks like English, but it's gibberish and people won't focus on it instead of the layout.

hedgehog• 16 years ago

Very cool. Suggestion: If you make the background pattern of the image a 1px checkerboard (light gray on dark gray or something else not too obnoxious) then that will make it easier to spot places where an image is being rescaled in-browser. A 1px border might be useful too...

kingkool6814• 16 years ago

Good idea! I'm working on making an option to change the background color. Ideal syntax would be http://dummyimage.com/300x200#ccc for a gray background. Too bad the server is never sent anchor information so I've got to find a better way.

ThinkWriteMute• 16 years ago

Hmm, I might do this with a ruby script, except pull random images from WikiCommons with the exact size specified. (And color!)

listic• 16 years ago

That would be really nice. Please do.

logicalmind• 16 years ago

You might want to make sure they're safe for work. I would hate to pull a random image into my demo that was not appropriate...

markkoberlein2• 16 years ago

That's an interesting solution but couldn't you just resize a 1px grey GIF with the width and height attributes to act as a placeholder? You could also add the dimensions to an ALT and TITLE attributes so they are displayed when you mouse over it.

gokhan• 16 years ago

And you can always include jQuery with the overlay plugin to enhance the mouse over experience. Meanwhile, you can try to render 640x480 text in custom fonts via canvas... etc.

I believe that dummyimage thing is dead simple.

kingkool6814• 16 years ago

Try doing that with a print designer over your shoulder debating on two image sizes.

markkoberlein2• 16 years ago

That's a good point.

fool• 16 years ago

"Too big of an image!" just bugs me stylistically. Maybe: "The dimensions input are too large!"

kingkool6814• 16 years ago

How about "Could not compute"

charliepark• 16 years ago

I think giving a brief explanation is useful. Maybe "Sorry! We can't generate images that large!" or something. That explains what's going on without going too deep on the max dimensions and whatnot.

c23gooey• 16 years ago

Computer says no

Jim_Neath• 16 years ago

I tend to use this image (NSFW): http://files.myopera.com/coxy/albums/106123/trex-boner.jpg

x1a42• 16 years ago

I whipped up a Ruby/Sinatra version of this.

http://github.com/xxx/fakeimage

thenduks2• 16 years ago

Get it up on heroku!

x1a42• 16 years ago

done.

http://fakeimage.heroku.com/

willcodeforfoo2• 16 years ago

I love the simplicity of this, a good reminder why Ruby is so awesome.

knuckle_cake• 16 years ago

thanks!

I've now gemified it for use in Rails apps without having to hit a separate site. It emits data URIs at the moment only, so no IE love yet. I had immediate need for it.

http://github.com/xxx/placeholder_image

pmichaud2• 16 years ago

The next step is to generate these images as advertisements targeted at web developers.

jwarzech• 16 years ago

While an interesting idea I know I wouldn't use it if it was an ad. Despite the problem of my sample images trying to sell to me it would be annoying when trying to mockup a design (with images that randomly have undesired colors, patterns, etc.)

pmichaud2• 16 years ago

It's a solvable problem, and with the right targeting could actually be useful. How many people would discover Basalmiq for the first time via the placeholder image on their WIP site?

kingkool6814• 16 years ago

I thought about this then I remembered I have a soul and like to better the world.

tezza2• 16 years ago

For your safety sake I hope you're not forking a userspace imager like imagemagick.

  http://dummyimage.com/640x480+--gravity+Center+--text+%60cat+%2Fetc%2Fpasswd%60

might not be too fun.

kingkool6814• 16 years ago

Nope. Turns out I'm using GD's imageCreate function -> http://php.net/manual/en/function.imagecreate.php

tezza2• 16 years ago

Cool[1]... nice single purpose app BTW.

My normal advice to you nifty niche App'ers is to look at long standing apps to see what they did right for revenue. Namely http://www.network-science.de/ascii/

----------------

[1] GD still has its own problems, but it seems like subscribing to secunia for GD would catch most, like this recent one :: http://secunia.com/advisories/38055/

ori_b2• 16 years ago

It's perfectly safe to do that; exec() doesn't reinterpret the arguments through the shell, but passes them verbatim to the program.

Just make sure you don't use 'system()' (or the equivalent call in whatever your language is) to launch things. It was a bad idea from the start.

joeld42• 16 years ago

Thanks!

Some features that would make this really useful:

- custom colors (as mentioned by others)

- an X across the image, corner to corner

- Optional text instead of the size (i.e. "lead photo", "thumb")

- a tag (or the resolution) repeated in an offset "brick" pattern across the entire image, similar color to BG

The last one probably overkill but useful for when you are doing something like scrolling window, where not all of the image is displayed.

prewett2• 16 years ago

I'm a bit confused. It doesn't seem like this is very "lorem ipsum". Lorem ipsum looks like actual text, whereas, this does not look like actual image content (due to most images not being solid gray). To my mind, a better lorem ipsum image would have a variety of colors, shading, textures (which is probably why Lenna is a popular choice). This way you could see how a variety of image colors work with your design, color scheme, etc.

If this is simply for formatting placeholders while designing web pages, wouldn't <span style="width: xxx; height: yyy; background-color: grey; border: 1px solid black;"></span> be a pretty easy workaround, and a lot easier on the network bandwidth?

kingkool6814• 16 years ago

See here -> http://news.ycombinator.com/item?id=1077158

prewett2• 16 years ago

I'm not sure I follow your response correctly, but it seems like your response is: it's easy to switch image sizes this way. But you still have to edit the HTML, and it's not that hard to edit the width/height. Maybe I don't understand?

The more important point to my mind is that grey is definitely not lorem-ipsum. It doesn't help me evaluate anything except image size. And since it's easy to get a sized placeholder, a server to generate a URL seems not that helpful.

willcodeforfoo2• 16 years ago

How about allowing named arguments for common sizes, like IAB (http://www.iab.net/iab_products_and_industry_services/1421/1...) or common display sizes (http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.sv...)? So you could do, http://dummyimage.com/skyscraper instead of http://dummyimage.com/120x600

kingkool6814• 16 years ago

Hmmm it's a thought.

pavel_lishin• 16 years ago

http://dummyimage.com/64xbanana

rbanffy• 16 years ago

I would like if he clarified the license.

A 'lorem ipsum' for images.

Related Stories