How to Improve Your Web Design Mock-Ups With lorempixel

Share this article

What does every client want to see? Customer-focused content? Accessibility policies? Profitability forecasts? Of course not — they want mock-ups of their shiny new website. Why bother with all that tedious business fluff when can critique pretty pictures over a long lunch with other members of the board. It doesn’t matter whether you choose Photoshop, mock-up tools or in-browser prototypes: you’ll need some placeholder text and images. Content is easy: head over to any lorem ipsum generator
and copy the text. Unfortunately, sourcing dummy images is more difficult. You could use gray boxes, but your lovingly-crafted design will look a little shoddy. Alternatively, you could hunt through image libraries … but who has spare time for all that sourcing, resizing and cropping? Here’s a better option: lorempixel.com

lorempixel random imagelorempixel does for images what lorem ipsum does for text. You can source creative commons-licensed images using the tool on the home page but a RESTful URL makes life far easier. So let’s say you need a random image which is exactly 155×168 in size — simply enter the URL lorempixel.com/155/168/

lorempixel random imageWhat if we want the image to use grayscale? Add a ‘g’ to the path — lorempixel.com/g/155/168/

lorempixel technics imageOf course, we rarely want completely random images. Fortunately a category can be appended to the URL, such as lorempixel.com/155/168/technics

lorempixel technics imagelorempixel supports a number of categories to choose from: abstract, animals, city, food, nightlife, fashion, people, nature,sports, technics and transport. If you find a specific image you want to use, add its number to the end of the URL — lorempixel.com/155/168/technics/2

Finally, you can add a caption to any image by placing the text in the URL after the category name or index — lorempixel.com/300/160/nature/7/SitePoint

lorempixel image overlay

lorempixel.com is a simple idea, but it’s useful and implemented efficiently. It may even help you win that next contract…

Frequently Asked Questions about LoremPixel Image Mock-ups

What is LoremPixel and how does it work?

LoremPixel is a free service that provides placeholder images for every case, web or print, on almost any subject, in any size. It works by generating random images from a specified category or completely at random. You can specify the size, category, and even a specific number to get the same image every time.

How can I use LoremPixel for my web development projects?

LoremPixel is a great tool for web developers who need placeholder images during the development process. You can use it by simply adding the image dimensions (width and height) after our URL and you’ll get a placeholder. You can also specify the category of the image you want.

Can I choose the category of images in LoremPixel?

Yes, LoremPixel allows you to choose from a variety of categories for your placeholder images. You can specify the category in the URL to get an image from that category. The available categories include abstract, animals, business, cats, city, food, nightlife, fashion, people, nature, sports, technics, and transport.

Is LoremPixel a free service?

Yes, LoremPixel is a completely free service. You can use it to generate as many placeholder images as you need for your projects without any cost.

Can I get the same image every time in LoremPixel?

Yes, you can get the same image every time by specifying a number at the end of the URL. This number corresponds to a specific image in the category you’ve chosen.

How does LoremPixel compare to other placeholder image generators?

LoremPixel stands out for its simplicity and ease of use. It allows you to specify the size, category, and even a specific image number. While other services may offer similar features, LoremPixel’s straightforward approach makes it a favorite among many web developers.

Can I use LoremPixel for print projects?

Yes, LoremPixel can be used for print projects as well. The images generated are of high quality and can be used in a variety of print formats.

Are there any limitations to using LoremPixel?

There are no major limitations to using LoremPixel. However, as the images are randomly generated, you may not always get an image that perfectly fits your needs. In such cases, you may need to try generating a new image or choose a different category.

Can I specify the format of the images in LoremPixel?

LoremPixel generates images in JPEG format. Currently, it does not support other formats.

Is LoremPixel suitable for large-scale projects?

Yes, LoremPixel can be used for large-scale projects. It’s a reliable service that can generate a large number of placeholder images quickly and efficiently. However, for very large projects, you may want to consider using a combination of different placeholder image services to ensure a wider variety of images.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

graphicsimagesmock-ups
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week